first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,75 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user