|
|
|
|
@@ -12,15 +12,129 @@ import { useTranslation } from 'react-i18next';
|
|
|
|
|
interface PersonalInfoFieldsProps {
|
|
|
|
|
sex: string;
|
|
|
|
|
setSex: (sex: string) => void;
|
|
|
|
|
country: string;
|
|
|
|
|
setCountry: (country: string) => void;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function PersonalInfoFields({ sex, setSex }: PersonalInfoFieldsProps) {
|
|
|
|
|
export function PersonalInfoFields({
|
|
|
|
|
sex,
|
|
|
|
|
setSex,
|
|
|
|
|
country,
|
|
|
|
|
setCountry,
|
|
|
|
|
}: PersonalInfoFieldsProps) {
|
|
|
|
|
const { t } = useTranslation('completionForm');
|
|
|
|
|
const countries = [
|
|
|
|
|
{ name: 'Afghanistan', fa: 'افغانستان', flag: 'af' },
|
|
|
|
|
{ name: 'Albania', fa: 'آلبانی', flag: 'al' },
|
|
|
|
|
{ name: 'Algeria', fa: 'الجزایر', flag: 'dz' },
|
|
|
|
|
{ name: 'Andorra', fa: 'آندورا', flag: 'ad' },
|
|
|
|
|
{ name: 'Angola', fa: 'آنگولا', flag: 'ao' },
|
|
|
|
|
{ name: 'Argentina', fa: 'آرژانتین', flag: 'ar' },
|
|
|
|
|
{ name: 'Armenia', fa: 'ارمنستان', flag: 'am' },
|
|
|
|
|
{ name: 'Australia', fa: 'استرالیا', flag: 'au' },
|
|
|
|
|
{ name: 'Austria', fa: 'اتریش', flag: 'at' },
|
|
|
|
|
{ name: 'Azerbaijan', fa: 'آذربایجان', flag: 'az' },
|
|
|
|
|
{ name: 'Bahamas', fa: 'باهاما', flag: 'bs' },
|
|
|
|
|
{ name: 'Bahrain', fa: 'بحرین', flag: 'bh' },
|
|
|
|
|
{ name: 'Bangladesh', fa: 'بنگلادش', flag: 'bd' },
|
|
|
|
|
{ name: 'Barbados', fa: 'باربادوس', flag: 'bb' },
|
|
|
|
|
{ name: 'Belarus', fa: 'بلاروس', flag: 'by' },
|
|
|
|
|
{ name: 'Belgium', fa: 'بلژیک', flag: 'be' },
|
|
|
|
|
{ name: 'Belize', fa: 'بلیز', flag: 'bz' },
|
|
|
|
|
{ name: 'Benin', fa: 'بنین', flag: 'bj' },
|
|
|
|
|
{ name: 'Bhutan', fa: 'بوتان', flag: 'bt' },
|
|
|
|
|
{ name: 'Bolivia', fa: 'بولیوی', flag: 'bo' },
|
|
|
|
|
{ name: 'Bosnia and Herzegovina', fa: 'بوسنی و هرزگوین', flag: 'ba' },
|
|
|
|
|
{ name: 'Botswana', fa: 'بوتسوانا', flag: 'bw' },
|
|
|
|
|
{ name: 'Brazil', fa: 'برزیل', flag: 'br' },
|
|
|
|
|
{ name: 'Brunei', fa: 'برونئی', flag: 'bn' },
|
|
|
|
|
{ name: 'Bulgaria', fa: 'بلغارستان', flag: 'bg' },
|
|
|
|
|
{ name: 'Burkina Faso', fa: 'بورکینافاسو', flag: 'bf' },
|
|
|
|
|
{ name: 'Burundi', fa: 'بوروندی', flag: 'bi' },
|
|
|
|
|
{ name: 'Cambodia', fa: 'کامبوج', flag: 'kh' },
|
|
|
|
|
{ name: 'Cameroon', fa: 'کامرون', flag: 'cm' },
|
|
|
|
|
{ name: 'Canada', fa: 'کانادا', flag: 'ca' },
|
|
|
|
|
{ name: 'Cape Verde', fa: 'کیپ ورد', flag: '🇨🇻' },
|
|
|
|
|
{
|
|
|
|
|
name: 'Central African Republic',
|
|
|
|
|
fa: 'جمهوری آفریقای مرکزی',
|
|
|
|
|
flag: 'cf',
|
|
|
|
|
},
|
|
|
|
|
{ name: 'Chad', fa: 'چاد', flag: 'td' },
|
|
|
|
|
{ name: 'Chile', fa: 'شیلی', flag: 'cl' },
|
|
|
|
|
{ name: 'China', fa: 'چین', flag: 'cn' },
|
|
|
|
|
{ name: 'Colombia', fa: 'کلمبیا', flag: 'co' },
|
|
|
|
|
{ name: 'Comoros', fa: 'کومور', flag: 'km' },
|
|
|
|
|
{ name: 'Congo (Brazzaville)', fa: 'کنگو (برازاویل)', flag: 'cg' },
|
|
|
|
|
{ name: 'Congo (Kinshasa)', fa: 'کنگو (کینشاسا)', flag: 'cd' },
|
|
|
|
|
{ name: 'Costa Rica', fa: 'کاستاریکا', flag: 'cr' },
|
|
|
|
|
{ name: 'Croatia', fa: 'کرواسی', flag: 'hr' },
|
|
|
|
|
{ name: 'Cuba', fa: 'کوبا', flag: 'cu' },
|
|
|
|
|
{ name: 'Cyprus', fa: 'قبرس', flag: 'cy' },
|
|
|
|
|
{ name: 'Czech Republic', fa: 'جمهوری چک', flag: 'cz' },
|
|
|
|
|
{ name: 'Denmark', fa: 'دانمارک', flag: 'dk' },
|
|
|
|
|
{ name: 'Djibouti', fa: 'جیبوتی', flag: 'dj' },
|
|
|
|
|
{ name: 'Dominica', fa: 'دومینیکا', flag: 'dm' },
|
|
|
|
|
{ name: 'Dominican Republic', fa: 'جمهوری دومینیکن', flag: 'do' },
|
|
|
|
|
{ name: 'Ecuador', fa: 'اکوادور', flag: 'ec' },
|
|
|
|
|
{ name: 'Egypt', fa: 'مصر', flag: 'eg' },
|
|
|
|
|
{ name: 'El Salvador', fa: 'السالوادور', flag: 'sv' },
|
|
|
|
|
{ name: 'Equatorial Guinea', fa: 'گینه استوایی', flag: 'gq' },
|
|
|
|
|
{ name: 'Eritrea', fa: 'اریتره', flag: 'er' },
|
|
|
|
|
{ name: 'Estonia', fa: 'استونی', flag: 'ee' },
|
|
|
|
|
{ name: 'Eswatini', fa: 'اسواتینی', flag: 'az' },
|
|
|
|
|
{ name: 'Ethiopia', fa: 'اتیوپی', flag: 'et' },
|
|
|
|
|
{ name: 'Fiji', fa: 'فیجی', flag: 'fj' },
|
|
|
|
|
{ name: 'Finland', fa: 'فنلاند', flag: 'fi' },
|
|
|
|
|
{ name: 'France', fa: 'فرانسه', flag: 'fr' },
|
|
|
|
|
{ name: 'Gabon', fa: 'گابون', flag: 'ga' },
|
|
|
|
|
{ name: 'Gambia', fa: 'گامبیا', flag: 'gm' },
|
|
|
|
|
{ name: 'Georgia', fa: 'گرجستان', flag: 'ge' },
|
|
|
|
|
{ name: 'Germany', fa: 'آلمان', flag: 'de' },
|
|
|
|
|
{ name: 'Ghana', fa: 'غنا', flag: 'gh' },
|
|
|
|
|
{ name: 'Greece', fa: 'یونان', flag: 'gr' },
|
|
|
|
|
{ name: 'Guatemala', fa: 'گواتمالا', flag: 'gt' },
|
|
|
|
|
{ name: 'India', fa: 'هند', flag: 'in' },
|
|
|
|
|
{ name: 'Indonesia', fa: 'اندونزی', flag: 'id' },
|
|
|
|
|
{ name: 'Iran', fa: 'ایران', flag: 'ir' },
|
|
|
|
|
{ name: 'Iraq', fa: 'عراق', flag: 'iq' },
|
|
|
|
|
{ name: 'Ireland', fa: 'ایرلند', flag: 'ie' },
|
|
|
|
|
{ name: 'Israel', fa: 'اسرائیل', flag: 'il' },
|
|
|
|
|
{ name: 'Italy', fa: 'ایتالیا', flag: 'it' },
|
|
|
|
|
{ name: 'Japan', fa: 'ژاپن', flag: 'jp' },
|
|
|
|
|
{ name: 'Jordan', fa: 'اردن', flag: 'jo' },
|
|
|
|
|
{ name: 'Kazakhstan', fa: 'قزاقستان', flag: 'kz' },
|
|
|
|
|
{ name: 'Kuwait', fa: 'کویت', flag: 'kw' },
|
|
|
|
|
{ name: 'Lebanon', fa: 'لبنان', flag: 'lb' },
|
|
|
|
|
{ name: 'Malaysia', fa: 'مالزی', flag: 'my' },
|
|
|
|
|
{ name: 'Netherlands', fa: 'هلند', flag: 'nl' },
|
|
|
|
|
{ name: 'Norway', fa: 'نروژ', flag: 'no' },
|
|
|
|
|
{ name: 'Oman', fa: 'عمان', flag: 'om' },
|
|
|
|
|
{ name: 'Pakistan', fa: 'پاکستان', flag: 'pk' },
|
|
|
|
|
{ name: 'Palestine', fa: 'فلسطین', flag: 'ps' },
|
|
|
|
|
{ name: 'Qatar', fa: 'قطر', flag: 'qa' },
|
|
|
|
|
{ name: 'Russia', fa: 'روسیه', flag: 'ru' },
|
|
|
|
|
{ name: 'Saudi Arabia', fa: 'عربستان سعودی', flag: 'sa' },
|
|
|
|
|
{ name: 'Spain', fa: 'اسپانیا', flag: 'es' },
|
|
|
|
|
{ name: 'Sweden', fa: 'سوئد', flag: 'se' },
|
|
|
|
|
{ name: 'Switzerland', fa: 'سوئیس', flag: 'ch' },
|
|
|
|
|
{ name: 'Syria', fa: 'سوریه', flag: 'sy' },
|
|
|
|
|
{ name: 'Turkey', fa: 'ترکیه', flag: 'tr' },
|
|
|
|
|
{ name: 'Ukraine', fa: 'اوکراین', flag: 'ua' },
|
|
|
|
|
{ name: 'United Arab Emirates', fa: 'امارات متحده عربی', flag: 'ae' },
|
|
|
|
|
{ name: 'United Kingdom', fa: 'بریتانیا', flag: 'gb' },
|
|
|
|
|
{ name: 'United States', fa: 'ایالات متحده آمریکا', flag: 'us' },
|
|
|
|
|
{ name: 'Yemen', fa: 'یمن', flag: 'ye' },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const handleChange = (e: SelectChangeEvent) => {
|
|
|
|
|
setSex(e.target.value);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleChangeCountry = (e: SelectChangeEvent) => {
|
|
|
|
|
setCountry(e.target.value);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, px: 6 }}>
|
|
|
|
|
<Box sx={{ display: 'flex', gap: 2 }}>
|
|
|
|
|
@@ -64,6 +178,42 @@ export function PersonalInfoFields({ sex, setSex }: PersonalInfoFieldsProps) {
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</Box>
|
|
|
|
|
<Box sx={{ display: 'flex', gap: 2 }}>
|
|
|
|
|
<FormControl sx={{ width: '309px' }}>
|
|
|
|
|
<InputLabel>{t('completion.country')}</InputLabel>
|
|
|
|
|
<Select
|
|
|
|
|
value={country}
|
|
|
|
|
label={t('completion.country')}
|
|
|
|
|
onChange={handleChangeCountry}
|
|
|
|
|
>
|
|
|
|
|
{countries.map((c) => (
|
|
|
|
|
<MenuItem key={c.name} value={c.name}>
|
|
|
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
|
|
|
<span>
|
|
|
|
|
<img
|
|
|
|
|
src={`https://flagcdn.com/w40/${c.flag}.png`}
|
|
|
|
|
alt={c.name}
|
|
|
|
|
width="24"
|
|
|
|
|
height="16"
|
|
|
|
|
style={{ borderRadius: '2px', border: '1px solid #ccc' }}
|
|
|
|
|
/>
|
|
|
|
|
</span>
|
|
|
|
|
<span>{c.fa}</span>
|
|
|
|
|
</Box>
|
|
|
|
|
</MenuItem>
|
|
|
|
|
))}
|
|
|
|
|
</Select>
|
|
|
|
|
</FormControl>
|
|
|
|
|
|
|
|
|
|
<TextField
|
|
|
|
|
label={t('completion.dateOfBirth')}
|
|
|
|
|
placeholder={t('completion.dateOfBirth')}
|
|
|
|
|
variant="outlined"
|
|
|
|
|
sx={{
|
|
|
|
|
width: '309px',
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</Box>
|
|
|
|
|
</Box>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
Koosha Lahouti