fix: code styles

2025-08-10 16:21:25 -07:00
parent 57959f39ce
commit 8e6c09225d
28 changed files with 613 additions and 568 deletions
--- a/src/features/profile/components/userInformation/personalInformation/InfoRowEdit.tsx
+++ b/src/features/profile/components/userInformation/personalInformation/InfoRowEdit.tsx
@@ -0,0 +1,111 @@
+import {
+  Box,
+  TextField,
+  FormControl,
+  MenuItem,
+  Select,
+  Autocomplete,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { CountryFlag, countryCodeMap } from '@/components/CountryFlag';
+import { Gender } from '@/features/profile/types';
+import { type InfoRowData } from '@/features/profile/types';
+
+interface InfoRowEditProps {
+  data: InfoRowData;
+  setData: React.Dispatch<React.SetStateAction<InfoRowData>>;
+  gender: Gender;
+  setGender: React.Dispatch<React.SetStateAction<Gender>>;
+}
+
+export function InfoRowEdit({
+  data,
+  setData,
+  gender,
+  setGender,
+}: InfoRowEditProps) {
+  const { t } = useTranslation('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,
+    },
+  ];
+
+  return (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      {labels.map((field, idx) => (
+        <Box
+          key={idx}
+          sx={{ width: { xs: '100%', sm: '48%', md: 'calc(50% - 8px)' } }}
+        >
+          <TextField
+            fullWidth
+            name={field.name}
+            value={field.value}
+            onChange={(e) =>
+              setData((prev) => ({
+                ...prev,
+                [field.name]: e.target.value,
+              }))
+            }
+            label={field.label}
+          />
+        </Box>
+      ))}
+
+      <Box sx={{ width: { xs: '100%', sm: '48%', md: 'calc(50% - 8px)' } }}>
+        <FormControl fullWidth>
+          <Select
+            value={gender}
+            onChange={(e) => setGender(e.target.value as Gender)}
+            displayEmpty
+            renderValue={(selected) =>
+              selected ? (
+                selected === Gender.Male ? (
+                  t('settingForm.man')
+                ) : (
+                  t('settingForm.woman')
+                )
+              ) : (
+                <span>{t('settingForm.genderPlaceholder')}</span>
+              )
+            }
+          >
+            <MenuItem value={Gender.Male}>{t('settingForm.man')}</MenuItem>
+            <MenuItem value={Gender.Female}>{t('settingForm.woman')}</MenuItem>
+          </Select>
+        </FormControl>
+      </Box>
+
+      <Autocomplete
+        sx={{ width: { xs: '100%', sm: '48%', md: 'calc(50% - 8px)' } }}
+        options={Object.keys(countryCodeMap)}
+        value={data.country}
+        onChange={(_, newValue) =>
+          setData((prev) => ({ ...prev, country: newValue || '' }))
+        }
+        renderOption={(props, option) => (
+          <Box component="li" {...props}>
+            <CountryFlag country={option} />
+          </Box>
+        )}
+        renderInput={(params) => (
+          <TextField {...params} label={t('settingForm.country')} />
+        )}
+      />
+    </Box>
+  );
+}