chore: optimization of code

src/features/profile/components/userInformation/socialMedia/SocialMediaDialog.tsx

@@ -0,0 +1,187 @@
+import React 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 { CloseSquare, Google, Apple } from 'iconsax-react';
+
+const MobileSlide = React.forwardRef(function MobileSlide(
+  props: TransitionProps & { children: React.ReactElement<any, any> },
+  ref: React.Ref<unknown>,
+) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
+export default function SocialMediaDialog({
+  open,
+  onClose,
+  t,
+  emailInput,
+  setEmailInput,
+  emailError,
+  setEmailError,
+  fullScreen,
+  computedMaxWidth,
+}: {
+  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';
+}) {
+  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: {
+          m: { xs: 0, sm: 2 },
+          borderRadius: { xs: 0, sm: 2 },
+          width: { xs: '100%', sm: 'auto' },
+          height: { xs: '100%', sm: 'auto' },
+        },
+      }}
+    >
+      <DialogTitle
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          fontWeight: 'bold',
+          fontSize: '16px',
+          gap: 1,
+          p: { xs: 1.5, sm: 2 },
+          position: { xs: 'sticky', sm: 'static' },
+          top: 0,
+          bgcolor: 'background.paper',
+          zIndex: 1,
+        }}
+      >
+        <IconButton onClick={onClose} aria-label="Close">
+          <CloseSquare size={24} color="#82B1FF" />
+        </IconButton>
+        {t('settingForm.addEmailButton')}
+      </DialogTitle>
+
+      <DialogContent
+        dividers
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+          px: { xs: 2, sm: 3 },
+          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>
+
+        <Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
+          <Box sx={{ flex: 1, height: 1, bgcolor: 'divider' }} />
+          <Typography sx={{ mx: 1, fontSize: 12, color: 'text.secondary' }}>
+            {t('settingForm.or')}
+          </Typography>
+          <Box sx={{ flex: 1, height: 1, bgcolor: 'divider' }} />
+        </Box>
+
+        <Box
+          sx={{
+            display: 'flex',
+            gap: 1,
+            flexDirection: { xs: 'column', sm: 'row' },
+          }}
+        >
+          <Button
+            fullWidth
+            sx={{
+              textTransform: 'none',
+              border: 2,
+              borderColor: 'primary.main',
+              color: 'primary.main',
+              borderRadius: 2,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Google
+              size="20"
+              color="#4285F4"
+              style={{ marginInlineStart: 8 }}
+            />
+            {t('settingForm.google')}
+          </Button>
+          <Button
+            fullWidth
+            sx={{
+              textTransform: 'none',
+              border: 2,
+              borderColor: 'primary.main',
+              color: 'primary.main',
+              borderRadius: 2,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Apple size="20" color="black" style={{ marginInlineStart: 8 }} />
+            {t('settingForm.apple')}
+          </Button>
+        </Box>
+      </DialogContent>
+    </Dialog>
+  );
+}