CHIEFSOFT\ameye
134 lines
4.3 KiB
JavaScript
134 lines
4.3 KiB
JavaScript
import React from "react";
|
|
import Card from "@mui/material/Card";
|
|
import { Typography } from "@mui/material";
|
|
import { styled } from "@mui/material/styles";
|
|
import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
|
|
import MuiAccordion from "@mui/material/Accordion";
|
|
import MuiAccordionSummary from "@mui/material/AccordionSummary";
|
|
import MuiAccordionDetails from "@mui/material/AccordionDetails";
|
|
|
|
const Accordion = styled((props) => (
|
|
<MuiAccordion disableGutters elevation={0} square {...props} />
|
|
))(({ theme }) => ({
|
|
border: `1px solid ${theme.palette.divider}`,
|
|
"&:not(:last-child)": {
|
|
borderBottom: 0,
|
|
},
|
|
"&:before": {
|
|
display: "none",
|
|
},
|
|
}));
|
|
|
|
const AccordionSummary = styled((props) => (
|
|
<MuiAccordionSummary
|
|
expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: "0.9rem" }} />}
|
|
{...props}
|
|
/>
|
|
))(({ theme }) => ({
|
|
backgroundColor:
|
|
theme.palette.mode === "dark"
|
|
? "rgba(255, 255, 255, .05)"
|
|
: "rgba(0, 0, 0, .03)",
|
|
flexDirection: "row-reverse",
|
|
"& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
|
|
transform: "rotate(90deg)",
|
|
},
|
|
"& .MuiAccordionSummary-content": {
|
|
marginLeft: theme.spacing(1),
|
|
},
|
|
}));
|
|
|
|
const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
|
|
padding: theme.spacing(2),
|
|
borderTop: "1px solid rgba(0, 0, 0, .125)",
|
|
}));
|
|
|
|
export default function Customization() {
|
|
const [expanded, setExpanded] = React.useState("panel1");
|
|
|
|
const handleChange = (panel) => (event, newExpanded) => {
|
|
setExpanded(newExpanded ? panel : false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Card
|
|
sx={{
|
|
boxShadow: "none",
|
|
borderRadius: "10px",
|
|
p: "25px",
|
|
mb: "15px",
|
|
}}
|
|
>
|
|
<Typography
|
|
as="h3"
|
|
sx={{
|
|
fontSize: 18,
|
|
fontWeight: 500,
|
|
mb: "10px",
|
|
}}
|
|
>
|
|
Customization
|
|
</Typography>
|
|
|
|
<Accordion
|
|
expanded={expanded === "panel1"}
|
|
onChange={handleChange("panel1")}
|
|
className="bg-black accordion-customization"
|
|
>
|
|
<AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
|
|
<Typography fontWeight="500">Collapsible Group Item #1</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Typography>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
|
|
eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
|
|
eget.
|
|
</Typography>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
|
|
<Accordion
|
|
expanded={expanded === "panel2"}
|
|
onChange={handleChange("panel2")}
|
|
className="bg-black accordion-customization"
|
|
>
|
|
<AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
|
|
<Typography fontWeight="500">Collapsible Group Item #2</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Typography>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
|
|
eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
|
|
eget.
|
|
</Typography>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
|
|
<Accordion
|
|
expanded={expanded === "panel3"}
|
|
onChange={handleChange("panel3")}
|
|
className="bg-black accordion-customization"
|
|
>
|
|
<AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
|
|
<Typography fontWeight="500">Collapsible Group Item #3</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Typography>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
|
|
eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
|
|
eget.
|
|
</Typography>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
</Card>
|
|
</>
|
|
);
|
|
}
|