140 lines
4.4 KiB
TypeScript
140 lines
4.4 KiB
TypeScript
import { useState } from "react";
|
||
|
||
import { Box, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
|
||
import { СardPrivilegie } from "./CardPrivilegie";
|
||
|
||
import { usePrivilegies } from "@root/hooks/privilege.hook";
|
||
|
||
interface CustomWrapperProps {
|
||
text: string;
|
||
sx?: SxProps<Theme>;
|
||
result?: boolean;
|
||
}
|
||
|
||
export const PrivilegiesWrapper = ({ text, sx, result }: CustomWrapperProps) => {
|
||
const theme = useTheme();
|
||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
||
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
||
|
||
const { privilegies, isError, isLoading, errorMessage } = usePrivilegies();
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
overflow: "hidden",
|
||
borderRadius: "12px",
|
||
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
||
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
|
||
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
|
||
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
|
||
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.067
|
||
4749)`,
|
||
|
||
...sx,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
border: "1px solid white",
|
||
"&:first-of-type": {
|
||
borderTopLeftRadius: "12px ",
|
||
borderTopRightRadius: "12px",
|
||
},
|
||
"&:last-of-type": {
|
||
borderBottomLeftRadius: "12px",
|
||
borderBottomRightRadius: "12px",
|
||
},
|
||
"&:not(:last-of-type)": {
|
||
borderBottom: `1px solid gray`,
|
||
},
|
||
}}
|
||
>
|
||
<Box
|
||
onClick={() => setIsExpanded((prev) => !prev)}
|
||
sx={{
|
||
height: "88px",
|
||
px: "20px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
cursor: "pointer",
|
||
userSelect: "none",
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
width: "100%",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
fontSize: "18px",
|
||
lineHeight: upMd ? undefined : "19px",
|
||
fontWeight: 400,
|
||
color: "#FFFFFF",
|
||
px: 0,
|
||
}}
|
||
>
|
||
{text}
|
||
</Typography>
|
||
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
height: "100%",
|
||
alignItems: "center",
|
||
}}
|
||
>
|
||
{result ? (
|
||
<>
|
||
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
|
||
<path
|
||
d="M7.5 19.5625L15 12.0625L22.5 19.5625"
|
||
stroke="#7E2AEA"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
|
||
<Box
|
||
sx={{
|
||
borderLeft: upSm ? "1px solid #9A9AAF" : "none",
|
||
pl: upSm ? "2px" : 0,
|
||
height: "50%",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
}}
|
||
/>
|
||
</>
|
||
) : (
|
||
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
|
||
<path
|
||
d="M7.5 19.5625L15 12.0625L22.5 19.5625"
|
||
stroke="#fe9903"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
{isExpanded &&
|
||
(isError ? (
|
||
<Typography>errorMessage</Typography>
|
||
) : (
|
||
privilegies?.Шаблонизатор.map(({ name, type, price, description }) => (
|
||
<СardPrivilegie key={type} name={name} type={type} price={price} description={description} />
|
||
))
|
||
))}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|