76 lines
3.0 KiB
TypeScript
76 lines
3.0 KiB
TypeScript
|
import { Box, Typography, useTheme } from "@mui/material";
|
|||
|
|
import CreationCard from "../components/CreateQuiz/CreationCard";
|
|||
|
|
import quizCreationImage1 from "../assets/quiz-creation-1.png";
|
|||
|
|
import quizCreationImage2 from "../assets/quiz-creation-2.png";
|
|||
|
|
import { useState } from "react";
|
|||
|
|
export default function CreateCard() {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
const [progress, setProgress] = useState<number>(1 / 6);
|
|||
|
|
return (<>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
border: `1px solid ${theme.palette.brightPurple.main}`,
|
|||
|
|
borderRadius: "12px",
|
|||
|
|
overflow: "hidden",
|
|||
|
|
px: "20px",
|
|||
|
|
pt: "20px",
|
|||
|
|
pb: "10px",
|
|||
|
|
position: "relative",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
backgroundColor: "white",
|
|||
|
|
height: "10px",
|
|||
|
|
position: "absolute",
|
|||
|
|
top: 0,
|
|||
|
|
left: 0,
|
|||
|
|
width: "100%",
|
|||
|
|
boxShadow: `0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
backgroundColor: theme.palette.brightPurple.main,
|
|||
|
|
height: "10px",
|
|||
|
|
position: "absolute",
|
|||
|
|
top: 0,
|
|||
|
|
left: 0,
|
|||
|
|
width: `${(progress * 100).toFixed(3)}%`,
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<Typography
|
|||
|
|
sx={{
|
|||
|
|
fontSize: "12px",
|
|||
|
|
lineHeight: "14px",
|
|||
|
|
color: "#4D4D4D",
|
|||
|
|
}}
|
|||
|
|
>Шаг 1 из 6</Typography>
|
|||
|
|
<Typography
|
|||
|
|
sx={{
|
|||
|
|
fontSize: "18px",
|
|||
|
|
lineHeight: "24px",
|
|||
|
|
color: "#4D4D4D",
|
|||
|
|
mt: "5px",
|
|||
|
|
}}
|
|||
|
|
>Настройка стартовой страницы</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
gap: "3.4%",
|
|||
|
|
mt: "60px",
|
|||
|
|
}}>
|
|||
|
|
<CreationCard
|
|||
|
|
header="Создание квиз-опроса"
|
|||
|
|
text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
|
|||
|
|
image={quizCreationImage1}
|
|||
|
|
/>
|
|||
|
|
<CreationCard
|
|||
|
|
header="Создание анкеты"
|
|||
|
|
text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
|
|||
|
|
image={quizCreationImage2}
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
}
|