feat: add setting and Active devices
This commit is contained in:
202
src/features/profile/components/setting/Setting.tsx
Normal file
202
src/features/profile/components/setting/Setting.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
useColorScheme,
|
||||
TextField,
|
||||
Autocomplete,
|
||||
} 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 { 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);
|
||||
};
|
||||
|
||||
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
|
||||
}}
|
||||
>
|
||||
<Box sx={{ maxWidth: '754px', backgroundColor: 'background.paper' }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
py: 2,
|
||||
// width: '796px',
|
||||
}}
|
||||
>
|
||||
<Logo />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
// mt: 2,
|
||||
width: '100%',
|
||||
height: '1px',
|
||||
backgroundColor: 'divider',
|
||||
}}
|
||||
/>
|
||||
<CardContainer
|
||||
title={t('settings.title')}
|
||||
subtitle={t('settings.description')}
|
||||
highlighted={isEditing}
|
||||
action={
|
||||
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
|
||||
{isEditing && (
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={() => setIsEditing(false)}
|
||||
size="large"
|
||||
sx={{
|
||||
color: 'primary.main',
|
||||
textTransform: 'none',
|
||||
width: { xs: '100%', sm: 'auto' },
|
||||
fontSize: { xs: '0.85rem', sm: '1rem' },
|
||||
}}
|
||||
>
|
||||
{t('settings.rejectButton')}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
onClick={toggleEdit}
|
||||
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' },
|
||||
}}
|
||||
>
|
||||
{isEditing
|
||||
? t('settings.saveButton')
|
||||
: t('settings.editButton')}
|
||||
</Button>
|
||||
</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>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: 'background.paper',
|
||||
px: { xs: 2, sm: 3, md: 4 },
|
||||
py: 2,
|
||||
}}
|
||||
>
|
||||
{isEditing ? (
|
||||
<Autocomplete
|
||||
options={calendar}
|
||||
value={selectedCalendar}
|
||||
onChange={(_, newValue) => {
|
||||
if (newValue) setSelectedCalendar(newValue);
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label={t('settings.calendar')} />
|
||||
)}
|
||||
sx={{ width: '337px' }}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Typography variant="caption">
|
||||
{t('settings.calendar')}
|
||||
</Typography>
|
||||
<Typography variant="body1">{selectedCalendar}</Typography>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user