CHIEFSOFT\ameye
76 lines
2.3 KiB
JavaScript
76 lines
2.3 KiB
JavaScript
import React from "react";
|
|
import Card from "@mui/material/Card";
|
|
import { Typography } from "@mui/material";
|
|
import Accordion from '@mui/material/Accordion';
|
|
import AccordionSummary from '@mui/material/AccordionSummary';
|
|
import AccordionDetails from '@mui/material/AccordionDetails';
|
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|
|
|
export default function BasicAccordion() {
|
|
return (
|
|
<>
|
|
<Card
|
|
sx={{
|
|
boxShadow: "none",
|
|
borderRadius: "10px",
|
|
p: "25px",
|
|
mb: "15px",
|
|
}}
|
|
>
|
|
<Typography
|
|
as="h3"
|
|
sx={{
|
|
fontSize: 18,
|
|
fontWeight: 500,
|
|
mb: '10px'
|
|
}}
|
|
>
|
|
Basic Accordion
|
|
</Typography>
|
|
|
|
<Accordion className="bg-black">
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon />}
|
|
aria-controls="panel1a-content"
|
|
id="panel1a-header"
|
|
>
|
|
<Typography component="h1" fontWeight="500">Accordion 1</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Typography>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
|
malesuada lacus ex, sit amet blandit leo lobortis eget.
|
|
</Typography>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
|
|
<Accordion className="bg-black">
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon />}
|
|
aria-controls="panel2a-content"
|
|
id="panel2a-header"
|
|
>
|
|
<Typography component="h1" fontWeight="500">Accordion 2</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Typography>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
|
malesuada lacus ex, sit amet blandit leo lobortis eget.
|
|
</Typography>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
|
|
<Accordion disabled className="bg-black">
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon />}
|
|
aria-controls="panel3a-content"
|
|
id="panel3a-header"
|
|
>
|
|
<Typography component="h1" fontWeight="500">Disabled Accordion</Typography>
|
|
</AccordionSummary>
|
|
</Accordion>
|
|
</Card>
|
|
</>
|
|
);
|
|
}
|