119 lines
3.1 KiB
TypeScript
119 lines
3.1 KiB
TypeScript
import { Box, Typography, Avatar } from '@mui/material';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { DisplayField } from './DisplayField';
|
|
import { CountryFlag } from '@/components/CountryFlag';
|
|
import { Gender } from '@/features/profile/types';
|
|
|
|
interface InfoRowData {
|
|
firstName: string;
|
|
lastName: string;
|
|
country: string;
|
|
gender: Gender | '';
|
|
nationalCode: string;
|
|
}
|
|
|
|
interface InfoRowDisplayProps {
|
|
data: InfoRowData;
|
|
uploadedImageUrl: string | null;
|
|
initials: string;
|
|
}
|
|
|
|
export function InfoRowDisplay({
|
|
data,
|
|
uploadedImageUrl,
|
|
initials,
|
|
}: InfoRowDisplayProps) {
|
|
const { t } = useTranslation('setting');
|
|
const displayValue = (value: string) =>
|
|
value?.trim() || t('settingForm.notDetermined');
|
|
|
|
const getGenderLabel = (gender: Gender | '') => {
|
|
switch (gender) {
|
|
case Gender.Male:
|
|
return t('settingForm.man');
|
|
case Gender.Female:
|
|
return t('settingForm.woman');
|
|
default:
|
|
return t('settingForm.notDetermined');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ mb: 2 }}>
|
|
<Box sx={{ width: '100%' }}>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: { xs: 'column', sm: 'row' },
|
|
gap: 2,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flex: 1,
|
|
gap: 1,
|
|
}}
|
|
>
|
|
<Typography variant="caption" color="text.secondary">
|
|
{t('settingForm.name')} و {t('settingForm.familyName')}
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
|
<Avatar
|
|
src={uploadedImageUrl || undefined}
|
|
sx={{
|
|
width: 32,
|
|
height: 32,
|
|
bgcolor: 'secondary.main',
|
|
fontSize: '16px',
|
|
}}
|
|
>
|
|
{initials}
|
|
</Avatar>
|
|
<Typography variant="body1" color="text.primary">
|
|
{`${displayValue(data.firstName)} ${displayValue(
|
|
data.lastName,
|
|
)}`}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box sx={{ flex: 1 }}>
|
|
<Typography variant="caption" color="text.secondary">
|
|
{t('settingForm.country')}
|
|
</Typography>
|
|
<Box sx={{ mt: 0.5 }}>
|
|
{data.country ? (
|
|
<CountryFlag code={data.country} />
|
|
) : (
|
|
<Typography variant="body1" color="text.primary">
|
|
{t('settingForm.notDetermined')}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: { xs: 'column', sm: 'row' },
|
|
gap: 2,
|
|
mt: 2,
|
|
}}
|
|
>
|
|
<DisplayField
|
|
label={t('settingForm.gender')}
|
|
value={getGenderLabel(data.gender)}
|
|
/>
|
|
<DisplayField
|
|
label={t('settingForm.nationalCode')}
|
|
value={displayValue(data.nationalCode)}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|