111 lines
3.0 KiB
TypeScript
111 lines
3.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
Box,
|
|
Button,
|
|
Menu,
|
|
MenuItem,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
} from '@mui/material';
|
|
import { Message, Google, Apple, ArrowDown3 } from 'iconsax-react';
|
|
import { Icon } from '@rkheftan/harmony-ui';
|
|
import { type SocialMediaMenuProps } from '@/features/profile/types/settingsType';
|
|
|
|
export default function SocialMediaMenu({
|
|
t,
|
|
onOpenDialog,
|
|
}: SocialMediaMenuProps) {
|
|
const [anchor, setAnchor] = useState<null | HTMLElement>(null);
|
|
const openMenu = Boolean(anchor);
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const handleClickMenu = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
setOpen(true);
|
|
setAnchor(e.currentTarget);
|
|
};
|
|
const handleCloseMenu = () => {
|
|
setOpen(false);
|
|
setAnchor(null);
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'flex-start',
|
|
gap: 1,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: { xs: 'column', sm: 'row' },
|
|
alignItems: { xs: 'stretch', sm: 'flex-start' },
|
|
gap: 1,
|
|
}}
|
|
>
|
|
<Button
|
|
onClick={handleClickMenu}
|
|
variant="outlined"
|
|
sx={{
|
|
border: '1px solid',
|
|
borderRadius: 1,
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
whiteSpace: 'nowrap',
|
|
backgroundColor: open ? 'primary.light' : 'primary.default',
|
|
textTransform: 'none',
|
|
}}
|
|
>
|
|
<Box component="span">{t('settingForm.addEmailOrSocialButton')}</Box>
|
|
<Icon
|
|
Component={ArrowDown3}
|
|
size="medium"
|
|
color="primary.main"
|
|
variant={open ? 'Bold' : 'Outline'}
|
|
/>
|
|
</Button>
|
|
</Box>
|
|
|
|
<Menu
|
|
anchorEl={anchor}
|
|
open={openMenu}
|
|
onClose={handleCloseMenu}
|
|
PaperProps={{
|
|
sx: {
|
|
width: anchor ? anchor.offsetWidth : 'auto',
|
|
// maxWidth: '90vw',
|
|
},
|
|
}}
|
|
anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
|
|
transformOrigin={{ vertical: 'top', horizontal: 'left' }}
|
|
>
|
|
<MenuItem
|
|
onClick={() => {
|
|
handleCloseMenu();
|
|
onOpenDialog();
|
|
}}
|
|
>
|
|
<ListItemIcon>
|
|
<Icon Component={Message} size="medium" color="primary.main" />
|
|
</ListItemIcon>
|
|
<ListItemText>{t('settingForm.email')}</ListItemText>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<ListItemIcon>
|
|
<Icon Component={Google} size="medium" color="primary.main" />
|
|
</ListItemIcon>
|
|
<ListItemText>{t('settingForm.google')}</ListItemText>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<ListItemIcon>
|
|
<Icon Component={Apple} size="medium" color="primary.main" />
|
|
</ListItemIcon>
|
|
<ListItemText>{t('settingForm.apple')}</ListItemText>
|
|
</MenuItem>
|
|
</Menu>
|
|
</Box>
|
|
);
|
|
}
|