131 lines
3.4 KiB
TypeScript
131 lines
3.4 KiB
TypeScript
import React, { type ReactElement, type ElementType } from 'react';
|
|
import {
|
|
Box,
|
|
Button,
|
|
Dialog,
|
|
DialogContent,
|
|
DialogTitle,
|
|
IconButton,
|
|
TextField,
|
|
Typography,
|
|
} from '@mui/material';
|
|
import Slide from '@mui/material/Slide';
|
|
import type { TransitionProps } from '@mui/material/transitions';
|
|
import { CloseCircle } from 'iconsax-react';
|
|
import { Icon } from '@rkheftan/harmony-ui';
|
|
|
|
const MobileSlide = React.forwardRef(function MobileSlide(
|
|
props: TransitionProps & { children: ReactElement<unknown, ElementType> },
|
|
ref: React.Ref<unknown>,
|
|
) {
|
|
return <Slide direction="up" ref={ref} {...props} />;
|
|
});
|
|
|
|
interface SocialMediaDialogProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
t: (key: string) => string;
|
|
emailInput: string;
|
|
setEmailInput: (val: string) => void;
|
|
emailError: boolean;
|
|
setEmailError: (val: boolean) => void;
|
|
fullScreen: boolean;
|
|
computedMaxWidth: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
}
|
|
|
|
export default function SocialMediaDialog({
|
|
open,
|
|
onClose,
|
|
t,
|
|
emailInput,
|
|
setEmailInput,
|
|
emailError,
|
|
setEmailError,
|
|
fullScreen,
|
|
computedMaxWidth,
|
|
}: SocialMediaDialogProps) {
|
|
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = e.target.value;
|
|
setEmailInput(value);
|
|
setEmailError(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value));
|
|
};
|
|
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onClose={onClose}
|
|
fullWidth
|
|
fullScreen={fullScreen}
|
|
maxWidth={computedMaxWidth}
|
|
scroll="paper"
|
|
keepMounted
|
|
TransitionComponent={fullScreen ? MobileSlide : undefined}
|
|
PaperProps={{
|
|
sx: {
|
|
borderRadius: { xs: 0, sm: 2 },
|
|
width: { xs: '100%', sm: '30%' },
|
|
height: { xs: '100%', sm: '43%' },
|
|
},
|
|
}}
|
|
>
|
|
<DialogTitle
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
fontWeight: 'bold',
|
|
fontSize: '16px',
|
|
gap: 1,
|
|
p: { xs: 1.5, sm: 2 },
|
|
bgcolor: 'background.default',
|
|
}}
|
|
>
|
|
<IconButton onClick={onClose} aria-label="Close">
|
|
<Icon Component={CloseCircle} size="medium" color="primary.main" />
|
|
</IconButton>
|
|
{t('settingForm.addEmailButton')}
|
|
</DialogTitle>
|
|
|
|
<DialogContent
|
|
dividers
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 2,
|
|
py: { xs: 1.5, sm: 2 },
|
|
}}
|
|
>
|
|
<Box>
|
|
<Typography fontWeight="bold">{t('settingForm.newEmail')}</Typography>
|
|
<Typography variant="body2" color="text.secondary">
|
|
{t('settingForm.dialogHeader')}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<TextField
|
|
fullWidth
|
|
type="email"
|
|
value={emailInput}
|
|
onChange={handleEmailChange}
|
|
error={emailError}
|
|
helperText={emailError ? t('settingForm.emailError') : ''}
|
|
label={t('settingForm.email')}
|
|
placeholder="abc@email.com"
|
|
autoComplete="email"
|
|
inputMode="email"
|
|
sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
|
|
autoFocus
|
|
/>
|
|
|
|
<Button
|
|
variant="contained"
|
|
fullWidth
|
|
sx={{ textTransform: 'none', borderRadius: 2 }}
|
|
disabled={emailError || emailInput === ''}
|
|
>
|
|
{t('settingForm.verificationCodeButton')}
|
|
</Button>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|