chore: optimization of code

src/features/profile/components/userInformation/PersonalInformation.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Box, Button } from '@mui/material';
+import { Box, Button, useTheme, useMediaQuery } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CardContainer } from '@/components/CardContainer';
 import { ProfileImage } from './personlInformation/ProfileImage';
@@ -13,6 +13,8 @@ export function PersonalInformation() {
   const [isEditing, setIsEditing] = useState(false);
   const [gender, setGender] = useState('');
   const [uploadedImageUrl, setUploadedImageUrl] = useState<string | null>(null);
+  const theme = useTheme();
+  const isMdUp = useMediaQuery(theme.breakpoints.up('lg'));
 
   const initialData = {
     firstName: 'محمد حسین',
@@ -30,28 +32,43 @@ export function PersonalInformation() {
     if (isEditing) {
       setData((prev) => ({
         ...prev,
-        gender: gender === 'male' ? 'مرد' : gender === 'female' ? 'زن' : '',
+        gender:
+          gender === 'male'
+            ? t('settingForm.man')
+            : gender === 'female'
+              ? t('settingForm.woman')
+              : '',
       }));
     } else {
       setGender(
-        data.gender === 'مرد' ? 'male' : data.gender === 'زن' ? 'female' : '',
+        data.gender === t('settingForm.man')
+          ? 'male'
+          : data.gender === t('settingForm.woman')
+            ? 'female'
+            : '',
       );
     }
   };
 
   return (
     <PageWrapper>
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          py: 2,
-          height: 84,
-        }}
-      >
-        <Logo />
-      </Box>
-      <Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
+      {isMdUp && (
+        <>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              py: 2,
+              height: 84,
+            }}
+          >
+            <Logo />
+          </Box>
+          <Box
+            sx={{ width: '100%', height: 1, bgcolor: 'background.default' }}
+          />
+        </>
+      )}
       <CardContainer
         title={t('settingForm.titlePersonalInfo')}
         subtitle={t('settingForm.descriptionPersonalInfo')}