import { Helmet } from 'react-helmet-async' ; import PageTitle from 'src/components/PageTitle' ; import PageTitleWrapper from 'src/components/PageTitleWrapper' ; import { Container , Grid , Card , CardHeader , CardContent , Divider } from '@mui/material' ; import Accordion from '@mui/material/Accordion' ; import AccordionSummary from '@mui/material/AccordionSummary' ; import AccordionDetails from '@mui/material/AccordionDetails' ; import Typography from '@mui/material/Typography' ; import ExpandMoreIcon from '@mui/icons-material/ExpandMore' ; import Footer from 'src/components/Footer' ; function Accordions ( ) { return ( < > < Helmet > < title > Accordions - Components < /title> < /Helmet> < PageTitleWrapper > < PageTitle heading = "Accordions" subHeading = "Accordions contain creation flows and allow lightweight editing of an element." docs = "https://material-ui.com/components/accordion/" / > < /PageTitleWrapper> < Container maxWidth = "lg" > < Grid container direction = "row" justifyContent = "center" alignItems = "stretch" spacing = { 3 } > < Grid item xs = { 12 } > < Card > < CardHeader title = "Basic Example" / > < Divider /> < CardContent > < Accordion > < AccordionSummary expandIcon = { < ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header"> < Typography > 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 > < AccordionSummary expandIcon = { < ExpandMoreIcon />} aria-controls="panel2a-content" id="panel2a-header"> < Typography > 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 > < AccordionSummary expandIcon = { < ExpandMoreIcon />} aria-controls="panel3a-content" id="panel3a-header"> < Typography > Disabled Accordion < /Typography> < /AccordionSummary> < /Accordion> < /CardContent> < /Card> < /Grid> < /Grid> < /Container> < Footer / > < />); } export default Accordions ;