59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { CardContainer } from '@/components/CardContainer';
|
|
import { PageWrapper } from '../PageWrapper';
|
|
import SocialMediaList from './socialMedia/SocialMediaList';
|
|
import SocialMediaMenu from './socialMedia/SocialMediaMenu';
|
|
import SocialMediaDialog from './socialMedia/SocialMediaDialog';
|
|
import useMediaQuery from '@mui/material/useMediaQuery';
|
|
import type { Theme } from '@mui/material/styles';
|
|
|
|
export function SocialMedia() {
|
|
const { t } = useTranslation('profileSetting');
|
|
|
|
const [openDialog, setOpenDialog] = useState(false);
|
|
const [emailInput, setEmailInput] = useState('');
|
|
const [emailError, setEmailError] = useState(false);
|
|
|
|
const fullScreen = useMediaQuery((theme: Theme) =>
|
|
theme.breakpoints.down('sm'),
|
|
);
|
|
const downMd = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
|
|
const computedMaxWidth = (fullScreen ? 'xs' : downMd ? 'sm' : 'md') as
|
|
| 'xs'
|
|
| 'sm'
|
|
| 'md'
|
|
| 'lg'
|
|
| 'xl';
|
|
|
|
const emailList = [
|
|
{ email: 'emailtemp@email.com', provider: 'email', time: '1 ماه پیش' },
|
|
{ email: 'emailtemp@gmail.com', provider: 'google', time: '1 ماه پیش' },
|
|
] as const;
|
|
|
|
return (
|
|
<PageWrapper>
|
|
<CardContainer
|
|
title={t('settingForm.titleSocial')}
|
|
subtitle={t('settingForm.descriptionSocial')}
|
|
action={
|
|
<SocialMediaMenu t={t} onOpenDialog={() => setOpenDialog(true)} />
|
|
}
|
|
>
|
|
<SocialMediaList t={t} emailList={emailList} />
|
|
<SocialMediaDialog
|
|
open={openDialog}
|
|
onClose={() => setOpenDialog(false)}
|
|
t={t}
|
|
emailInput={emailInput}
|
|
setEmailInput={setEmailInput}
|
|
emailError={emailError}
|
|
setEmailError={setEmailError}
|
|
fullScreen={fullScreen}
|
|
computedMaxWidth={computedMaxWidth}
|
|
/>
|
|
</CardContainer>
|
|
</PageWrapper>
|
|
);
|
|
}
|