fix: issue in user profile

src/features/profile/components/SocialMedia.tsx

@@ -0,0 +1,210 @@
+import { Google, Apple, Sms, Trash, CloseSquare } from 'iconsax-react';
+import {
+  Box,
+  Button,
+  Typography,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  IconButton,
+  TextField,
+} from '@mui/material';
+import { useState } from 'react';
+
+export function SocialMedia() {
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const emailList = [
+    { email: 'emailtemp@email.com', provider: 'email' },
+    { email: 'emailtemp@gmail.com', provider: 'google' },
+  ];
+
+  return (
+    <div
+      style={{
+        backgroundColor: '#F5F5F5',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Box
+        sx={{
+          width: '600px',
+          backgroundColor: 'white',
+          boxShadow: 2,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            backgroundColor: '#F5F5F5',
+            p: 2,
+            borderRadius: 1,
+          }}
+        >
+          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Typography variant="h6">ایمیل و شبکه‌های اجتماعی من</Typography>
+            <Typography sx={{ color: 'gray' }} variant="subtitle2">
+              این اطلاعات شما صرفاً برای احراز هویت شما است و نزد هارمونی باقی
+              می‌ماند
+            </Typography>
+          </Box>
+          <Button
+            onClick={handleOpen}
+            sx={{
+              border: 0.5,
+              borderColor: '#1976d2',
+              borderRadius: '5px',
+              backgroundColor: 'white',
+              color: '#1976d2',
+              width: '150px',
+              height: '30px',
+            }}
+          >
+            افزودن ایمیل / سوشال
+          </Button>
+        </Box>
+
+        {emailList.map((item, index) => (
+          <Box
+            key={index}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              p: 2,
+              borderRadius: 1,
+              mt: 1,
+            }}
+          >
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              {item.provider === 'google' && (
+                <Google
+                  size="20"
+                  variant="Bold"
+                  color="#4285F4"
+                  style={{ marginLeft: 8 }}
+                />
+              )}
+              {item.provider === 'apple' && (
+                <Apple
+                  size="20"
+                  variant="Bold"
+                  color="black"
+                  style={{ marginLeft: 8 }}
+                />
+              )}
+              {item.provider === 'email' && (
+                <Sms
+                  size="20"
+                  variant="Bold"
+                  color="#1976d2"
+                  style={{ marginLeft: 8 }}
+                />
+              )}
+
+              <Box>
+                <Typography sx={{ fontWeight: 'bold' }}>
+                  {item.email}
+                </Typography>
+                <Typography variant="body2">۱ ماه پیش</Typography>
+              </Box>
+            </Box>
+
+            <IconButton>
+              <Trash size="20" color="gray" variant="Outline" />
+            </IconButton>
+          </Box>
+        ))}
+      </Box>
+
+      <Dialog open={open} onClose={handleClose} fullWidth maxWidth="xs">
+        <DialogTitle
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            backgroundColor: '#F5F5F5',
+          }}
+        >
+          افزودن ایمیل / سوشال
+          <IconButton onClick={handleClose}>
+            <CloseSquare size="24" color="gray" />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent>
+          <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
+            <TextField
+              fullWidth
+              label="ایمیل"
+              placeholder="abc@email.com"
+              sx={{
+                mb: 2,
+                '& .MuiOutlinedInput-root': {
+                  '& fieldset': { borderColor: '#1976d2' },
+                  '&:hover fieldset': { borderColor: '#1976d2' },
+                  '&.Mui-focused fieldset': { borderColor: '#1976d2' },
+                },
+                '& label.Mui-focused': { color: '#1976d2' },
+              }}
+            />
+            <Button
+              variant="contained"
+              fullWidth
+              sx={{
+                borderRadius: '10px',
+                backgroundColor: '#1976d2',
+                '&:hover': { backgroundColor: '#115293' },
+              }}
+            >
+              ارسال کد تایید
+            </Button>
+
+            <Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
+              <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
+              <Typography sx={{ mx: 1, fontSize: '12px', color: 'gray' }}>
+                یا
+              </Typography>
+              <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
+            </Box>
+
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <Button
+                sx={{
+                  width: '50%',
+                  border: 2,
+                  borderColor: '#1976d2',
+                  color: '#1976d2',
+                  borderRadius: '8px',
+                }}
+              >
+                <Google size="20" color="#4285F4" style={{ marginLeft: 8 }} />
+                گوگل
+              </Button>
+              <Button
+                sx={{
+                  width: '50%',
+                  border: 2,
+                  borderColor: '#1976d2',
+                  color: '#1976d2',
+                  borderRadius: '8px',
+                }}
+              >
+                <Apple size="20" color="black" style={{ marginLeft: 8 }} />
+                اپل
+              </Button>
+            </Box>
+          </Box>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}