72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import {
|
|
TextField,
|
|
FormControl,
|
|
InputLabel,
|
|
MenuItem,
|
|
Select,
|
|
Box,
|
|
type SelectChangeEvent,
|
|
} from '@mui/material';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface PersonalInfoFieldsProps {
|
|
sex: string;
|
|
setSex: (sex: string) => void;
|
|
}
|
|
|
|
export function PersonalInfoFields({ sex, setSex }: PersonalInfoFieldsProps) {
|
|
const { t } = useTranslation('completionForm');
|
|
|
|
const handleChange = (e: SelectChangeEvent) => {
|
|
setSex(e.target.value);
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, px: 6 }}>
|
|
<Box sx={{ display: 'flex', gap: 2 }}>
|
|
<TextField
|
|
label={t('completion.name')}
|
|
placeholder={t('completion.name')}
|
|
variant="outlined"
|
|
sx={{
|
|
width: '309px',
|
|
}}
|
|
/>
|
|
<TextField
|
|
label={t('completion.familyName')}
|
|
placeholder={t('completion.familyName')}
|
|
variant="outlined"
|
|
sx={{
|
|
width: '309px',
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
<Box sx={{ display: 'flex', gap: 2 }}>
|
|
<FormControl sx={{ width: '309px' }}>
|
|
<InputLabel id="sex-label">{t('completion.gender')}</InputLabel>
|
|
<Select
|
|
labelId="sex-label"
|
|
id="sex"
|
|
value={sex}
|
|
label={t('completion.gender')}
|
|
onChange={handleChange}
|
|
>
|
|
<MenuItem value="female">{t('completion.man')}</MenuItem>
|
|
<MenuItem value="male">{t('completion.woman')}</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
|
|
<TextField
|
|
label={t('completion.optionalNationalCode')}
|
|
placeholder={t('completion.optionalNationalCode')}
|
|
variant="outlined"
|
|
sx={{
|
|
width: '309px',
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|