303 lines
13 KiB
TypeScript
303 lines
13 KiB
TypeScript
import {
|
||
Box,
|
||
Button, FormControl,
|
||
IconButton,
|
||
InputAdornment, Link,
|
||
Modal,
|
||
OutlinedInput,
|
||
TextField,
|
||
Typography,
|
||
useTheme
|
||
} from "@mui/material";
|
||
import BrowserIcon from "../../assets/icons/BrowserIcon";
|
||
import TiktokIcon from "../../assets/icons/tiktokIcon";
|
||
import TelegramIcon from "../../assets/icons/telegramIcon";
|
||
import QRIcon from "../../assets/icons/qrIcon";
|
||
import React from "react";
|
||
import CustomTextField from "@ui_kit/CustomTextField";
|
||
import UploadBox from "@ui_kit/UploadBox";
|
||
import UploadIcon from "../../assets/icons/UploadIcon";
|
||
import CopyIcon from "../../assets/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'}}>
|
||
<Button
|
||
variant="outlined"
|
||
onClick={handleCloseGraph}
|
||
>Отмена</Button>
|
||
<Button
|
||
variant="contained"
|
||
>Готово</Button>
|
||
</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'}}>
|
||
<Button
|
||
variant="outlined"
|
||
onClick={handleCloseTiktok}
|
||
>Отмена</Button>
|
||
<Button
|
||
variant="contained"
|
||
>Готово</Button>
|
||
</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'}}>Скачать PNG</Button>
|
||
<Button variant='outlined' sx={{color: theme.palette.brightPurple.main, background: '#EEE4FC'}}>Скачать PNG</Button>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
</Modal>
|
||
|
||
</>
|
||
)
|
||
} |