fix: styles
This commit is contained in:
@@ -12,6 +12,7 @@ import { LanguageManager } from './components/LanguageManager';
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
|
||||
=======
|
||||
>>>>>>> f1620b6 (fix: issue in user profile)
|
||||
@@ -23,6 +24,9 @@ import { UserProfileForm } from './features/profile/components/UserProfileForm';
|
||||
>>>>>>> f9815fb (fix: issue in user profile)
|
||||
=======
|
||||
>>>>>>> 2a79376 (fix: merge conflict)
|
||||
=======
|
||||
import { UserForm } from './features/profile/components/UserForm';
|
||||
>>>>>>> 60c6dc1 (fix: styles)
|
||||
function App() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
@@ -30,6 +34,7 @@ function App() {
|
||||
<>
|
||||
<CssBaseline />
|
||||
<LanguageManager />
|
||||
<UserForm />
|
||||
<div style={{ padding: '16px' }}>
|
||||
<Typography variant="h3">{t('helloWorld')}</Typography>
|
||||
<Box
|
||||
|
||||
56
src/components/CardContainer.tsx
Normal file
56
src/components/CardContainer.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { Box, Typography } from '@mui/material';
|
||||
export function CardContainer({
|
||||
title,
|
||||
subtitle,
|
||||
action,
|
||||
children,
|
||||
highlighted,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
action?: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
highlighted?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: '754px',
|
||||
backgroundColor: 'white',
|
||||
// boxShadow: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: highlighted ? '#E3F2FD' : '#F5F5F5',
|
||||
p: 2,
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
color={highlighted ? '#2979FF' : 'text.primary'}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography
|
||||
color={highlighted ? '#2979FF' : 'text.secondary'}
|
||||
variant="body2"
|
||||
>
|
||||
{subtitle}
|
||||
</Typography>
|
||||
</Box>
|
||||
{action}
|
||||
</Box>
|
||||
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
39
src/components/CountDownTimer.tsx
Normal file
39
src/components/CountDownTimer.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
interface CountdownTimerProps {
|
||||
initialSeconds: number;
|
||||
onComplete?: () => void;
|
||||
}
|
||||
|
||||
export function CountDownTimer({
|
||||
initialSeconds,
|
||||
onComplete,
|
||||
}: CountdownTimerProps) {
|
||||
const [secondsLeft, setSecondsLeft] = useState(initialSeconds);
|
||||
|
||||
useEffect(() => {
|
||||
setSecondsLeft(initialSeconds);
|
||||
}, [initialSeconds]);
|
||||
|
||||
useEffect(() => {
|
||||
if (secondsLeft <= 0) {
|
||||
onComplete?.();
|
||||
return;
|
||||
}
|
||||
const timer = setInterval(() => {
|
||||
setSecondsLeft((prev) => prev - 1);
|
||||
}, 1000);
|
||||
return () => clearInterval(timer);
|
||||
}, [secondsLeft, onComplete]);
|
||||
|
||||
const toPersianDigits = (str: string) =>
|
||||
str.replace(/\d/g, (d: string) => '۰۱۲۳۴۵۶۷۸۹'[parseInt(d)]);
|
||||
|
||||
const formatTime = (totalSeconds: number) => {
|
||||
const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');
|
||||
const seconds = String(totalSeconds % 60).padStart(2, '0');
|
||||
return toPersianDigits(`${minutes}:${seconds}`);
|
||||
};
|
||||
|
||||
return <span>{formatTime(secondsLeft)}</span>;
|
||||
}
|
||||
@@ -3,13 +3,13 @@ import {
|
||||
Typography,
|
||||
Button,
|
||||
TextField,
|
||||
Grid,
|
||||
FormControl,
|
||||
Select,
|
||||
MenuItem,
|
||||
type SelectChangeEvent,
|
||||
} from '@mui/material';
|
||||
import { useState, type ChangeEvent } from 'react';
|
||||
import { CardContainer } from '@/components/CardContainer';
|
||||
|
||||
export function PersonalInformation() {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
@@ -51,58 +51,30 @@ export function PersonalInformation() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
backgroundColor: '#F5F5F5',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
p: 2,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '600px',
|
||||
backgroundColor: 'white',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: isEditing ? '#ADD8E6' : '#F5F5F5',
|
||||
p: 2,
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{ color: isEditing ? '#1976d2' : 'black' }}
|
||||
>
|
||||
اطلاعات شخصی من
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
sx={{ color: isEditing ? '#1976d2' : 'gray', fontSize: '13px' }}
|
||||
>
|
||||
این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی
|
||||
میماند
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<CardContainer
|
||||
title="اطلاعات شخصی من"
|
||||
subtitle="این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی میماند"
|
||||
highlighted={isEditing}
|
||||
action={
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
{isEditing && (
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={() => setIsEditing(false)}
|
||||
size="large"
|
||||
sx={{
|
||||
backgroundColor: '#ADD8E6',
|
||||
color: '#1976d2',
|
||||
width: '80px',
|
||||
height: '30px',
|
||||
color: '#2979FF',
|
||||
width: '43px',
|
||||
}}
|
||||
>
|
||||
لغو
|
||||
@@ -110,120 +82,150 @@ export function PersonalInformation() {
|
||||
)}
|
||||
<Button
|
||||
onClick={toggleEdit}
|
||||
size="large"
|
||||
sx={{
|
||||
border: 0.5,
|
||||
borderColor: '#1976d2',
|
||||
borderRadius: '5px',
|
||||
backgroundColor: isEditing ? '#1976d2' : 'white',
|
||||
color: isEditing ? 'white' : '#1976d2',
|
||||
width: '80px',
|
||||
height: '30px',
|
||||
border: '1px solid',
|
||||
borderColor: '#2979FF',
|
||||
borderRadius: '4px',
|
||||
backgroundColor: isEditing ? '#2979FF' : 'white',
|
||||
color: isEditing ? 'white' : '#2979FF',
|
||||
px: '22px',
|
||||
py: '8px',
|
||||
// minWidth: '93px',
|
||||
width: isEditing ? '85px' : '93px',
|
||||
}}
|
||||
>
|
||||
{isEditing ? 'ذخیره' : 'ویرایش'}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={4}>
|
||||
<Grid item xs={6}>
|
||||
}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 4,
|
||||
p: 2,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: 'calc(50% - 16px)' }}>
|
||||
{isEditing ? (
|
||||
<TextField
|
||||
fullWidth
|
||||
name="firstName"
|
||||
value={data.firstName}
|
||||
onChange={handleChange}
|
||||
inputProps={{ sx: { height: '12px' } }}
|
||||
label="نام"
|
||||
/>
|
||||
) : (
|
||||
<Box sx={{ width: '250px' }}>
|
||||
<Typography variant="caption" sx={{ color: 'gray' }}>
|
||||
<Box
|
||||
sx={{
|
||||
height: '48px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
px: 4,
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
نام
|
||||
</Typography>
|
||||
<Typography variant="subtitle2">
|
||||
<Typography variant="body1" color="text.primary">
|
||||
{displayValue(data.firstName)}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
<Grid item xs={6}>
|
||||
<Box sx={{ width: 'calc(50% - 16px)' }}>
|
||||
{isEditing ? (
|
||||
<TextField
|
||||
fullWidth
|
||||
name="lastName"
|
||||
value={data.lastName}
|
||||
onChange={handleChange}
|
||||
inputProps={{ sx: { height: '12px' } }}
|
||||
label="نام خانوادگی"
|
||||
/>
|
||||
) : (
|
||||
<Box sx={{ width: '200px' }}>
|
||||
<Typography variant="caption" sx={{ color: 'gray' }}>
|
||||
<Box
|
||||
sx={{
|
||||
height: '48px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
نام خانوادگی
|
||||
</Typography>
|
||||
<Typography variant="subtitle2">
|
||||
<Typography variant="body1" color="text.primary">
|
||||
{displayValue(data.lastName)}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
<Grid item xs={6}>
|
||||
<Box sx={{ width: 'calc(50% - 16px)' }}>
|
||||
{isEditing ? (
|
||||
<FormControl fullWidth>
|
||||
<Select
|
||||
value={gender}
|
||||
onChange={handleChangeGender}
|
||||
sx={{
|
||||
height: '45px',
|
||||
width: '210px',
|
||||
'& .MuiSelect-select': {
|
||||
paddingY: '10px',
|
||||
},
|
||||
}}
|
||||
label="جنسیت"
|
||||
displayEmpty
|
||||
>
|
||||
<MenuItem value="female">زن</MenuItem>
|
||||
<MenuItem value="male">مرد</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
) : (
|
||||
<Box sx={{ width: '250px' }}>
|
||||
<Typography variant="caption" sx={{ color: 'gray' }}>
|
||||
<Box
|
||||
sx={{
|
||||
height: '48px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
px: 4,
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
جنسیت
|
||||
</Typography>
|
||||
<Typography variant="subtitle1">
|
||||
<Typography variant="body1" color="text.primary">
|
||||
{displayValue(data.gender)}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
<Grid item xs={6}>
|
||||
<Box sx={{ width: 'calc(50% - 16px)' }}>
|
||||
{isEditing ? (
|
||||
<TextField
|
||||
fullWidth
|
||||
name="nationalCode"
|
||||
value={data.nationalCode}
|
||||
onChange={handleChange}
|
||||
inputProps={{ sx: { height: '12px' } }}
|
||||
label="کدملی"
|
||||
label="کد ملی"
|
||||
/>
|
||||
) : (
|
||||
<Box>
|
||||
<Typography variant="caption" sx={{ color: 'gray' }}>
|
||||
<Box
|
||||
sx={{
|
||||
height: '48px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
کد ملی
|
||||
</Typography>
|
||||
<Typography variant="subtitle2">
|
||||
<Typography variant="body1" color="text.primary">
|
||||
{displayValue(data.nationalCode)}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContainer>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,305 +2,253 @@ import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
IconButton,
|
||||
TextField,
|
||||
IconButton,
|
||||
GlobalStyles,
|
||||
} from '@mui/material';
|
||||
import { Edit, CloseSquare } from 'iconsax-react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Edit, Refresh, TickCircle } from 'iconsax-react';
|
||||
import { useState, useEffect, type ChangeEvent } from 'react';
|
||||
import { CardContainer } from '@/components/CardContainer';
|
||||
import { CountDownTimer } from '@/components/CountDownTimer';
|
||||
|
||||
export function PhoneNumber() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [dialogStep, setDialogStep] = useState<'enterPhone' | 'verifyCode'>(
|
||||
'enterPhone',
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [phoneNumber, setPhoneNumber] = useState('');
|
||||
const [verificationCode, setVerificationCode] = useState('');
|
||||
const [buttonState, setButtonState] = useState<'default' | 'counting'>(
|
||||
'default',
|
||||
);
|
||||
const [buttonState, setButtonState] = useState('default'); // default | counting | sent
|
||||
const [countdown, setCountdown] = useState(120);
|
||||
const [isVerifying, setIsVerifying] = useState(false);
|
||||
const [isVerified, setIsVerified] = useState(false);
|
||||
|
||||
const handleChangePhoneNumber = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
setDialogStep('enterPhone');
|
||||
};
|
||||
const handleSendCode = () => {
|
||||
setDialogStep('verifyCode');
|
||||
setButtonState('sent');
|
||||
setButtonState('counting');
|
||||
setIsVerified(false);
|
||||
};
|
||||
|
||||
const handleVerifyCode = () => {
|
||||
setIsVerifying(true);
|
||||
setTimeout(() => {
|
||||
setButtonState('counting');
|
||||
setCountdown(120);
|
||||
}, 1000);
|
||||
};
|
||||
const handleResendCode = () => {
|
||||
setButtonState('sent');
|
||||
setTimeout(() => {
|
||||
setButtonState('counting');
|
||||
setCountdown(120);
|
||||
}, 1000);
|
||||
setIsVerifying(false);
|
||||
setIsVerified(true);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (buttonState === 'counting' && countdown > 0) {
|
||||
const timer = setInterval(() => {
|
||||
setCountdown((prev) => prev - 1);
|
||||
}, 1000);
|
||||
return () => clearInterval(timer);
|
||||
}
|
||||
if (countdown === 0 && buttonState === 'counting') {
|
||||
setButtonState('default');
|
||||
}
|
||||
}, [buttonState, countdown]);
|
||||
|
||||
const toPersianDigits = (str: string) =>
|
||||
str.replace(/\d/g, (d: string) => '۰۱۲۳۴۵۶۷۸۹'[parseInt(d)]);
|
||||
|
||||
const getButtonLabel = () => {
|
||||
if (buttonState === 'sent') return 'ارسال شد!';
|
||||
if (buttonState === 'counting') {
|
||||
const minutes = String(Math.floor(countdown / 60)).padStart(2, '0');
|
||||
const seconds = String(countdown % 60).padStart(2, '0');
|
||||
const time = `${minutes}:${seconds}`;
|
||||
return toPersianDigits(time);
|
||||
}
|
||||
return 'ارسال دوباره کد';
|
||||
const toggleEdit = () => {
|
||||
setIsEditing((prev) => !prev);
|
||||
setButtonState('default');
|
||||
setIsVerified(false);
|
||||
setVerificationCode('');
|
||||
};
|
||||
|
||||
const handleEdit = () => {
|
||||
setDialogStep('enterPhone');
|
||||
const handlePhoneNumberChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value.replace(/\D/g, '');
|
||||
setPhoneNumber(value);
|
||||
};
|
||||
|
||||
const handleVerificationCodeChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value.replace(/\D/g, '');
|
||||
setVerificationCode(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#F5F5F5',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<>
|
||||
<GlobalStyles
|
||||
styles={{
|
||||
'@keyframes spin': {
|
||||
from: { transform: 'rotate(0deg)' },
|
||||
to: { transform: 'rotate(360deg)' },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
width: '600px',
|
||||
backgroundColor: 'white',
|
||||
boxShadow: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
backgroundColor: '#F5F5F5',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
p: 2,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5F5F5',
|
||||
p: 2,
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Typography variant="h6">شماره تماس من</Typography>
|
||||
<Typography sx={{ color: 'gray' }} variant="subtitle2">
|
||||
این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی
|
||||
میماند
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button
|
||||
onClick={handleChangePhoneNumber}
|
||||
sx={{
|
||||
border: 0.5,
|
||||
borderColor: '#1976d2',
|
||||
borderRadius: '5px',
|
||||
backgroundColor: 'white',
|
||||
color: '#1976d2',
|
||||
width: '150px',
|
||||
height: '30px',
|
||||
}}
|
||||
>
|
||||
تغییر شماره تماس
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
p: 2,
|
||||
borderRadius: 1,
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>
|
||||
09909366045
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ color: 'gray' }}>
|
||||
۱ ماه پیش
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* <IconButton
|
||||
sx={{
|
||||
border: '1px solid #1976d2',
|
||||
color: '#1976d2',
|
||||
borderRadius: '12px',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
}}
|
||||
onClick={handleChangePhoneNumber}
|
||||
></IconButton> */}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Dialog open={open} onClose={handleClose} fullWidth maxWidth="xs">
|
||||
<DialogTitle
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5F5F5',
|
||||
}}
|
||||
>
|
||||
ویرایش شماره تماس
|
||||
<IconButton onClick={handleClose}>
|
||||
<CloseSquare size="24" color="gray" variant="Outline" />
|
||||
</IconButton>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
{dialogStep === 'enterPhone' ? (
|
||||
<>
|
||||
<Typography variant="subtitle1" sx={{ mb: 1 }}>
|
||||
شماره تماس جدید
|
||||
</Typography>
|
||||
<Typography variant="subtitle2" sx={{ color: 'gray', mb: 2 }}>
|
||||
شماره تماس جدید جایگزین شماره تماس قبلی شما خواهد شد
|
||||
</Typography>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="شماره تماس"
|
||||
placeholder="09123456789"
|
||||
sx={{
|
||||
mb: 2,
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'& fieldset': {
|
||||
borderColor: '#1976d2',
|
||||
},
|
||||
'&:hover fieldset': {
|
||||
borderColor: '#1976d2',
|
||||
},
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: '#1976d2',
|
||||
},
|
||||
},
|
||||
'& label.Mui-focused': {
|
||||
color: '#1976d2',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<CardContainer
|
||||
title="شماره تماس من"
|
||||
subtitle="این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی میماند"
|
||||
highlighted={isEditing}
|
||||
action={
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
{isEditing && (
|
||||
<Button
|
||||
onClick={handleSendCode}
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
borderRadius: '10px',
|
||||
backgroundColor: '#1976d2',
|
||||
'&:hover': { backgroundColor: '#115293' },
|
||||
}}
|
||||
variant="text"
|
||||
onClick={toggleEdit}
|
||||
size="large"
|
||||
sx={{ color: '#2979FF', width: '43px' }}
|
||||
>
|
||||
ارسال کد تایید
|
||||
لغو
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Box>
|
||||
<Typography variant="subtitle1" sx={{ mb: 1 }}>
|
||||
اعتبار سنجی
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
sx={{ color: 'gray', mb: 2 }}
|
||||
>
|
||||
کد تایید 4 رقمی به شماره موبایل شما ارسال شد. لطفا آن را
|
||||
وارد کنید
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button
|
||||
sx={{
|
||||
border: 0.5,
|
||||
borderColor: '#1976d2',
|
||||
height: '35px',
|
||||
color: '#1976d2',
|
||||
width: '150px',
|
||||
}}
|
||||
onClick={handleEdit}
|
||||
>
|
||||
<Edit />
|
||||
09123456789
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
<Button
|
||||
onClick={toggleEdit}
|
||||
size="large"
|
||||
variant="outlined"
|
||||
sx={{
|
||||
border: '1px solid',
|
||||
borderColor: '#2979FF',
|
||||
borderRadius: '4px',
|
||||
backgroundColor: isEditing ? '#2979FF' : 'white',
|
||||
color: isEditing ? 'white' : '#2979FF',
|
||||
width: isEditing ? '85px' : '161px',
|
||||
}}
|
||||
>
|
||||
{isEditing ? 'ذخیره' : 'تغییر شماره تماس'}
|
||||
</Button>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
{isEditing ? (
|
||||
<Box sx={{ px: 4 }}>
|
||||
<Box sx={{ width: '668px', mb: 2 }}>
|
||||
<Typography variant="h6" color="text.primary">
|
||||
تغییر شماره تماس
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
شماره تماس جدید شما جایگزین شماره تماس قبلی(+989123456789)
|
||||
خواهد شد.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '700px',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="کد تایید"
|
||||
placeholder="کد تایید را وارد کنید"
|
||||
sx={{
|
||||
mb: 2,
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'& fieldset': {
|
||||
borderColor: '#1976d2',
|
||||
},
|
||||
'&:hover fieldset': {
|
||||
borderColor: '#1976d2',
|
||||
},
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: '#1976d2',
|
||||
},
|
||||
},
|
||||
'& label.Mui-focused': {
|
||||
color: '#1976d2',
|
||||
},
|
||||
name="phoneNumber"
|
||||
placeholder="09123456789"
|
||||
label="شماره تماس جدید"
|
||||
type="tel"
|
||||
value={phoneNumber}
|
||||
onChange={handlePhoneNumberChange}
|
||||
sx={{ width: '100%', maxWidth: '474px' }}
|
||||
InputProps={{
|
||||
startAdornment:
|
||||
buttonState === 'counting' ? (
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => setButtonState('default')}
|
||||
>
|
||||
<Edit size="20" color="#2979FF" />
|
||||
</IconButton>
|
||||
) : null,
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
|
||||
{isVerified ? (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: '194px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'success.main',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<TickCircle size="20" color="#2e7d32" variant="Bold" />
|
||||
تایید شد
|
||||
</Box>
|
||||
) : (
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={handleResendCode}
|
||||
sx={{ width: '200px' }}
|
||||
disabled={
|
||||
buttonState === 'sent' || buttonState === 'counting'
|
||||
}
|
||||
sx={{ width: '100%', maxWidth: '194px', color: '#2979FF' }}
|
||||
size="large"
|
||||
onClick={handleSendCode}
|
||||
disabled={buttonState === 'counting'}
|
||||
>
|
||||
{getButtonLabel()}
|
||||
{buttonState === 'counting' ? (
|
||||
<CountDownTimer
|
||||
initialSeconds={60}
|
||||
onComplete={() => setButtonState('default')}
|
||||
/>
|
||||
) : (
|
||||
'ارسال کد تایید'
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{buttonState === 'counting' && !isVerified && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '700px',
|
||||
gap: 2,
|
||||
mt: 2,
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
name="verificationCode"
|
||||
placeholder="کد تایید"
|
||||
label="کد تایید"
|
||||
type="tel"
|
||||
value={verificationCode}
|
||||
onChange={handleVerificationCodeChange}
|
||||
sx={{ width: '100%', maxWidth: '474px' }}
|
||||
/>
|
||||
<Button
|
||||
onClick={handleClose}
|
||||
variant="contained"
|
||||
fullWidth
|
||||
size="large"
|
||||
onClick={handleVerifyCode}
|
||||
disabled={isVerifying || verificationCode.length === 0}
|
||||
sx={{
|
||||
borderRadius: '10px',
|
||||
backgroundColor: '#1976d2',
|
||||
'&:hover': { backgroundColor: '#115293' },
|
||||
width: '100%',
|
||||
maxWidth: '194px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#2979FF',
|
||||
}}
|
||||
>
|
||||
بررسی کد
|
||||
{isVerifying ? (
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
animation: 'spin 1s linear infinite',
|
||||
}}
|
||||
>
|
||||
<Refresh size="20" color="white" />
|
||||
</Box>
|
||||
) : (
|
||||
'بررسی کد'
|
||||
)}
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
height: '48px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
px: 4,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" color="text.primary">
|
||||
09909366045
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
۱ ماه پیش
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</CardContainer>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,12 @@
|
||||
import { Google, Apple, Sms, Trash, CloseSquare } from 'iconsax-react';
|
||||
import {
|
||||
Google,
|
||||
Apple,
|
||||
Sms,
|
||||
Trash,
|
||||
CloseSquare,
|
||||
Message,
|
||||
ArrowDown3,
|
||||
} from 'iconsax-react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
@@ -8,13 +16,33 @@ import {
|
||||
DialogContent,
|
||||
IconButton,
|
||||
TextField,
|
||||
Menu,
|
||||
MenuItem,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
} from '@mui/material';
|
||||
import { useState } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { CardContainer } from '@/components/CardContainer';
|
||||
|
||||
export function SocialMedia() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
const [openDialog, setOpenDialog] = useState(false);
|
||||
const [emailInput, setEmailInput] = useState('');
|
||||
const [emailError, setEmailError] = useState(false);
|
||||
const [anchor, setAnchor] = useState<null | HTMLElement>(null);
|
||||
const openMenu = Boolean(anchor);
|
||||
|
||||
const handleOpenDialog = () => setOpenDialog(true);
|
||||
const handleCloseDialog = () => setOpenDialog(false);
|
||||
|
||||
const handleClickMenu = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setAnchor(e.currentTarget);
|
||||
};
|
||||
const handleCloseMenu = () => setAnchor(null);
|
||||
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
setEmailInput(value);
|
||||
setEmailError(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value));
|
||||
};
|
||||
|
||||
const emailList = [
|
||||
{ email: 'emailtemp@email.com', provider: 'email' },
|
||||
@@ -22,189 +50,256 @@ export function SocialMedia() {
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: '#F5F5F5',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
p: 2,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '600px',
|
||||
backgroundColor: 'white',
|
||||
boxShadow: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
}}
|
||||
<CardContainer
|
||||
title="ایمیل و شبکه های اجتماعی من"
|
||||
subtitle="این اطلاعات شما صرفاً برای احراز هویت شما است و نزد هارمونی باقی میماند"
|
||||
action={
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-start' }}>
|
||||
<Button
|
||||
onClick={handleClickMenu}
|
||||
variant="outlined"
|
||||
size="large"
|
||||
sx={{
|
||||
maxWidth: '187px',
|
||||
height: '42px',
|
||||
border: '1px solid',
|
||||
borderColor: '#2979FF',
|
||||
borderRadius: '8px',
|
||||
color: '#2979FF',
|
||||
fontSize: '14px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
px: 2,
|
||||
}}
|
||||
>
|
||||
افزودن ایمیل / سوشال
|
||||
{openMenu && <ArrowDown3 size="20" color="#2979FF" />}
|
||||
</Button>
|
||||
<Menu
|
||||
anchorEl={anchor}
|
||||
open={openMenu}
|
||||
onClose={handleCloseMenu}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
width: anchor ? `${anchor.offsetWidth}px` : undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleCloseMenu();
|
||||
handleOpenDialog();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Message size={20} color="black" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>ایمیل</ListItemText>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleCloseMenu();
|
||||
handleOpenDialog();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Google size={20} color="#4285F4" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>گوگل</ListItemText>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleCloseMenu();
|
||||
handleOpenDialog();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Apple size={20} color="black" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>اپل</ListItemText>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5F5F5',
|
||||
width: '100%',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '8px',
|
||||
p: 2,
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Typography variant="h6">ایمیل و شبکههای اجتماعی من</Typography>
|
||||
<Typography sx={{ color: 'gray' }} variant="subtitle2">
|
||||
این اطلاعات شما صرفاً برای احراز هویت شما است و نزد هارمونی باقی
|
||||
میماند
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button
|
||||
onClick={handleOpen}
|
||||
sx={{
|
||||
border: 0.5,
|
||||
borderColor: '#1976d2',
|
||||
borderRadius: '5px',
|
||||
backgroundColor: 'white',
|
||||
color: '#1976d2',
|
||||
width: '150px',
|
||||
height: '30px',
|
||||
}}
|
||||
>
|
||||
افزودن ایمیل / سوشال
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{emailList.map((item, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
p: 2,
|
||||
borderRadius: 1,
|
||||
mt: 1,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
{item.provider === 'google' && (
|
||||
<Google
|
||||
size="20"
|
||||
variant="Bold"
|
||||
color="#4285F4"
|
||||
style={{ marginLeft: 8 }}
|
||||
/>
|
||||
)}
|
||||
{item.provider === 'apple' && (
|
||||
<Apple
|
||||
size="20"
|
||||
variant="Bold"
|
||||
color="black"
|
||||
style={{ marginLeft: 8 }}
|
||||
/>
|
||||
)}
|
||||
{item.provider === 'email' && (
|
||||
<Sms
|
||||
size="20"
|
||||
variant="Bold"
|
||||
color="#1976d2"
|
||||
style={{ marginLeft: 8 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Box>
|
||||
<Typography sx={{ fontWeight: 'bold' }}>
|
||||
{item.email}
|
||||
</Typography>
|
||||
<Typography variant="body2">۱ ماه پیش</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<IconButton>
|
||||
<Trash size="20" color="gray" variant="Outline" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Dialog open={open} onClose={handleClose} fullWidth maxWidth="xs">
|
||||
<DialogTitle
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5F5F5',
|
||||
}}
|
||||
>
|
||||
افزودن ایمیل / سوشال
|
||||
<IconButton onClick={handleClose}>
|
||||
<CloseSquare size="24" color="gray" />
|
||||
</IconButton>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="ایمیل"
|
||||
placeholder="abc@email.com"
|
||||
{emailList.map((item, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
mb: 2,
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'& fieldset': { borderColor: '#1976d2' },
|
||||
'&:hover fieldset': { borderColor: '#1976d2' },
|
||||
'&.Mui-focused fieldset': { borderColor: '#1976d2' },
|
||||
},
|
||||
'& label.Mui-focused': { color: '#1976d2' },
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
borderRadius: '10px',
|
||||
backgroundColor: '#1976d2',
|
||||
'&:hover': { backgroundColor: '#115293' },
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
p: 1,
|
||||
borderBottom:
|
||||
index !== emailList.length - 1 ? '1px solid #eee' : 'none',
|
||||
}}
|
||||
>
|
||||
ارسال کد تایید
|
||||
</Button>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
|
||||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
|
||||
<Typography sx={{ mx: 1, fontSize: '12px', color: 'gray' }}>
|
||||
یا
|
||||
</Typography>
|
||||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
{item.provider === 'google' && (
|
||||
<Google
|
||||
size="20"
|
||||
variant="Bold"
|
||||
color="#4285F4"
|
||||
style={{ marginLeft: 8 }}
|
||||
/>
|
||||
)}
|
||||
{item.provider === 'apple' && (
|
||||
<Apple
|
||||
size="20"
|
||||
variant="Bold"
|
||||
color="black"
|
||||
style={{ marginLeft: 8 }}
|
||||
/>
|
||||
)}
|
||||
{item.provider === 'email' && (
|
||||
<Sms
|
||||
size="20"
|
||||
variant="Bold"
|
||||
color="#1976d2"
|
||||
style={{ marginLeft: 8 }}
|
||||
/>
|
||||
)}
|
||||
<Box>
|
||||
<Typography sx={{ fontWeight: 'bold', fontSize: '14px' }}>
|
||||
{item.email}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
۱ ماه پیش
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<IconButton size="small">
|
||||
<Trash size="20" color="gray" variant="Outline" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Button
|
||||
<Dialog
|
||||
open={openDialog}
|
||||
onClose={handleCloseDialog}
|
||||
fullWidth
|
||||
maxWidth="xs"
|
||||
>
|
||||
<DialogTitle
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5F5F5',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '16px',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<IconButton onClick={handleCloseDialog} size="small">
|
||||
<CloseSquare size="24" color="gray" />
|
||||
</IconButton>
|
||||
افزودن ایمیل
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography fontWeight="bold">ایمیل جدید</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
با فعالسازی ایمیل میتوانید در دفعات بعدی ورود برای ورود از
|
||||
این ایمیل استفاده کنید
|
||||
</Typography>
|
||||
</Box>
|
||||
<TextField
|
||||
fullWidth
|
||||
type="email"
|
||||
value={emailInput}
|
||||
onChange={handleEmailChange}
|
||||
error={emailError}
|
||||
helperText={emailError ? 'لطفا یک ایمیل معتبر وارد کنید' : ''}
|
||||
label="ایمیل"
|
||||
placeholder="abc@email.com"
|
||||
sx={{
|
||||
width: '50%',
|
||||
border: 2,
|
||||
borderColor: '#1976d2',
|
||||
color: '#1976d2',
|
||||
borderRadius: '8px',
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '8px',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Google size="20" color="#4285F4" style={{ marginLeft: 8 }} />
|
||||
گوگل
|
||||
</Button>
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
width: '50%',
|
||||
border: 2,
|
||||
borderColor: '#1976d2',
|
||||
color: '#1976d2',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: '#1976d2',
|
||||
}}
|
||||
disabled={emailError || emailInput === ''}
|
||||
>
|
||||
<Apple size="20" color="black" style={{ marginLeft: 8 }} />
|
||||
اپل
|
||||
ارسال کد تایید
|
||||
</Button>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
|
||||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
|
||||
<Typography sx={{ mx: 1, fontSize: '12px', color: 'gray' }}>
|
||||
یا
|
||||
</Typography>
|
||||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Button
|
||||
sx={{
|
||||
width: '50%',
|
||||
border: 2,
|
||||
borderColor: '#1976d2',
|
||||
color: '#1976d2',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Google size="20" color="#4285F4" style={{ marginLeft: 8 }} />
|
||||
گوگل
|
||||
</Button>
|
||||
<Button
|
||||
sx={{
|
||||
width: '50%',
|
||||
border: 2,
|
||||
borderColor: '#1976d2',
|
||||
color: '#1976d2',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Apple size="20" color="black" style={{ marginLeft: 8 }} />
|
||||
اپل
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContainer>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user