chore: change the styles and add countries to the user profile

src/features/profile/components/userInformation/personalInformation/InfoRowEdit.tsx

@@ -7,7 +7,8 @@ import {
   Autocomplete,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { CountryFlag, countryCodeMap } from '@/components/CountryFlag';
+import { countries } from '@/features/profile/data/countries';
+import { CountryFlag } from '@/components/CountryFlag';
 import { Gender } from '@/features/profile/types';
 import { type InfoRowData } from '@/features/profile/types';
 
@@ -24,44 +25,50 @@ export function InfoRowEdit({
   gender,
   setGender,
 }: InfoRowEditProps) {
-  const { t } = useTranslation('profileSetting');
+  const { t } = useTranslation(['countries', 'profileSetting']);
 
-  const labels = [
-    {
-      name: 'firstName' as keyof InfoRowData,
-      label: t('settingForm.name'),
-      value: data.firstName,
-    },
-    {
-      name: 'lastName' as keyof InfoRowData,
-      label: t('settingForm.familyName'),
-      value: data.lastName,
-    },
-    {
-      name: 'nationalCode' as keyof InfoRowData,
-      label: t('settingForm.nationalCode'),
-      value: data.nationalCode,
-    },
-  ];
+  const countryOptions = countries.map((c) => ({
+    code: c.code,
+    label: t(c.label, { ns: 'countries' }),
+  }));
+
+  const currentCountry =
+    countryOptions.find((c) => c.code === data.country) || null;
 
   return (
     <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      {labels.map((field, idx) => (
+      {[
+        {
+          name: 'firstName' as keyof InfoRowData,
+          label: t('settingForm.name', { ns: 'profileSetting' }),
+          value: data.firstName,
+        },
+        {
+          name: 'lastName' as keyof InfoRowData,
+          label: t('settingForm.familyName', { ns: 'profileSetting' }),
+          value: data.lastName,
+        },
+        {
+          name: 'nationalCode' as keyof InfoRowData,
+          label: t('settingForm.nationalCode', { ns: 'profileSetting' }),
+          value: data.nationalCode,
+        },
+      ].map(({ name, label, value }) => (
         <Box
-          key={idx}
+          key={name}
           sx={{ width: { xs: '100%', sm: '48%', md: 'calc(50% - 8px)' } }}
         >
           <TextField
             fullWidth
-            name={field.name}
-            value={field.value}
+            name={name}
+            value={value}
             onChange={(e) =>
               setData((prev) => ({
                 ...prev,
-                [field.name]: e.target.value,
+                [name]: e.target.value,
               }))
             }
-            label={field.label}
+            label={label}
           />
         </Box>
       ))}
@@ -75,36 +82,50 @@ export function InfoRowEdit({
             renderValue={(selected) =>
               selected ? (
                 selected === Gender.Male ? (
-                  t('settingForm.man')
+                  t('settingForm.man', { ns: 'profileSetting' })
                 ) : (
-                  t('settingForm.woman')
+                  t('settingForm.woman', { ns: 'profileSetting' })
                 )
               ) : (
-                <span>{t('settingForm.genderPlaceholder')}</span>
+                <span>
+                  {t('settingForm.genderPlaceholder', { ns: 'profileSetting' })}
+                </span>
               )
             }
           >
-            <MenuItem value={Gender.Male}>{t('settingForm.man')}</MenuItem>
-            <MenuItem value={Gender.Female}>{t('settingForm.woman')}</MenuItem>
+            <MenuItem value={Gender.Male}>
+              {t('settingForm.man', { ns: 'profileSetting' })}
+            </MenuItem>
+            <MenuItem value={Gender.Female}>
+              {t('settingForm.woman', { ns: 'profileSetting' })}
+            </MenuItem>
           </Select>
         </FormControl>
       </Box>
 
       <Autocomplete
         sx={{ width: { xs: '100%', sm: '48%', md: 'calc(50% - 8px)' } }}
-        options={Object.keys(countryCodeMap)}
-        value={data.country}
+        options={countryOptions}
+        getOptionLabel={(option) => option.label}
+        value={currentCountry}
         onChange={(_, newValue) =>
-          setData((prev) => ({ ...prev, country: newValue || '' }))
+          setData((prev) => ({
+            ...prev,
+            country: newValue?.code || '',
+          }))
         }
         renderOption={(props, option) => (
-          <Box component="li" {...props}>
-            <CountryFlag country={option} />
+          <Box component="li" {...props} key={option.code}>
+            <CountryFlag code={option.code} />
           </Box>
         )}
         renderInput={(params) => (
-          <TextField {...params} label={t('settingForm.country')} />
+          <TextField
+            {...params}
+            label={t('settingForm.country', { ns: 'profileSetting' })}
+          />
         )}
+        clearOnEscape
       />
     </Box>
   );