fix: translation and styles

src/features/profile/components/PersonalInformation.tsx

@@ -10,21 +10,27 @@ import {
 } from '@mui/material';
 import { useState, type ChangeEvent } from 'react';
 import { CardContainer } from '@/components/CardContainer';
+import { CountryFlag } from '@/components/CountryFlag';
+import { useTranslation } from 'react-i18next';
+import { Profile } from 'iconsax-react';
 
 export function PersonalInformation() {
+  const { t } = useTranslation('profileSetting');
   const [isEditing, setIsEditing] = useState(false);
   const [gender, setGender] = useState('');
-  const [data, setData] = useState({
+  const initialData = {
     firstName: 'محمد حسین',
     lastName: 'برزه‌گر',
+    country: 'قطر',
     gender: 'مرد',
     nationalCode: '',
-  });
-
+  };
+  const [data, setData] = useState(initialData);
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
     setData((prev) => ({
       ...prev,
-      [e.target.name]: e.target.value,
+      [name]: value,
     }));
   };
 
@@ -62,8 +68,8 @@ export function PersonalInformation() {
       }}
     >
       <CardContainer
-        title="اطلاعات شخصی من"
-        subtitle="این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی می‌ماند"
+        title={t('settingForm.titlePersonalInfo')}
+        subtitle={t('settingForm.descriptionPersonalInfo')}
         highlighted={isEditing}
         action={
           <Box sx={{ display: 'flex', gap: 1 }}>
@@ -77,7 +83,7 @@ export function PersonalInformation() {
                   width: '43px',
                 }}
               >
-                لغو
+                {t('settingForm.rejectButton')}
               </Button>
             )}
             <Button
@@ -91,11 +97,12 @@ export function PersonalInformation() {
                 color: isEditing ? 'white' : '#2979FF',
                 px: '22px',
                 py: '8px',
-                // minWidth: '93px',
                 width: isEditing ? '85px' : '93px',
               }}
             >
-              {isEditing ? 'ذخیره' : 'ویرایش'}
+              {isEditing
+                ? t('settingForm.saveButton')
+                : t('settingForm.editButton')}
             </Button>
           </Box>
         }
@@ -115,24 +122,30 @@ export function PersonalInformation() {
                 name="firstName"
                 value={data.firstName}
                 onChange={handleChange}
-                label="نام"
+                label={t('settingForm.name')}
               />
             ) : (
               <Box
                 sx={{
-                  height: '48px',
+                  height: 'auto',
                   display: 'flex',
                   flexDirection: 'column',
                   justifyContent: 'center',
+                  alignItems: 'flex-start',
+                  gap: 0.5,
                   px: 4,
                 }}
               >
                 <Typography variant="caption" color="text.secondary">
-                  نام
-                </Typography>
-                <Typography variant="body1" color="text.primary">
-                  {displayValue(data.firstName)}
+                  {`${t('settingForm.name')} و ${t('settingForm.familyName')}`}
                 </Typography>
+
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  <Profile size="20" color="gray" />
+                  <Typography variant="body1" color="text.primary">
+                    {displayValue(data.firstName + ' ' + data.lastName)}
+                  </Typography>
+                </Box>
               </Box>
             )}
           </Box>
@@ -144,7 +157,7 @@ export function PersonalInformation() {
                 name="lastName"
                 value={data.lastName}
                 onChange={handleChange}
-                label="نام خانوادگی"
+                label={t('settingForm.familyName')}
               />
             ) : (
               <Box
@@ -156,11 +169,9 @@ export function PersonalInformation() {
                 }}
               >
                 <Typography variant="caption" color="text.secondary">
-                  نام خانوادگی
-                </Typography>
-                <Typography variant="body1" color="text.primary">
-                  {displayValue(data.lastName)}
+                  {t('settingForm.country')}
                 </Typography>
+                <CountryFlag country={data.country} />
               </Box>
             )}
           </Box>
@@ -172,9 +183,21 @@ export function PersonalInformation() {
                   value={gender}
                   onChange={handleChangeGender}
                   displayEmpty
+                  renderValue={(selected) => {
+                    if (!selected) {
+                      return (
+                        <span style={{ color: '#aaa' }}>
+                          {t('settingForm.genderPlaceholder')}
+                        </span>
+                      );
+                    }
+                    return selected === 'male'
+                      ? t('settingForm.man')
+                      : t('settingForm.woman');
+                  }}
                 >
-                  <MenuItem value="female">زن</MenuItem>
-                  <MenuItem value="male">مرد</MenuItem>
+                  <MenuItem value="male">{t('settingForm.man')}</MenuItem>
+                  <MenuItem value="female">{t('settingForm.woman')}</MenuItem>
                 </Select>
               </FormControl>
             ) : (
@@ -188,7 +211,7 @@ export function PersonalInformation() {
                 }}
               >
                 <Typography variant="caption" color="text.secondary">
-                  جنسیت
+                  {t('settingForm.gender')}
                 </Typography>
                 <Typography variant="body1" color="text.primary">
                   {displayValue(data.gender)}
@@ -204,7 +227,7 @@ export function PersonalInformation() {
                 name="nationalCode"
                 value={data.nationalCode}
                 onChange={handleChange}
-                label="کد ملی"
+                label={t('settingForm.nationalCode')}
               />
             ) : (
               <Box
@@ -216,7 +239,7 @@ export function PersonalInformation() {
                 }}
               >
                 <Typography variant="caption" color="text.secondary">
-                  کد ملی
+                  {t('settingForm.nationalCode')}{' '}
                 </Typography>
                 <Typography variant="body1" color="text.primary">
                   {displayValue(data.nationalCode)}