feat: add sidebar and change the style of that

2025-08-03 12:13:53 +03:30
parent ed347d8b61
commit bf87dd8123
22 changed files with 2430 additions and 788 deletions
--- a/src/features/profile/components/userInformation/PersonalInformation.tsx
+++ b/src/features/profile/components/userInformation/PersonalInformation.tsx
@@ -0,0 +1,143 @@
+import { useState } from 'react';
+import { Box, Button } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { CardContainer } from '@/components/CardContainer';
+import { ProfileImage } from './personlInformation/ProfileImage';
+import { InfoRowDisplay } from './personlInformation/InfoRowDisplay';
+import { InfoRowEdit } from './personlInformation/InfoRowEdit';
+import Logo from '@/components/Logo';
+
+export function PersonalInformation() {
+  const { t } = useTranslation('profileSetting');
+  const [isEditing, setIsEditing] = useState(false);
+  const [gender, setGender] = useState('');
+  const [uploadedImageUrl, setUploadedImageUrl] = useState<string | null>(null);
+
+  const initialData = {
+    firstName: 'محمد حسین',
+    lastName: 'برزه‌گر',
+    country: 'قطر',
+    gender: 'مرد',
+    nationalCode: '',
+  };
+  const [data, setData] = useState(initialData);
+
+  const initials = `${data.firstName?.trim()[0] || ''}‌${data.lastName?.trim()[0] || ''}`;
+
+  const toggleEdit = () => {
+    setIsEditing((prev) => !prev);
+    if (isEditing) {
+      setData((prev) => ({
+        ...prev,
+        gender: gender === 'male' ? 'مرد' : gender === 'female' ? 'زن' : '',
+      }));
+    } else {
+      setGender(
+        data.gender === 'مرد' ? 'male' : data.gender === 'زن' ? 'female' : '',
+      );
+    }
+  };
+
+  return (
+    <Box sx={{ backgroundColor: 'background.paper' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          py: 2,
+          height: 84,
+        }}
+      >
+        <Logo />
+      </Box>
+      <Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
+      <CardContainer
+        title={t('settingForm.titlePersonalInfo')}
+        subtitle={t('settingForm.descriptionPersonalInfo')}
+        highlighted={isEditing}
+        action={
+          <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+            {isEditing && (
+              <Button
+                variant="text"
+                onClick={() => setIsEditing(false)}
+                size="large"
+                sx={{
+                  color: 'primary.main',
+                  textTransform: 'none',
+                  width: { xs: '100%', sm: 'auto' },
+                  fontSize: { xs: '0.85rem', sm: '1rem' },
+                }}
+              >
+                {t('settingForm.rejectButton')}
+              </Button>
+            )}
+            <Button
+              onClick={toggleEdit}
+              size="large"
+              variant="outlined"
+              sx={{
+                textTransform: 'none',
+                border: '1px solid',
+                borderColor: 'primary.main',
+                borderRadius: '4px',
+                bgcolor: isEditing ? 'primary.main' : 'background.paper',
+                color: isEditing ? 'primary.contrastText' : 'primary.main',
+                px: { xs: 2, sm: '22px' },
+                py: { xs: '6px', sm: '8px' },
+                width: { xs: '100%', sm: isEditing ? '85px' : '93px' },
+                fontSize: { xs: '0.9rem', sm: '1rem' },
+              }}
+            >
+              {isEditing
+                ? t('settingForm.saveButton')
+                : t('settingForm.editButton')}
+            </Button>
+          </Box>
+        }
+      >
+        <Box
+          sx={{
+            px: { xs: 2, sm: 3, md: 4 },
+            py: 2,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            bgcolor: 'background.paper',
+          }}
+        >
+          {isEditing && (
+            <ProfileImage
+              initials={initials}
+              uploadedImageUrl={uploadedImageUrl}
+              onImageChange={(e) => {
+                const file = e.target.files?.[0];
+                if (file) {
+                  const reader = new FileReader();
+                  reader.onload = () =>
+                    setUploadedImageUrl(reader.result as string);
+                  reader.readAsDataURL(file);
+                }
+              }}
+            />
+          )}
+
+          {isEditing ? (
+            <InfoRowEdit
+              data={data}
+              setData={setData}
+              gender={gender}
+              setGender={setGender}
+            />
+          ) : (
+            <InfoRowDisplay
+              data={data}
+              uploadedImageUrl={uploadedImageUrl}
+              initials={initials}
+            />
+          )}
+        </Box>
+      </CardContainer>
+    </Box>
+  );
+}