44 lines
931 B
TypeScript
44 lines
931 B
TypeScript
import { TickOpenClose } from "@/assets/icons/TickOpenClose";
|
|
import { Box, SxProps, Typography, useTheme } from "@mui/material";
|
|
import { useState, ReactNode } from "react";
|
|
|
|
interface Props {
|
|
headerText: ReactNode;
|
|
children: ReactNode;
|
|
sx?: SxProps;
|
|
}
|
|
|
|
export const TextAccordion = ({ headerText, children, sx }: Props) => {
|
|
const theme = useTheme();
|
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<Box
|
|
sx={sx}
|
|
onClick={() => setOpen((old) => !old)}
|
|
>
|
|
<Box
|
|
sx={{
|
|
userSelect: "none",
|
|
display: "flex",
|
|
gap: "10px",
|
|
cursor: "pointer",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
{headerText}
|
|
<TickOpenClose
|
|
checked={open}
|
|
sx={{
|
|
"&:hover": {
|
|
color: theme.palette.primary.dark,
|
|
},
|
|
}}
|
|
/>
|
|
</Box>
|
|
{open && children}
|
|
</Box>
|
|
);
|
|
};
|