fix: code styles

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

@@ -0,0 +1,106 @@
+import { Box, Typography, Avatar } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { CountryFlag } from '@/components/CountryFlag';
+import { DisplayField } from './DisplayField';
+import { Gender } from '@/features/profile/types';
+
+interface InfoRowData {
+  firstName: string;
+  lastName: string;
+  country: string;
+  gender: Gender | '';
+  nationalCode: string;
+}
+
+interface InfoRowDisplayProps {
+  data: InfoRowData;
+  uploadedImageUrl: string | null;
+  initials: string;
+}
+
+export function InfoRowDisplay({
+  data,
+  uploadedImageUrl,
+  initials,
+}: InfoRowDisplayProps) {
+  const { t } = useTranslation('profileSetting');
+  const displayValue = (value: string) =>
+    value?.trim() || t('settingForm.notDetermined');
+  const getGenderLabel = (gender: Gender | '') => {
+    switch (gender) {
+      case Gender.Male:
+        return t('settingForm.man');
+      case Gender.Female:
+        return t('settingForm.woman');
+      default:
+        return t('settingForm.notDetermined');
+    }
+  };
+  return (
+    <Box sx={{ mb: 2 }}>
+      <Box sx={{ width: '100%' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row' },
+            gap: 2,
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              flex: 1,
+              gap: 1,
+            }}
+          >
+            <Typography variant="caption" color="text.secondary">
+              {t('settingForm.name')} و {t('settingForm.familyName')}
+            </Typography>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+              <Avatar
+                src={uploadedImageUrl || undefined}
+                sx={{
+                  width: 32,
+                  height: 32,
+                  bgcolor: 'secondary.main',
+                  fontSize: '16px',
+                }}
+              >
+                {initials}
+              </Avatar>
+              <Typography variant="body1" color="text.primary">
+                {`${displayValue(data.firstName)} ${displayValue(data.lastName)}`}
+              </Typography>
+            </Box>
+          </Box>
+
+          <Box sx={{ flex: 1 }}>
+            <Typography variant="caption" color="text.secondary">
+              {t('settingForm.country')}
+            </Typography>
+            <CountryFlag country={data.country} />
+          </Box>
+        </Box>
+      </Box>
+
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column', sm: 'row' },
+          gap: 2,
+          mt: 2,
+        }}
+      >
+        <DisplayField
+          label={t('settingForm.gender')}
+          value={getGenderLabel(data.gender)}
+        />
+        <DisplayField
+          label={t('settingForm.nationalCode')}
+          value={displayValue(data.nationalCode)}
+        />
+      </Box>
+    </Box>
+  );
+}