FloatSystems/float-fleet
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
DESKTOP-GBA0BK8\Admin
2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/UIElements/Accordion/ControlledAccordion.js
+141
View File
@@ -0,0 +1,141 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Accordion from "@mui/material/Accordion";
import AccordionDetails from "@mui/material/AccordionDetails";
import AccordionSummary from "@mui/material/AccordionSummary";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
export default function ControlledAccordion() {
const [expanded, setExpanded] = React.useState(false);
const handleChange = (panel) => (event, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: "10px",
}}
>
Controlled Accordion
</Typography>
<Accordion
expanded={expanded === "panel1"}
onChange={handleChange("panel1")}
className="bg-black controlled-accordion"
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1bh-content"
id="panel1bh-header"
>
<Typography sx={{ width: "33%", flexShrink: 0, fontWeight: "500" }}>
General settings
</Typography>
<Typography sx={{ color: "text.secondary", fontWeight: "500" }}>
I am an accordion
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Nulla facilisi. Phasellus sollicitudin nulla et quam mattis
feugiat. Aliquam eget maximus est, id dignissim quam.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion
expanded={expanded === "panel2"}
onChange={handleChange("panel2")}
className="bg-black controlled-accordion"
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2bh-content"
id="panel2bh-header"
>
<Typography sx={{ width: "33%", flexShrink: 0, fontWeight: "500" }}>
Users
</Typography>
<Typography sx={{ color: "text.secondary", fontWeight: "500" }}>
You are currently not an owner
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Donec placerat, lectus sed mattis semper, neque lectus feugiat
lectus, varius pulvinar diam eros in elit. Pellentesque convallis
laoreet laoreet.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion
expanded={expanded === "panel3"}
onChange={handleChange("panel3")}
className="bg-black controlled-accordion"
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel3bh-content"
id="panel3bh-header"
>
<Typography sx={{ width: "33%", flexShrink: 0, fontWeight: "500" }}>
Advanced settings
</Typography>
<Typography sx={{ color: "text.secondary", fontWeight: "500" }}>
Filtering has been entirely disabled for whole web server
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer
sit amet egestas eros, vitae egestas augue. Duis vel est augue.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion
expanded={expanded === "panel4"}
onChange={handleChange("panel4")}
className="bg-black controlled-accordion"
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel4bh-content"
id="panel4bh-header"
>
<Typography sx={{ width: "33%", flexShrink: 0, fontWeight: "500" }}>
Personal data
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer
sit amet egestas eros, vitae egestas augue. Duis vel est augue.
</Typography>
</AccordionDetails>
</Accordion>
</Card>
</>
);
}