132 lines
3.0 KiB
TypeScript
132 lines
3.0 KiB
TypeScript
import {
|
|
Box,
|
|
Slide,
|
|
Typography,
|
|
useMediaQuery,
|
|
useTheme,
|
|
Zoom,
|
|
} from "@mui/material";
|
|
import { FC, ReactNode, useRef, useState } from "react";
|
|
|
|
interface Iprops {
|
|
header: string;
|
|
image: string;
|
|
text: string;
|
|
textIcon: string;
|
|
icon: ReactNode;
|
|
}
|
|
|
|
export const MobileQuizCard: FC<Iprops> = ({
|
|
header,
|
|
image,
|
|
text,
|
|
icon,
|
|
textIcon,
|
|
}) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const containerRef = useRef<HTMLElement>(null);
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
|
|
|
const handleChange = () => {
|
|
setIsOpen((prev) => !prev);
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
ref={containerRef}
|
|
onClick={handleChange}
|
|
sx={{
|
|
width: "100%",
|
|
minHeight: isOpen ? "462px" : "auto",
|
|
backgroundColor: "#ffffff",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
flexWrap: "wrap",
|
|
padding: isMobile ? "15px" : "20px",
|
|
borderRadius: "12px",
|
|
boxSizing: "border-box",
|
|
boxShadow:
|
|
"0px 6.6501px 5.32008px 0px rgba(126, 42, 234, 0.03), 0px 12.52155px 10.01724px 0px rgba(126, 42, 234, 0.04), 0px 22.33631px 17.86905px 0px rgba(126, 42, 234, 0.04)",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "15px",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
borderRadius: "8px",
|
|
width: "36px",
|
|
height: "36px",
|
|
background: "#7E2AEA",
|
|
display: " flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
{icon}
|
|
</Box>
|
|
<Typography>{textIcon}</Typography>
|
|
</Box>
|
|
{isOpen && (
|
|
<Box
|
|
sx={{
|
|
height: "70%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "space-around",
|
|
mt: "14px",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Typography
|
|
variant="h6"
|
|
fontSize={isMobile ? "24px" : "36px"}
|
|
lineHeight={isMobile ? "normal" : "42.66px"}
|
|
maxWidth={"491px"}
|
|
>
|
|
{header}
|
|
</Typography>
|
|
<Box
|
|
sx={{
|
|
maxWidth: "100%",
|
|
marginTop: "20px",
|
|
}}
|
|
>
|
|
<Typography
|
|
fontSize={"18px"}
|
|
lineHeight={"21px"}
|
|
color={"#4D4D4D"}
|
|
>
|
|
{text}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
maxWidth: "100%",
|
|
marginTop: "30px",
|
|
}}
|
|
>
|
|
<Box
|
|
component={"img"}
|
|
src={image}
|
|
sx={{
|
|
width: "100%",
|
|
height: isMobile ? "228px" : "671px",
|
|
backgroundColor: "#c8dade",
|
|
borderRadius: "12px",
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|