334 lines
15 KiB
TypeScript
334 lines
15 KiB
TypeScript
|
import {
|
|||
|
|
Box,
|
|||
|
|
Button, FormControl,
|
|||
|
|
IconButton,
|
|||
|
|
InputAdornment, Link,
|
|||
|
|
Modal,
|
|||
|
|
OutlinedInput,
|
|||
|
|
TextField,
|
|||
|
|
Typography,
|
|||
|
|
useTheme
|
|||
|
|
} from "@mui/material";
|
|||
|
|
import BrowserIcon from "@icons/BrowserIcon";
|
|||
|
|
import TiktokIcon from "@icons/tiktokIcon";
|
|||
|
|
import TelegramIcon from "@icons/telegramIcon";
|
|||
|
|
import QRIcon from "@icons/qrIcon";
|
|||
|
|
import React from "react";
|
|||
|
|
import CustomTextField from "@ui_kit/CustomTextField";
|
|||
|
|
import CustomButton from "../../components/CustomButton";
|
|||
|
|
import UploadBox from "../../components/CreateQuiz/UploadBox";
|
|||
|
|
import UploadIcon from "@icons/UploadIcon";
|
|||
|
|
import CopyIcon from "@icons/CopyIcon";
|
|||
|
|
import Qr from "../../assets/Qr.png"
|
|||
|
|
|
|||
|
|
|
|||
|
|
export default function ButtonSocial () {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
|
|||
|
|
const [openGraph, setOpenGraph] = React.useState(false);
|
|||
|
|
const handleOpenGraph = () => setOpenGraph(true);
|
|||
|
|
const handleCloseGraph = () => setOpenGraph(false);
|
|||
|
|
|
|||
|
|
const [openTiktok, setOpenTiktok] = React.useState(false);
|
|||
|
|
const handleOpenTiktok = () => setOpenTiktok(true);
|
|||
|
|
const handleCloseTiktok = () => setOpenTiktok(false);
|
|||
|
|
|
|||
|
|
const [openQr, setOpenQr] = React.useState(false);
|
|||
|
|
const handleOpenQr = () => setOpenQr(true);
|
|||
|
|
const handleCloseQr = () => setOpenQr(false);
|
|||
|
|
|
|||
|
|
|
|||
|
|
return(
|
|||
|
|
<>
|
|||
|
|
<Box>
|
|||
|
|
<IconButton onClick={handleOpenGraph}><BrowserIcon/></IconButton>
|
|||
|
|
<IconButton onClick={handleOpenTiktok}><TiktokIcon/></IconButton>
|
|||
|
|
<IconButton><TelegramIcon/></IconButton>
|
|||
|
|
<IconButton onClick={handleOpenQr}><QRIcon/></IconButton>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
{/*модалка Graph*/}
|
|||
|
|
<Modal
|
|||
|
|
open={openGraph}
|
|||
|
|
onClose={handleCloseGraph}
|
|||
|
|
aria-labelledby="modal-modal-title"
|
|||
|
|
aria-describedby="modal-modal-description"
|
|||
|
|
>
|
|||
|
|
<Box sx={{position: 'absolute' as 'absolute',
|
|||
|
|
top: '50%',
|
|||
|
|
left: '50%',
|
|||
|
|
transform: 'translate(-50%, -50%)',
|
|||
|
|
maxWidth: '620px',
|
|||
|
|
width: '100%',
|
|||
|
|
bgcolor: 'background.paper',
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
|
|||
|
|
boxShadow: 24,
|
|||
|
|
p: 0,}}>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
padding: '20px',
|
|||
|
|
borderRadius: '12px 12px 0 0',
|
|||
|
|
background: theme.palette.background.default,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography sx={{color: theme.palette.grey2.main}}>Open Graph</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{
|
|||
|
|
padding: '20px',
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
gap: '30px'
|
|||
|
|
}}>
|
|||
|
|
<Box sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
gap: '20px',
|
|||
|
|
flexDirection: 'column'
|
|||
|
|
}}>
|
|||
|
|
<Typography sx={{color: theme.palette.grey2.main}}>
|
|||
|
|
Заголовок
|
|||
|
|
</Typography>
|
|||
|
|
<CustomTextField placeholder={'Quiz title'} text={''}/>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
<Box sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
gap: '20px',
|
|||
|
|
flexDirection: 'column'
|
|||
|
|
}}>
|
|||
|
|
<Typography sx={{color: theme.palette.grey2.main}}>
|
|||
|
|
Описание
|
|||
|
|
</Typography>
|
|||
|
|
<TextField
|
|||
|
|
id="outlined-multiline-static"
|
|||
|
|
multiline
|
|||
|
|
rows={2}
|
|||
|
|
placeholder='Описание'
|
|||
|
|
sx={{
|
|||
|
|
"& .MuiInputBase-root": {
|
|||
|
|
backgroundColor: theme.palette.background.default,
|
|||
|
|
borderRadius: "10px",
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
gap: '20px',
|
|||
|
|
flexDirection: 'column'
|
|||
|
|
}}>
|
|||
|
|
<Typography sx={{color: theme.palette.grey2.main}}>
|
|||
|
|
Изображение
|
|||
|
|
</Typography>
|
|||
|
|
<UploadBox sx ={{maxWidth: "325px"}} icon={<UploadIcon />} text="5 MB максимум" />
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
|
|||
|
|
<CustomButton
|
|||
|
|
variant="outlined"
|
|||
|
|
onClick={handleCloseGraph}
|
|||
|
|
sx={{
|
|||
|
|
border: `1px solid ${theme.palette.brightPurple.main}`,
|
|||
|
|
color: theme.palette.brightPurple.main,
|
|||
|
|
width: "auto",
|
|||
|
|
ml: "auto",
|
|||
|
|
px: "20px",
|
|||
|
|
py: "9px",
|
|||
|
|
}}
|
|||
|
|
>Отмена</CustomButton>
|
|||
|
|
<CustomButton
|
|||
|
|
variant="contained"
|
|||
|
|
sx={{
|
|||
|
|
backgroundColor: theme.palette.brightPurple.main,
|
|||
|
|
color: "white",
|
|||
|
|
width: "auto",
|
|||
|
|
px: "20px",
|
|||
|
|
py: "9px",
|
|||
|
|
}}
|
|||
|
|
>Готово</CustomButton>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
</Modal>
|
|||
|
|
|
|||
|
|
{/*модалка тиктока*/}
|
|||
|
|
<Modal
|
|||
|
|
open={openTiktok}
|
|||
|
|
onClose={handleCloseTiktok}
|
|||
|
|
aria-labelledby="modal-modal-title"
|
|||
|
|
aria-describedby="modal-modal-description"
|
|||
|
|
>
|
|||
|
|
<Box sx={{position: 'absolute' as 'absolute',
|
|||
|
|
top: '50%',
|
|||
|
|
left: '50%',
|
|||
|
|
transform: 'translate(-50%, -50%)',
|
|||
|
|
maxWidth: '620px',
|
|||
|
|
width: '100%',
|
|||
|
|
bgcolor: 'background.paper',
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
|
|||
|
|
boxShadow: 24,
|
|||
|
|
p: 0,}}>
|
|||
|
|
<Box
|
|||
|
|
sx={{display: 'flex',
|
|||
|
|
padding: '20px',
|
|||
|
|
borderRadius: '12px 12px 0 0',
|
|||
|
|
background: theme.palette.background.default,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography sx={{color: theme.palette.grey2.main}}>Добавить квиз в Tiktok</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{
|
|||
|
|
padding: '20px',
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
gap: '30px'
|
|||
|
|
}}>
|
|||
|
|
<Box sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
gap: '20px',
|
|||
|
|
flexDirection: 'column'
|
|||
|
|
}}>
|
|||
|
|
<Typography>1. Скопируйте ссылку на квиз</Typography>
|
|||
|
|
|
|||
|
|
<FormControl sx={{ m: 1, width: '100%' }} variant="outlined">
|
|||
|
|
<OutlinedInput
|
|||
|
|
id="outlined-adornment-password"
|
|||
|
|
type='text'
|
|||
|
|
placeholder='https://727c5177be5004f11a0f2'
|
|||
|
|
sx={{
|
|||
|
|
"& .MuiInputBase-root": {
|
|||
|
|
backgroundColor: theme.palette.background.default,
|
|||
|
|
borderRadius: "10px",
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
}}
|
|||
|
|
endAdornment={
|
|||
|
|
<InputAdornment position="end">
|
|||
|
|
<IconButton
|
|||
|
|
// onClick={}
|
|||
|
|
// onMouseDown={}
|
|||
|
|
edge="end"
|
|||
|
|
>
|
|||
|
|
<CopyIcon color={'#ffffff'} bgcolor={theme.palette.brightPurple.main}/>
|
|||
|
|
</IconButton>
|
|||
|
|
</InputAdornment>
|
|||
|
|
}
|
|||
|
|
label="Password"
|
|||
|
|
/>
|
|||
|
|
</FormControl>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
<Box sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
gap: '20px',
|
|||
|
|
flexDirection: 'column'
|
|||
|
|
}}>
|
|||
|
|
<Typography >2. Зайдите в аккаунт Tiktok</Typography>
|
|||
|
|
<Typography sx={{color: theme.palette.grey2.main}}>
|
|||
|
|
Кликните по кнопке “Изменить профиль”. В поле Веб-сайт вставьте скопированную ссылку на квиз.
|
|||
|
|
Готово! Квиз вставлен в аккаунт Tiktok.
|
|||
|
|
</Typography>
|
|||
|
|
<Link
|
|||
|
|
component='button'
|
|||
|
|
sx={{
|
|||
|
|
fontSize: "16px",
|
|||
|
|
lineHeight: "19px",
|
|||
|
|
color: theme.palette.brightPurple.main,
|
|||
|
|
textDecorationColor: theme.palette.brightPurple.main,
|
|||
|
|
textAlign: 'left',
|
|||
|
|
}}>
|
|||
|
|
Если всё ещё не понятно, более подробная инструкция тут
|
|||
|
|
</Link>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
<Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
|
|||
|
|
<CustomButton
|
|||
|
|
variant="outlined"
|
|||
|
|
onClick={handleCloseTiktok}
|
|||
|
|
sx={{
|
|||
|
|
border: `1px solid ${theme.palette.brightPurple.main}`,
|
|||
|
|
color: theme.palette.brightPurple.main,
|
|||
|
|
width: "auto",
|
|||
|
|
ml: "auto",
|
|||
|
|
px: "20px",
|
|||
|
|
py: "9px",
|
|||
|
|
}}
|
|||
|
|
>Отмена</CustomButton>
|
|||
|
|
<CustomButton
|
|||
|
|
variant="contained"
|
|||
|
|
sx={{
|
|||
|
|
backgroundColor: theme.palette.brightPurple.main,
|
|||
|
|
color: "white",
|
|||
|
|
width: "auto",
|
|||
|
|
px: "20px",
|
|||
|
|
py: "9px",
|
|||
|
|
}}
|
|||
|
|
>Готово</CustomButton>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
</Modal>
|
|||
|
|
|
|||
|
|
{/*модалка QR*/}
|
|||
|
|
<Modal
|
|||
|
|
open={openQr}
|
|||
|
|
onClose={handleCloseQr}
|
|||
|
|
aria-labelledby="modal-modal-title"
|
|||
|
|
aria-describedby="modal-modal-description"
|
|||
|
|
>
|
|||
|
|
<Box sx={{position: 'absolute' as 'absolute',
|
|||
|
|
top: '50%',
|
|||
|
|
left: '50%',
|
|||
|
|
transform: 'translate(-50%, -50%)',
|
|||
|
|
maxWidth: '620px',
|
|||
|
|
width: '100%',
|
|||
|
|
bgcolor: 'background.paper',
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
|
|||
|
|
boxShadow: 24,
|
|||
|
|
p: 0,}}>
|
|||
|
|
<Box
|
|||
|
|
sx={{display: 'flex',
|
|||
|
|
padding: '20px',
|
|||
|
|
borderRadius: '12px 12px 0 0',
|
|||
|
|
background: theme.palette.background.default,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography sx={{color: theme.palette.grey2.main}}>QR-код для перехода в квиз</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{
|
|||
|
|
padding: '20px',
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
gap: '30px'
|
|||
|
|
}}>
|
|||
|
|
<Box sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
gap: '20px',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
flexDirection: 'column'
|
|||
|
|
}}>
|
|||
|
|
<Typography sx={{color: theme.palette.grey2.main}}>
|
|||
|
|
Можно показывать в презентации на вебинарах или распечатать для офлайн мероприятий
|
|||
|
|
</Typography>
|
|||
|
|
<Box
|
|||
|
|
component='img'
|
|||
|
|
src={Qr}
|
|||
|
|
width='220px'
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
<Box sx={{display: 'flex', justifyContent: 'center', gap: '10px'}}>
|
|||
|
|
<Button variant='outlined' sx={{color: theme.palette.brightPurple.main, background: '#EEE4FC', borderColor: theme.palette.brightPurple.main}}>Скачать PNG</Button>
|
|||
|
|
<Button variant='outlined' sx={{color: theme.palette.brightPurple.main, background: '#EEE4FC', borderColor: theme.palette.brightPurple.main}}>Скачать PNG</Button>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
</Modal>
|
|||
|
|
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
}
|