fix: styles
This commit is contained in:
@@ -1,4 +1,12 @@
|
||||
import { Google, Apple, Sms, Trash, CloseSquare } from 'iconsax-react';
|
||||
import {
|
||||
Google,
|
||||
Apple,
|
||||
Sms,
|
||||
Trash,
|
||||
CloseSquare,
|
||||
Message,
|
||||
ArrowDown3,
|
||||
} from 'iconsax-react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
@@ -8,13 +16,33 @@ import {
|
||||
DialogContent,
|
||||
IconButton,
|
||||
TextField,
|
||||
Menu,
|
||||
MenuItem,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
} from '@mui/material';
|
||||
import { useState } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { CardContainer } from '@/components/CardContainer';
|
||||
|
||||
export function SocialMedia() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
const [openDialog, setOpenDialog] = useState(false);
|
||||
const [emailInput, setEmailInput] = useState('');
|
||||
const [emailError, setEmailError] = useState(false);
|
||||
const [anchor, setAnchor] = useState<null | HTMLElement>(null);
|
||||
const openMenu = Boolean(anchor);
|
||||
|
||||
const handleOpenDialog = () => setOpenDialog(true);
|
||||
const handleCloseDialog = () => setOpenDialog(false);
|
||||
|
||||
const handleClickMenu = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setAnchor(e.currentTarget);
|
||||
};
|
||||
const handleCloseMenu = () => setAnchor(null);
|
||||
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
setEmailInput(value);
|
||||
setEmailError(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value));
|
||||
};
|
||||
|
||||
const emailList = [
|
||||
{ email: 'emailtemp@email.com', provider: 'email' },
|
||||
@@ -22,189 +50,256 @@ export function SocialMedia() {
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: '#F5F5F5',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
p: 2,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '600px',
|
||||
backgroundColor: 'white',
|
||||
boxShadow: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
}}
|
||||
<CardContainer
|
||||
title="ایمیل و شبکه های اجتماعی من"
|
||||
subtitle="این اطلاعات شما صرفاً برای احراز هویت شما است و نزد هارمونی باقی میماند"
|
||||
action={
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-start' }}>
|
||||
<Button
|
||||
onClick={handleClickMenu}
|
||||
variant="outlined"
|
||||
size="large"
|
||||
sx={{
|
||||
maxWidth: '187px',
|
||||
height: '42px',
|
||||
border: '1px solid',
|
||||
borderColor: '#2979FF',
|
||||
borderRadius: '8px',
|
||||
color: '#2979FF',
|
||||
fontSize: '14px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
px: 2,
|
||||
}}
|
||||
>
|
||||
افزودن ایمیل / سوشال
|
||||
{openMenu && <ArrowDown3 size="20" color="#2979FF" />}
|
||||
</Button>
|
||||
<Menu
|
||||
anchorEl={anchor}
|
||||
open={openMenu}
|
||||
onClose={handleCloseMenu}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
width: anchor ? `${anchor.offsetWidth}px` : undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleCloseMenu();
|
||||
handleOpenDialog();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Message size={20} color="black" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>ایمیل</ListItemText>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleCloseMenu();
|
||||
handleOpenDialog();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Google size={20} color="#4285F4" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>گوگل</ListItemText>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleCloseMenu();
|
||||
handleOpenDialog();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Apple size={20} color="black" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>اپل</ListItemText>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5F5F5',
|
||||
width: '100%',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '8px',
|
||||
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"
|
||||
{emailList.map((item, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
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' },
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
p: 1,
|
||||
borderBottom:
|
||||
index !== emailList.length - 1 ? '1px solid #eee' : 'none',
|
||||
}}
|
||||
>
|
||||
ارسال کد تایید
|
||||
</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 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', fontSize: '14px' }}>
|
||||
{item.email}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
۱ ماه پیش
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<IconButton size="small">
|
||||
<Trash size="20" color="gray" variant="Outline" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Button
|
||||
<Dialog
|
||||
open={openDialog}
|
||||
onClose={handleCloseDialog}
|
||||
fullWidth
|
||||
maxWidth="xs"
|
||||
>
|
||||
<DialogTitle
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F5F5F5',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '16px',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<IconButton onClick={handleCloseDialog} size="small">
|
||||
<CloseSquare size="24" color="gray" />
|
||||
</IconButton>
|
||||
افزودن ایمیل
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography fontWeight="bold">ایمیل جدید</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
با فعالسازی ایمیل میتوانید در دفعات بعدی ورود برای ورود از
|
||||
این ایمیل استفاده کنید
|
||||
</Typography>
|
||||
</Box>
|
||||
<TextField
|
||||
fullWidth
|
||||
type="email"
|
||||
value={emailInput}
|
||||
onChange={handleEmailChange}
|
||||
error={emailError}
|
||||
helperText={emailError ? 'لطفا یک ایمیل معتبر وارد کنید' : ''}
|
||||
label="ایمیل"
|
||||
placeholder="abc@email.com"
|
||||
sx={{
|
||||
width: '50%',
|
||||
border: 2,
|
||||
borderColor: '#1976d2',
|
||||
color: '#1976d2',
|
||||
borderRadius: '8px',
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '8px',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Google size="20" color="#4285F4" style={{ marginLeft: 8 }} />
|
||||
گوگل
|
||||
</Button>
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
width: '50%',
|
||||
border: 2,
|
||||
borderColor: '#1976d2',
|
||||
color: '#1976d2',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: '#1976d2',
|
||||
}}
|
||||
disabled={emailError || emailInput === ''}
|
||||
>
|
||||
<Apple size="20" color="black" style={{ marginLeft: 8 }} />
|
||||
اپل
|
||||
ارسال کد تایید
|
||||
</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',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Google size="20" color="#4285F4" style={{ marginLeft: 8 }} />
|
||||
گوگل
|
||||
</Button>
|
||||
<Button
|
||||
sx={{
|
||||
width: '50%',
|
||||
border: 2,
|
||||
borderColor: '#1976d2',
|
||||
color: '#1976d2',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Apple size="20" color="black" style={{ marginLeft: 8 }} />
|
||||
اپل
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContainer>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user