chore: optimization of code

2025-08-09 16:22:15 -07:00
parent f23a8a9fca
commit 57959f39ce
28 changed files with 2586 additions and 1251 deletions
--- a/src/features/profile/components/userInformation/socialMedia/SocialMediaMenu.tsx
+++ b/src/features/profile/components/userInformation/socialMedia/SocialMediaMenu.tsx
@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import {
+  Box,
+  Button,
+  Menu,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material';
+import { Message, Google, Apple, ArrowDown3 } from 'iconsax-react';
+
+export default function SocialMediaMenu({
+  t,
+  onOpenDialog,
+}: {
+  t: (key: string) => string;
+  onOpenDialog: () => void;
+}) {
+  const [anchor, setAnchor] = useState<null | HTMLElement>(null);
+  const openMenu = Boolean(anchor);
+
+  const handleClickMenu = (e: React.MouseEvent<HTMLButtonElement>) =>
+    setAnchor(e.currentTarget);
+  const handleCloseMenu = () => setAnchor(null);
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'flex-start',
+        flexWrap: 'wrap',
+        gap: 1,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column', sm: 'row' },
+          alignItems: { xs: 'stretch', sm: 'flex-start' },
+          gap: 1,
+          width: '100%',
+        }}
+      >
+        <Button
+          onClick={handleClickMenu}
+          variant="outlined"
+          sx={{
+            width: '100%',
+            maxWidth: { sm: 187 },
+            textTransform: 'none',
+            border: '1px solid',
+            borderColor: 'primary.main',
+            borderRadius: '8px',
+            color: 'primary.main',
+            fontSize: '14px',
+            px: 2,
+            py: 1,
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          <Box
+            component="span"
+            sx={{
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              direction: 'rtl',
+            }}
+          >
+            {t('settingForm.addEmailOrSocialButton')}
+          </Box>
+          <ArrowDown3 size="20" color="#2979FF" />
+        </Button>
+      </Box>
+
+      <Menu
+        anchorEl={anchor}
+        open={openMenu}
+        onClose={handleCloseMenu}
+        PaperProps={{
+          sx: {
+            minWidth: 240,
+            maxWidth: '90vw',
+          },
+        }}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+      >
+        <MenuItem
+          onClick={() => {
+            handleCloseMenu();
+            onOpenDialog();
+          }}
+        >
+          <ListItemIcon>
+            <Message size={20} color="black" />
+          </ListItemIcon>
+          <ListItemText>{t('settingForm.email')}</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <Google size={20} color="#4285F4" />
+          </ListItemIcon>
+          <ListItemText>{t('settingForm.google')}</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <Apple size={20} color="black" />
+          </ListItemIcon>
+          <ListItemText>{t('settingForm.apple')}</ListItemText>
+        </MenuItem>
+      </Menu>
+    </Box>
+  );
+}