fix/ styles and seperate the main file to different components

src/features/authentication/components/PersonalInfoFields.tsx

@@ -0,0 +1,71 @@
+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>
+  );
+}