feat: language can be changed between persian and english and everything got responsive
This commit is contained in:
30
package-lock.json
generated
30
package-lock.json
generated
@@ -17,8 +17,10 @@
|
||||
"i18next-http-backend": "^3.0.2",
|
||||
"iconsax-react": "^0.0.8",
|
||||
"react": "^19.1.0",
|
||||
"react-country-flag": "^3.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-i18next": "^15.6.0",
|
||||
"react-virtuoso": "^4.13.0",
|
||||
"stylis": "^4.3.6",
|
||||
"stylis-plugin-rtl": "^2.1.1"
|
||||
},
|
||||
@@ -1067,9 +1069,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@eslint/plugin-kit": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.3.tgz",
|
||||
"integrity": "sha512-1+WqvgNMhmlAambTvT3KPtCl/Ibr68VldY2XY40SL1CE0ZXiakFR/cbTspaF5HsnpDMvcYYoJHfl4980NBjGag==",
|
||||
"version": "0.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.4.tgz",
|
||||
"integrity": "sha512-Ul5l+lHEcw3L5+k8POx6r74mxEYKG5kOb6Xpy2gCRW6zweT6TEhAf8vhxGgjhqrd/VO/Dirhsb+1hNpD1ue9hw==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
@@ -3722,6 +3724,18 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-country-flag": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.1.0.tgz",
|
||||
"integrity": "sha512-JWQFw1efdv9sTC+TGQvTKXQg1NKbDU2mBiAiRWcKM9F1sK+/zjhP2yGmm8YDddWyZdXVkR8Md47rPMJmo4YO5g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "19.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
|
||||
@@ -3792,6 +3806,16 @@
|
||||
"react-dom": ">=16.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-virtuoso": {
|
||||
"version": "4.13.0",
|
||||
"resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.13.0.tgz",
|
||||
"integrity": "sha512-XHv2Fglpx80yFPdjZkV9d1baACKghg/ucpDFEXwaix7z0AfVQj+mF6lM+YQR6UC/TwzXG2rJKydRMb3+7iV3PA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": ">=16 || >=17 || >= 18 || >= 19",
|
||||
"react-dom": ">=16 || >=17 || >= 18 || >=19"
|
||||
}
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.10",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
|
||||
|
||||
@@ -20,8 +20,10 @@
|
||||
"i18next-http-backend": "^3.0.2",
|
||||
"iconsax-react": "^0.0.8",
|
||||
"react": "^19.1.0",
|
||||
"react-country-flag": "^3.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-i18next": "^15.6.0",
|
||||
"react-virtuoso": "^4.13.0",
|
||||
"stylis": "^4.3.6",
|
||||
"stylis-plugin-rtl": "^2.1.1"
|
||||
},
|
||||
|
||||
@@ -9,6 +9,10 @@
|
||||
"light": "Light",
|
||||
"dark": "Dark",
|
||||
"language": "زبان/language",
|
||||
"calendar": "Calendar and date format"
|
||||
"calendar": "Calendar and date format",
|
||||
"solar": "Solar",
|
||||
"lunar": "Lunar",
|
||||
"christian": "Christian",
|
||||
"iran": "Iran"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,10 @@
|
||||
"light": "روشن",
|
||||
"dark": "تاریک",
|
||||
"language": "زبان/language",
|
||||
"calendar": "فرمت تقویم و تاریخ"
|
||||
"calendar": "فرمت تقویم و تاریخ",
|
||||
"solar": "شمسی",
|
||||
"lunar": "قمری",
|
||||
"christian": "میلادی",
|
||||
"iran": "ایران"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -45,6 +45,7 @@ export function ActiveDevices() {
|
||||
maxWidth: '834px',
|
||||
mx: 'auto',
|
||||
px: { xs: 2, sm: 3 },
|
||||
py: 4,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@@ -57,15 +58,8 @@ export function ActiveDevices() {
|
||||
>
|
||||
<Logo />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
// mt: 2,
|
||||
width: '100%',
|
||||
height: '1px',
|
||||
backgroundColor: 'divider',
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ px: 2 }}>
|
||||
<Box sx={{ width: '100%', height: '1px', backgroundColor: 'divider' }} />
|
||||
<Box sx={{ px: { xs: 2, sm: 3 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
@@ -73,10 +67,10 @@ export function ActiveDevices() {
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
gap: 2,
|
||||
maxWidth: '754px',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Box>
|
||||
<Typography variant="h6">{t('active.activeDevices')}</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t('active.activeDevicesCaption')}
|
||||
@@ -88,87 +82,111 @@ export function ActiveDevices() {
|
||||
borderColor: 'error.main',
|
||||
color: 'error.main',
|
||||
border: '1px solid',
|
||||
textTransform: 'none',
|
||||
}}
|
||||
>
|
||||
{t('active.deletDevicesButton')}
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: '32px', px: 4 }}>
|
||||
{devices.map((device) => (
|
||||
{devices.map((device) => (
|
||||
<Box
|
||||
key={device.id}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
py: 1,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ width: { xs: '100%', sm: '138px' } }}
|
||||
>
|
||||
{device.timeAndDate}
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
key={device.id}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
// gap: 1,
|
||||
py: 1,
|
||||
width: '690px',
|
||||
width: { xs: '100%', sm: '138px' },
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ width: '138px' }}>
|
||||
{device.timeAndDate}
|
||||
<DeviceMessage size={24} color="#82B1FF" />
|
||||
<Typography variant="body2" noWrap>
|
||||
{device.deviceModel}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '138px',
|
||||
height: '52px',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<DeviceMessage size={24} color="#82B1FF" />
|
||||
<Typography variant="body2" noWrap>
|
||||
{device.deviceModel}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ width: { xs: '100%', sm: '138px' } }}
|
||||
>
|
||||
{device.ip}
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body2" sx={{ width: '138px' }}>
|
||||
{device.ip}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ width: '138px', alignItems: 'center' }}>
|
||||
{device.current ? (
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{
|
||||
borderRadius: '15px',
|
||||
border: '2px solid',
|
||||
borderColor: 'success.main',
|
||||
height: '30px',
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'success.main',
|
||||
width: '75%',
|
||||
}}
|
||||
>
|
||||
{t('active.currentDevice')}
|
||||
</Button>
|
||||
) : null}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ width: '138px', alignItems: 'center' }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: { xs: '100%', sm: '138px' },
|
||||
textAlign: { xs: 'left', sm: 'center' },
|
||||
}}
|
||||
>
|
||||
{device.current && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<Logout size={18} color="#E53935" />}
|
||||
sx={{
|
||||
width: '80%',
|
||||
borderRadius: '15px',
|
||||
border: '1px solid',
|
||||
borderColor: 'error.main',
|
||||
border: '2px solid',
|
||||
borderColor: 'success.main',
|
||||
height: '30px',
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'error.main',
|
||||
color: 'success.main',
|
||||
width: '75%',
|
||||
textTransform: 'none',
|
||||
}}
|
||||
disabled={device.current}
|
||||
>
|
||||
{t('active.deleteDevice')}
|
||||
{t('active.currentDevice')}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: { xs: '100%', sm: '138px' },
|
||||
textAlign: { xs: 'left', sm: 'center' },
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={<Logout size={18} color="#E53935" />}
|
||||
disabled={device.current}
|
||||
sx={{
|
||||
color: 'error.main',
|
||||
width: '80%',
|
||||
minWidth: 0,
|
||||
borderRadius: '15px',
|
||||
borderColor: 'error.main',
|
||||
p: '4px 8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
whiteSpace: 'nowrap',
|
||||
textTransform: 'none',
|
||||
'& .MuiButton-startIcon': {
|
||||
marginRight: '4px',
|
||||
marginLeft: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{t('active.deleteDevice')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -8,7 +8,9 @@ import {
|
||||
TextField,
|
||||
DialogActions,
|
||||
IconButton,
|
||||
useMediaQuery,
|
||||
} from '@mui/material';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { CloseCircle, Refresh } from 'iconsax-react';
|
||||
@@ -18,6 +20,8 @@ import Logo from '@/components/Logo';
|
||||
import { CardContainer } from '@/components/CardContainer';
|
||||
|
||||
export function UserSecurity() {
|
||||
const theme = useTheme();
|
||||
const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const { t } = useTranslation('security');
|
||||
const [open, setOpen] = useState(false);
|
||||
const [password, setPassword] = useState('');
|
||||
@@ -63,14 +67,14 @@ export function UserSecurity() {
|
||||
}, [password, validPassword]);
|
||||
|
||||
return (
|
||||
<Box sx={{ overflowX: 'hidden' }}>
|
||||
<Box sx={{ overflowX: 'hidden', px: { xs: 2, sm: 3 }, pb: 4 }}>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: 'background.paper',
|
||||
width: '100%',
|
||||
maxWidth: '796px',
|
||||
mx: 'auto',
|
||||
px: { xs: 2, sm: 3 },
|
||||
px: { xs: 1, sm: 2 },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@@ -79,27 +83,14 @@ export function UserSecurity() {
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
py: 2,
|
||||
// width: '796px',
|
||||
}}
|
||||
>
|
||||
<Logo />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
// mt: 2,
|
||||
width: '100%',
|
||||
height: '1px',
|
||||
backgroundColor: 'divider',
|
||||
}}
|
||||
sx={{ width: '100%', height: '1px', backgroundColor: 'divider' }}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'background.paper',
|
||||
px: 2,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ px: { xs: 2, sm: 3 } }}>
|
||||
<CardContainer
|
||||
title={t('securityForm.password')}
|
||||
subtitle={t('securityForm.determinePassword')}
|
||||
@@ -111,7 +102,7 @@ export function UserSecurity() {
|
||||
mt: { xs: 2, sm: 0 },
|
||||
backgroundColor: 'primary.main',
|
||||
color: 'background.paper',
|
||||
width: '142px',
|
||||
width: { xs: '100%', sm: '142px' },
|
||||
textTransform: 'none',
|
||||
}}
|
||||
>
|
||||
@@ -119,30 +110,22 @@ export function UserSecurity() {
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Box sx={{ height: '111px' }}>
|
||||
<Box sx={{ height: 'auto', py: { xs: 3, sm: 4 } }}>
|
||||
{changePassword ? (
|
||||
<Box sx={{ flexDirection: 'column', px: 4, py: 4 }}>
|
||||
<Box sx={{ flexDirection: 'column', px: 2, py: 2 }}>
|
||||
<Typography variant="h6">رمز عبور فعال است</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
آخرین تغییر چند ثانیه پیش
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: '754px',
|
||||
mx: 'auto',
|
||||
}}
|
||||
<Typography
|
||||
variant="body1"
|
||||
color="text.secondary"
|
||||
sx={{ textAlign: 'center', py: { xs: 4, sm: '43.5px' } }}
|
||||
>
|
||||
<Typography
|
||||
variant="body1"
|
||||
color="text.secondary"
|
||||
sx={{ textAlign: 'center', py: '43.5px' }}
|
||||
>
|
||||
{t('securityForm.notDeterminedPassword')}
|
||||
</Typography>
|
||||
</Box>
|
||||
{t('securityForm.notDeterminedPassword')}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
@@ -150,21 +133,13 @@ export function UserSecurity() {
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
fullWidth
|
||||
fullScreen={fullScreen}
|
||||
maxWidth="xs"
|
||||
scroll="body"
|
||||
PaperProps={{
|
||||
sx: { mx: 1 },
|
||||
}}
|
||||
PaperProps={{ sx: { mx: 1 } }}
|
||||
>
|
||||
<DialogTitle sx={{ p: 2 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<IconButton onClick={handleClose}>
|
||||
<CloseCircle size={24} color="#82B1FF" />
|
||||
</IconButton>
|
||||
@@ -182,48 +157,18 @@ export function UserSecurity() {
|
||||
px: { xs: 2, sm: 3 },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: '364px',
|
||||
mx: 'auto',
|
||||
mt: '32px',
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
label={t('securityForm.newPassword')}
|
||||
type="password"
|
||||
fullWidth
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: 2,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<TextField
|
||||
label={t('securityForm.newPassword')}
|
||||
type="password"
|
||||
fullWidth
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
|
||||
/>
|
||||
|
||||
{password && showValidation && (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: '364px',
|
||||
mx: 'auto',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
mb: '32px',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
textAlign: 'left',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<Box sx={{ maxWidth: '364px', width: '100%' }}>
|
||||
<PasswordValidationItem
|
||||
isValid={hasNumber}
|
||||
label={t('securityForm.hasNumber')}
|
||||
@@ -244,44 +189,26 @@ export function UserSecurity() {
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: '364px',
|
||||
mx: 'auto',
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
label={t('securityForm.confirmPassword')}
|
||||
type="password"
|
||||
fullWidth
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
error={confirmPassword.length > 0 && !matchPassword}
|
||||
helperText={
|
||||
confirmPassword.length > 0 && !matchPassword
|
||||
? t('securityForm.notCompatibility')
|
||||
: ' '
|
||||
}
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: 2,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<TextField
|
||||
label={t('securityForm.confirmPassword')}
|
||||
type="password"
|
||||
fullWidth
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
error={confirmPassword.length > 0 && !matchPassword}
|
||||
helperText={
|
||||
confirmPassword.length > 0 && !matchPassword
|
||||
? t('securityForm.notCompatibility')
|
||||
: ' '
|
||||
}
|
||||
sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
|
||||
/>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions
|
||||
sx={{
|
||||
px: 3,
|
||||
pb: 2,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<DialogActions sx={{ px: 3, pb: 2, justifyContent: 'center' }}>
|
||||
<Button
|
||||
sx={{ width: '364px', height: 48 }}
|
||||
fullWidth
|
||||
sx={{ maxWidth: '364px', height: 48, textTransform: 'none' }}
|
||||
variant="contained"
|
||||
onClick={handleShowAlert}
|
||||
disabled={
|
||||
|
||||
@@ -1,62 +1,95 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
useColorScheme,
|
||||
TextField,
|
||||
Autocomplete,
|
||||
TextField,
|
||||
} from '@mui/material';
|
||||
import { CardContainer } from '@/components/CardContainer';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useState } from 'react';
|
||||
import { ThemeToggleButton } from '@/components/ThemToggle';
|
||||
import { Languages, CountryFlag } from './data/Languages';
|
||||
import Logo from '@/components/Logo';
|
||||
|
||||
export function Setting() {
|
||||
const { t } = useTranslation('setting');
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const { t, i18n } = useTranslation(['setting']);
|
||||
const { mode } = useColorScheme();
|
||||
const [selectedLang, setSelectedLang] = useState('fa');
|
||||
const selectedLanguage = Languages.find((lang) => lang.code === selectedLang);
|
||||
const calendar = ['میلادی', 'شمسی'];
|
||||
const [selectedCalendar, setSelectedCalendar] = useState('شمسی');
|
||||
|
||||
const toggleEdit = () => {
|
||||
setIsEditing((prev) => !prev);
|
||||
const [savedLanguage, setSavedLanguage] = useState<string>(
|
||||
i18n.language || 'en',
|
||||
);
|
||||
const [draftLanguage, setDraftLanguage] = useState<string>(savedLanguage);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
const languageOptions = [
|
||||
{ code: 'en', label: 'English' },
|
||||
{ code: 'fa', label: 'فارسی' },
|
||||
];
|
||||
|
||||
const handleDraftLanguageChange = (
|
||||
_: any,
|
||||
newValue: { code: string; label: string } | null,
|
||||
) => {
|
||||
if (newValue) {
|
||||
setDraftLanguage(newValue.code);
|
||||
}
|
||||
};
|
||||
|
||||
const calendarOptions = [
|
||||
t('settings.christian'),
|
||||
t('settings.solar'),
|
||||
t('settings.lunar'),
|
||||
];
|
||||
const [selectedCalendar, setSelectedCalendar] = useState<string>(
|
||||
t('settings.solar'),
|
||||
);
|
||||
|
||||
const handleCancel = () => {
|
||||
setDraftLanguage(savedLanguage);
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (draftLanguage !== savedLanguage) {
|
||||
i18n.changeLanguage(draftLanguage);
|
||||
setSavedLanguage(draftLanguage);
|
||||
}
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
const handleEditToggle = () => {
|
||||
if (isEditing) {
|
||||
handleSave();
|
||||
} else {
|
||||
setDraftLanguage(savedLanguage);
|
||||
setIsEditing(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center', // 👈 horizontal centering
|
||||
justifyContent: 'flex-start',
|
||||
minHeight: '100vh', // optional: full height of screen
|
||||
px: 2, // padding on smaller screens
|
||||
px: { xs: 2, sm: 3 },
|
||||
py: 4,
|
||||
backgroundColor: 'background.default',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ maxWidth: '754px', backgroundColor: 'background.paper' }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
py: 2,
|
||||
// width: '796px',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '754px',
|
||||
mx: 'auto',
|
||||
backgroundColor: 'background.paper',
|
||||
px: { xs: 1, sm: 2 },
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', py: 2 }}>
|
||||
<Logo />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
// mt: 2,
|
||||
width: '100%',
|
||||
height: '1px',
|
||||
backgroundColor: 'divider',
|
||||
}}
|
||||
sx={{ width: '100%', height: '1px', backgroundColor: 'divider' }}
|
||||
/>
|
||||
|
||||
<CardContainer
|
||||
title={t('settings.title')}
|
||||
subtitle={t('settings.description')}
|
||||
@@ -66,34 +99,18 @@ export function Setting() {
|
||||
{isEditing && (
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={() => setIsEditing(false)}
|
||||
onClick={handleCancel}
|
||||
size="large"
|
||||
sx={{
|
||||
color: 'primary.main',
|
||||
textTransform: 'none',
|
||||
width: { xs: '100%', sm: 'auto' },
|
||||
fontSize: { xs: '0.85rem', sm: '1rem' },
|
||||
}}
|
||||
sx={{ textTransform: 'none' }}
|
||||
>
|
||||
{t('settings.rejectButton')}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
onClick={toggleEdit}
|
||||
onClick={handleEditToggle}
|
||||
size="large"
|
||||
variant="outlined"
|
||||
sx={{
|
||||
textTransform: 'none',
|
||||
border: '1px solid',
|
||||
borderColor: 'primary.main',
|
||||
borderRadius: '4px',
|
||||
bgcolor: isEditing ? 'primary.main' : 'background.paper',
|
||||
color: isEditing ? 'primary.contrastText' : 'primary.main',
|
||||
px: { xs: 2, sm: '22px' },
|
||||
py: { xs: '6px', sm: '8px' },
|
||||
width: { xs: '100%', sm: isEditing ? '85px' : '93px' },
|
||||
fontSize: { xs: '0.9rem', sm: '1rem' },
|
||||
}}
|
||||
sx={{ textTransform: 'none' }}
|
||||
>
|
||||
{isEditing
|
||||
? t('settings.saveButton')
|
||||
@@ -102,97 +119,86 @@ export function Setting() {
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 2,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'space-between',
|
||||
bgcolor: 'background.paper',
|
||||
px: { xs: 2, sm: 3, md: 4 },
|
||||
py: 2,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: '337px' }}>
|
||||
{isEditing ? (
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
<Typography variant="body1">{t('settings.theme')}</Typography>
|
||||
<ThemeToggleButton />
|
||||
</Box>
|
||||
) : (
|
||||
<>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('settings.theme')}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
{mode === 'light'
|
||||
? t('settings.light')
|
||||
: t('settings.dark')}
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ width: '337px' }}>
|
||||
{isEditing ? (
|
||||
<Autocomplete
|
||||
options={Languages}
|
||||
getOptionLabel={(option) => option.fa}
|
||||
value={selectedLanguage || null}
|
||||
onChange={(_, newValue) => {
|
||||
if (newValue) setSelectedLang(newValue.code);
|
||||
}}
|
||||
renderOption={(props, option) => (
|
||||
<Box
|
||||
component="li"
|
||||
{...props}
|
||||
sx={{ display: 'flex', gap: 1 }}
|
||||
>
|
||||
<CountryFlag country={option.code} />
|
||||
</Box>
|
||||
)}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label={t('settings.language')} />
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Typography variant="caption">
|
||||
{t('settings.language')}
|
||||
</Typography>
|
||||
<CountryFlag country={selectedLang} />
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 2,
|
||||
mt: 2,
|
||||
width: '754px',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ flex: '1 1 337px' }}>
|
||||
{isEditing ? (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="body1">{t('settings.theme')}</Typography>
|
||||
<ThemeToggleButton />
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ px: 6 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('settings.theme')}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
{mode === 'light' ? t('settings.light') : t('settings.dark')}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: 'background.paper',
|
||||
px: { xs: 2, sm: 3, md: 4 },
|
||||
py: 2,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ flex: '1 1 337px' }}>
|
||||
{isEditing ? (
|
||||
<Autocomplete
|
||||
options={calendar}
|
||||
options={languageOptions}
|
||||
getOptionLabel={(option) => option.label}
|
||||
value={
|
||||
languageOptions.find((opt) => opt.code === draftLanguage) ||
|
||||
null
|
||||
}
|
||||
onChange={handleDraftLanguageChange}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label={t('settings.language')} />
|
||||
)}
|
||||
size="small"
|
||||
sx={{ width: 337, height: '56px' }}
|
||||
/>
|
||||
) : (
|
||||
<Box sx={{ px: 6 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('settings.language')}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
{
|
||||
languageOptions.find((opt) => opt.code === savedLanguage)
|
||||
?.label
|
||||
}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Box sx={{ width: { xs: '100%', sm: '337px' } }}>
|
||||
{isEditing ? (
|
||||
<Autocomplete
|
||||
options={calendarOptions}
|
||||
value={selectedCalendar}
|
||||
onChange={(_, newValue) => {
|
||||
if (newValue) setSelectedCalendar(newValue);
|
||||
}}
|
||||
onChange={(_, newVal) => newVal && setSelectedCalendar(newVal)}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label={t('settings.calendar')} />
|
||||
)}
|
||||
sx={{ width: '337px' }}
|
||||
size="small"
|
||||
sx={{ width: 337, height: 56 }}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Box sx={{ px: 6 }}>
|
||||
<Typography variant="caption">
|
||||
{t('settings.calendar')}
|
||||
</Typography>
|
||||
<Typography variant="body1">{selectedCalendar}</Typography>
|
||||
</>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
import { Box, Typography } from '@mui/material';
|
||||
|
||||
export const Languages = [
|
||||
{ code: 'en', en: 'English', fa: 'انگلیسی' },
|
||||
{ code: 'fa', en: 'Persian (Farsi)', fa: 'فارسی' },
|
||||
{ code: 'ar', en: 'Arabic', fa: 'عربی' },
|
||||
{ code: 'fr', en: 'French', fa: 'فرانسوی' },
|
||||
{ code: 'de', en: 'German', fa: 'آلمانی' },
|
||||
{ code: 'es', en: 'Spanish', fa: 'اسپانیایی' },
|
||||
{ code: 'it', en: 'Italian', fa: 'ایتالیایی' },
|
||||
{ code: 'ru', en: 'Russian', fa: 'روسی' },
|
||||
{ code: 'zh', en: 'Chinese', fa: 'چینی' },
|
||||
{ code: 'ja', en: 'Japanese', fa: 'ژاپنی' },
|
||||
{ code: 'ko', en: 'Korean', fa: 'کرهای' },
|
||||
{ code: 'hi', en: 'Hindi', fa: 'هندی' },
|
||||
{ code: 'tr', en: 'Turkish', fa: 'ترکی استانبولی' },
|
||||
{ code: 'pt', en: 'Portuguese', fa: 'پرتغالی' },
|
||||
{ code: 'ur', en: 'Urdu', fa: 'اردو' },
|
||||
{ code: 'nl', en: 'Dutch', fa: 'هلندی' },
|
||||
{ code: 'sv', en: 'Swedish', fa: 'سوئدی' },
|
||||
{ code: 'pl', en: 'Polish', fa: 'لهستانی' },
|
||||
{ code: 'th', en: 'Thai', fa: 'تایلندی' },
|
||||
{ code: 'id', en: 'Indonesian', fa: 'اندونزیایی' },
|
||||
];
|
||||
|
||||
export function CountryFlag({ country }: { country: string }) {
|
||||
const lang = Languages.find((lang) => lang.code === country);
|
||||
const countryCode = lang?.code || 'un';
|
||||
|
||||
const flagUrl = `https://flagcdn.com/w40/${countryCode}.png`;
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<img
|
||||
src={flagUrl}
|
||||
alt={country}
|
||||
width="24"
|
||||
height="16"
|
||||
style={{ borderRadius: '2px', border: '1px solid #ccc' }}
|
||||
/>
|
||||
<Typography variant="body2">{lang ? lang.fa : 'نامشخص'}</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user