73 lines
1.6 KiB
TypeScript
73 lines
1.6 KiB
TypeScript
|
import { Box } from "@mui/material";
|
||
|
|
|
||
|
|
type StartPageMobileProps = {
|
||
|
|
quizHeaderBlock: JSX.Element;
|
||
|
|
quizMainBlock: JSX.Element;
|
||
|
|
backgroundBlock: JSX.Element | null;
|
||
|
|
startpageType: "standard" | "expanded" | "centered";
|
||
|
|
};
|
||
|
|
|
||
|
|
export const StartPageMobile = ({
|
||
|
|
quizHeaderBlock,
|
||
|
|
quizMainBlock,
|
||
|
|
backgroundBlock,
|
||
|
|
startpageType,
|
||
|
|
}: StartPageMobileProps) => {
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column-reverse",
|
||
|
|
flexGrow: 1,
|
||
|
|
justifyContent: "flex-end",
|
||
|
|
minHeight: "100vh",
|
||
|
|
height: "100%",
|
||
|
|
"&::-webkit-scrollbar": { width: 0 },
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
width: "100%",
|
||
|
|
display: "flex",
|
||
|
|
flexGrow: 1,
|
||
|
|
flexDirection: "column",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
alignItems: "flex-start",
|
||
|
|
p: "25px",
|
||
|
|
height: "100%",
|
||
|
|
overflowY: "auto",
|
||
|
|
overflowX: "hidden",
|
||
|
|
"&::-webkit-scrollbar": {
|
||
|
|
width: "4px",
|
||
|
|
},
|
||
|
|
"&::-webkit-scrollbar-thumb": {
|
||
|
|
backgroundColor: "#b8babf",
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{quizHeaderBlock}
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
height: "80%",
|
||
|
|
display: "flex",
|
||
|
|
flexGrow: 1,
|
||
|
|
flexDirection: "column",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
width: "100%",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{quizMainBlock}
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
width: "100%",
|
||
|
|
overflow: "hidden",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{backgroundBlock}
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|