front-hub/src/components/CustomSaveAccordion.tsx
2023-08-24 22:18:23 +03:00

80 lines
2.1 KiB
TypeScript

import { Box, useMediaQuery, useTheme } from "@mui/material";
import { useState } from "react";
import ExpandIcon from "./icons/ExpandIcon";
import type { ReactNode } from "react";
interface Props {
header: ReactNode;
divide?: boolean;
privilege: ReactNode;
}
export default function CustomSaveAccordion({ header, divide = false, privilege }: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upXs = useMediaQuery(theme.breakpoints.up("xs"));
const [isExpanded, setIsExpanded] = useState<boolean>(false);
return (
<Box
sx={{
backgroundColor: "white",
"&:first-of-type": {
borderTopLeftRadius: "12px",
borderTopRightRadius: "12px",
},
"&:last-of-type": {
borderBottomLeftRadius: "12px",
borderBottomRightRadius: "12px",
},
"&:not(:last-of-type)": {
borderBottom: `1px solid ${theme.palette.gray.main}`,
},
}}
>
<Box
onClick={() => setIsExpanded((prev) => !prev)}
sx={{
minHeight: "72px",
px: "20px",
display: "flex",
alignItems: "stretch",
justifyContent: "space-between",
cursor: "pointer",
userSelect: "none",
rowGap: "10px",
flexDirection: upXs ? undefined : "column",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
width: "100%",
fontSize: upMd ? undefined : "16px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 500,
color: theme.palette.gray.dark,
px: 0,
}}
>
{header}
</Box>
<Box
sx={{
pl: "20px",
width: "52px",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderLeft: divide ? "1px solid #000000" : "none",
}}
>
<ExpandIcon isExpanded={isExpanded} />
</Box>
</Box>
{isExpanded && privilege}
</Box>
);
}