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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Alert from "@mui/material/Alert";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const Actions = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Actions
|
||||
</Typography>
|
||||
|
||||
<Stack sx={{ width: '100%' }} spacing={2}>
|
||||
<Alert onClose={() => {}}>This is a success alert — check it out!</Alert>
|
||||
<Alert
|
||||
action={
|
||||
<Button color="inherit" size="small">
|
||||
UNDO
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
This is a success alert — check it out!
|
||||
</Alert>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Actions;
|
||||
@@ -0,0 +1,48 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Alert from "@mui/material/Alert";
|
||||
import Stack from "@mui/material/Stack";
|
||||
|
||||
const BasicAlerts = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
className="card-dark-bg"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Basic Alerts
|
||||
</Typography>
|
||||
|
||||
<Stack sx={{ width: "100%" }} spacing={2}>
|
||||
<Alert severity="error">This is an error alert — check it out!</Alert>
|
||||
|
||||
<Alert severity="warning">
|
||||
This is a warning alert — check it out!
|
||||
</Alert>
|
||||
|
||||
<Alert severity="info">This is an info alert — check it out!</Alert>
|
||||
|
||||
<Alert severity="success">
|
||||
This is a success alert — check it out!
|
||||
</Alert>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BasicAlerts;
|
||||
@@ -0,0 +1,36 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Alert from '@mui/material/Alert';
|
||||
|
||||
const Color = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Color
|
||||
</Typography>
|
||||
|
||||
<Alert severity="success" color="info">
|
||||
This is a success alert — check it out!
|
||||
</Alert>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Color;
|
||||
@@ -0,0 +1,56 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Alert from "@mui/material/Alert";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import AlertTitle from '@mui/material/AlertTitle';
|
||||
|
||||
const DescriptionAlerts = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Description Alerts
|
||||
</Typography>
|
||||
|
||||
<Stack sx={{ width: '100%' }} spacing={2}>
|
||||
<Alert severity="error">
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
This is an error alert — <strong>check it out!</strong>
|
||||
</Alert>
|
||||
|
||||
<Alert severity="warning">
|
||||
<AlertTitle>Warning</AlertTitle>
|
||||
This is a warning alert — <strong>check it out!</strong>
|
||||
</Alert>
|
||||
|
||||
<Alert severity="info">
|
||||
<AlertTitle>Info</AlertTitle>
|
||||
This is an info alert — <strong>check it out!</strong>
|
||||
</Alert>
|
||||
|
||||
<Alert severity="success">
|
||||
<AlertTitle>Success</AlertTitle>
|
||||
This is a success alert — <strong>check it out!</strong>
|
||||
</Alert>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DescriptionAlerts;
|
||||
@@ -0,0 +1,48 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Alert from '@mui/material/Alert';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
const Filled = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Filled
|
||||
</Typography>
|
||||
|
||||
<Stack sx={{ width: '100%' }} spacing={2}>
|
||||
<Alert variant="filled" severity="error">
|
||||
This is an error alert — check it out!
|
||||
</Alert>
|
||||
<Alert variant="filled" severity="warning">
|
||||
This is a warning alert — check it out!
|
||||
</Alert>
|
||||
<Alert variant="filled" severity="info">
|
||||
This is an info alert — check it out!
|
||||
</Alert>
|
||||
<Alert variant="filled" severity="success">
|
||||
This is a success alert — check it out!
|
||||
</Alert>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Filled;
|
||||
@@ -0,0 +1,51 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Alert from "@mui/material/Alert";
|
||||
import CheckIcon from '@mui/icons-material/Check';
|
||||
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
const Icons = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Icons
|
||||
</Typography>
|
||||
|
||||
<Stack sx={{ width: '100%' }} spacing={2}>
|
||||
<Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
|
||||
This is a success alert — check it out!
|
||||
</Alert>
|
||||
<Alert
|
||||
iconMapping={{
|
||||
success: <CheckCircleOutlineIcon fontSize="inherit" />,
|
||||
}}
|
||||
>
|
||||
This is a success alert — check it out!
|
||||
</Alert>
|
||||
<Alert icon={false} severity="success">
|
||||
This is a success alert — check it out!
|
||||
</Alert>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Icons;
|
||||
@@ -0,0 +1,68 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Alert from "@mui/material/Alert";
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Collapse from '@mui/material/Collapse';
|
||||
import Button from '@mui/material/Button';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
|
||||
const Transition = () => {
|
||||
const [open, setOpen] = React.useState(true);
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Transition
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<Collapse in={open}>
|
||||
<Alert
|
||||
action={
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
color="inherit"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<CloseIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
}
|
||||
sx={{ mb: 2 }}
|
||||
>
|
||||
Close me!
|
||||
</Alert>
|
||||
</Collapse>
|
||||
<Button
|
||||
disabled={open}
|
||||
variant="outlined"
|
||||
onClick={() => {
|
||||
setOpen(true);
|
||||
}}
|
||||
>
|
||||
Re-open
|
||||
</Button>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Transition;
|
||||
@@ -0,0 +1,48 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Alert from '@mui/material/Alert';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
const Variants = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Variants
|
||||
</Typography>
|
||||
|
||||
<Stack sx={{ width: '100%' }} spacing={2}>
|
||||
<Alert variant="outlined" severity="error">
|
||||
This is an error alert — check it out!
|
||||
</Alert>
|
||||
<Alert variant="outlined" severity="warning">
|
||||
This is a warning alert — check it out!
|
||||
</Alert>
|
||||
<Alert variant="outlined" severity="info">
|
||||
This is an info alert — check it out!
|
||||
</Alert>
|
||||
<Alert variant="outlined" severity="success">
|
||||
This is a success alert — check it out!
|
||||
</Alert>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Variants;
|
||||
@@ -0,0 +1,172 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
|
||||
const ComboBox = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: "10px",
|
||||
}}
|
||||
>
|
||||
Combo Box
|
||||
</Typography>
|
||||
|
||||
<Autocomplete
|
||||
disablePortal
|
||||
id="combo-box-demo"
|
||||
options={top100Films}
|
||||
sx={{
|
||||
width: '100%',
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} label="Movie" />}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ComboBox;
|
||||
|
||||
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
|
||||
const top100Films = [
|
||||
{ label: "The Shawshank Redemption", year: 1994 },
|
||||
{ label: "The Godfather", year: 1972 },
|
||||
{ label: "The Godfather: Part II", year: 1974 },
|
||||
{ label: "The Dark Knight", year: 2008 },
|
||||
{ label: "12 Angry Men", year: 1957 },
|
||||
{ label: "Schindler's List", year: 1993 },
|
||||
{ label: "Pulp Fiction", year: 1994 },
|
||||
{
|
||||
label: "The Lord of the Rings: The Return of the King",
|
||||
year: 2003,
|
||||
},
|
||||
{ label: "The Good, the Bad and the Ugly", year: 1966 },
|
||||
{ label: "Fight Club", year: 1999 },
|
||||
{
|
||||
label: "The Lord of the Rings: The Fellowship of the Ring",
|
||||
year: 2001,
|
||||
},
|
||||
{
|
||||
label: "Star Wars: Episode V - The Empire Strikes Back",
|
||||
year: 1980,
|
||||
},
|
||||
{ label: "Forrest Gump", year: 1994 },
|
||||
{ label: "Inception", year: 2010 },
|
||||
{
|
||||
label: "The Lord of the Rings: The Two Towers",
|
||||
year: 2002,
|
||||
},
|
||||
{ label: "One Flew Over the Cuckoo's Nest", year: 1975 },
|
||||
{ label: "Goodfellas", year: 1990 },
|
||||
{ label: "The Matrix", year: 1999 },
|
||||
{ label: "Seven Samurai", year: 1954 },
|
||||
{
|
||||
label: "Star Wars: Episode IV - A New Hope",
|
||||
year: 1977,
|
||||
},
|
||||
{ label: "City of God", year: 2002 },
|
||||
{ label: "Se7en", year: 1995 },
|
||||
{ label: "The Silence of the Lambs", year: 1991 },
|
||||
{ label: "It's a Wonderful Life", year: 1946 },
|
||||
{ label: "Life Is Beautiful", year: 1997 },
|
||||
{ label: "The Usual Suspects", year: 1995 },
|
||||
{ label: "Léon: The Professional", year: 1994 },
|
||||
{ label: "Spirited Away", year: 2001 },
|
||||
{ label: "Saving Private Ryan", year: 1998 },
|
||||
{ label: "Once Upon a Time in the West", year: 1968 },
|
||||
{ label: "American History X", year: 1998 },
|
||||
{ label: "Interstellar", year: 2014 },
|
||||
{ label: "Casablanca", year: 1942 },
|
||||
{ label: "City Lights", year: 1931 },
|
||||
{ label: "Psycho", year: 1960 },
|
||||
{ label: "The Green Mile", year: 1999 },
|
||||
{ label: "The Intouchables", year: 2011 },
|
||||
{ label: "Modern Times", year: 1936 },
|
||||
{ label: "Raiders of the Lost Ark", year: 1981 },
|
||||
{ label: "Rear Window", year: 1954 },
|
||||
{ label: "The Pianist", year: 2002 },
|
||||
{ label: "The Departed", year: 2006 },
|
||||
{ label: "Terminator 2: Judgment Day", year: 1991 },
|
||||
{ label: "Back to the Future", year: 1985 },
|
||||
{ label: "Whiplash", year: 2014 },
|
||||
{ label: "Gladiator", year: 2000 },
|
||||
{ label: "Memento", year: 2000 },
|
||||
{ label: "The Prestige", year: 2006 },
|
||||
{ label: "The Lion King", year: 1994 },
|
||||
{ label: "Apocalypse Now", year: 1979 },
|
||||
{ label: "Alien", year: 1979 },
|
||||
{ label: "Sunset Boulevard", year: 1950 },
|
||||
{
|
||||
label:
|
||||
"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
|
||||
year: 1964,
|
||||
},
|
||||
{ label: "The Great Dictator", year: 1940 },
|
||||
{ label: "Cinema Paradiso", year: 1988 },
|
||||
{ label: "The Lives of Others", year: 2006 },
|
||||
{ label: "Grave of the Fireflies", year: 1988 },
|
||||
{ label: "Paths of Glory", year: 1957 },
|
||||
{ label: "Django Unchained", year: 2012 },
|
||||
{ label: "The Shining", year: 1980 },
|
||||
{ label: "WALL·E", year: 2008 },
|
||||
{ label: "American Beauty", year: 1999 },
|
||||
{ label: "The Dark Knight Rises", year: 2012 },
|
||||
{ label: "Princess Mononoke", year: 1997 },
|
||||
{ label: "Aliens", year: 1986 },
|
||||
{ label: "Oldboy", year: 2003 },
|
||||
{ label: "Once Upon a Time in America", year: 1984 },
|
||||
{ label: "Witness for the Prosecution", year: 1957 },
|
||||
{ label: "Das Boot", year: 1981 },
|
||||
{ label: "Citizen Kane", year: 1941 },
|
||||
{ label: "North by Northwest", year: 1959 },
|
||||
{ label: "Vertigo", year: 1958 },
|
||||
{
|
||||
label: "Star Wars: Episode VI - Return of the Jedi",
|
||||
year: 1983,
|
||||
},
|
||||
{ label: "Reservoir Dogs", year: 1992 },
|
||||
{ label: "Braveheart", year: 1995 },
|
||||
{ label: "M", year: 1931 },
|
||||
{ label: "Requiem for a Dream", year: 2000 },
|
||||
{ label: "Amélie", year: 2001 },
|
||||
{ label: "A Clockwork Orange", year: 1971 },
|
||||
{ label: "Like Stars on Earth", year: 2007 },
|
||||
{ label: "Taxi Driver", year: 1976 },
|
||||
{ label: "Lawrence of Arabia", year: 1962 },
|
||||
{ label: "Double Indemnity", year: 1944 },
|
||||
{
|
||||
label: "Eternal Sunshine of the Spotless Mind",
|
||||
year: 2004,
|
||||
},
|
||||
{ label: "Amadeus", year: 1984 },
|
||||
{ label: "To Kill a Mockingbird", year: 1962 },
|
||||
{ label: "Toy Story 3", year: 2010 },
|
||||
{ label: "Logan", year: 2017 },
|
||||
{ label: "Full Metal Jacket", year: 1987 },
|
||||
{ label: "Dangal", year: 2016 },
|
||||
{ label: "The Sting", year: 1973 },
|
||||
{ label: "2001: A Space Odyssey", year: 1968 },
|
||||
{ label: "Singin' in the Rain", year: 1952 },
|
||||
{ label: "Toy Story", year: 1995 },
|
||||
{ label: "Bicycle Thieves", year: 1948 },
|
||||
{ label: "The Kid", year: 1921 },
|
||||
{ label: "Inglourious Basterds", year: 2009 },
|
||||
{ label: "Snatch", year: 2000 },
|
||||
{ label: "3 Idiots", year: 2009 },
|
||||
{ label: "Monty Python and the Holy Grail", year: 1975 },
|
||||
];
|
||||
@@ -0,0 +1,494 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
|
||||
const CountrySelect = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: "10px",
|
||||
}}
|
||||
>
|
||||
Country Select
|
||||
</Typography>
|
||||
|
||||
<Autocomplete
|
||||
id="country-select-demo"
|
||||
sx={{ width: "100%" }}
|
||||
options={countries}
|
||||
autoHighlight
|
||||
getOptionLabel={(option) => option.label}
|
||||
renderOption={(props, option) => (
|
||||
<Box
|
||||
component="li"
|
||||
sx={{ "& > img": { mr: 2, flexShrink: 0 } }}
|
||||
{...props}
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
width="20"
|
||||
src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
|
||||
srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
|
||||
alt=""
|
||||
/>
|
||||
{option.label} ({option.code}) +{option.phone}
|
||||
</Box>
|
||||
)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Choose a country"
|
||||
inputProps={{
|
||||
...params.inputProps,
|
||||
autoComplete: "new-password", // disable autocomplete and autofill
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CountrySelect;
|
||||
|
||||
// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
|
||||
const countries = [
|
||||
{ code: "AD", label: "Andorra", phone: "376" },
|
||||
{
|
||||
code: "AE",
|
||||
label: "United Arab Emirates",
|
||||
phone: "971",
|
||||
},
|
||||
{ code: "AF", label: "Afghanistan", phone: "93" },
|
||||
{
|
||||
code: "AG",
|
||||
label: "Antigua and Barbuda",
|
||||
phone: "1-268",
|
||||
},
|
||||
{ code: "AI", label: "Anguilla", phone: "1-264" },
|
||||
{ code: "AL", label: "Albania", phone: "355" },
|
||||
{ code: "AM", label: "Armenia", phone: "374" },
|
||||
{ code: "AO", label: "Angola", phone: "244" },
|
||||
{ code: "AQ", label: "Antarctica", phone: "672" },
|
||||
{ code: "AR", label: "Argentina", phone: "54" },
|
||||
{ code: "AS", label: "American Samoa", phone: "1-684" },
|
||||
{ code: "AT", label: "Austria", phone: "43" },
|
||||
{
|
||||
code: "AU",
|
||||
label: "Australia",
|
||||
phone: "61",
|
||||
suggested: true,
|
||||
},
|
||||
{ code: "AW", label: "Aruba", phone: "297" },
|
||||
{ code: "AX", label: "Alland Islands", phone: "358" },
|
||||
{ code: "AZ", label: "Azerbaijan", phone: "994" },
|
||||
{
|
||||
code: "BA",
|
||||
label: "Bosnia and Herzegovina",
|
||||
phone: "387",
|
||||
},
|
||||
{ code: "BB", label: "Barbados", phone: "1-246" },
|
||||
{ code: "BD", label: "Bangladesh", phone: "880" },
|
||||
{ code: "BE", label: "Belgium", phone: "32" },
|
||||
{ code: "BF", label: "Burkina Faso", phone: "226" },
|
||||
{ code: "BG", label: "Bulgaria", phone: "359" },
|
||||
{ code: "BH", label: "Bahrain", phone: "973" },
|
||||
{ code: "BI", label: "Burundi", phone: "257" },
|
||||
{ code: "BJ", label: "Benin", phone: "229" },
|
||||
{ code: "BL", label: "Saint Barthelemy", phone: "590" },
|
||||
{ code: "BM", label: "Bermuda", phone: "1-441" },
|
||||
{ code: "BN", label: "Brunei Darussalam", phone: "673" },
|
||||
{ code: "BO", label: "Bolivia", phone: "591" },
|
||||
{ code: "BR", label: "Brazil", phone: "55" },
|
||||
{ code: "BS", label: "Bahamas", phone: "1-242" },
|
||||
{ code: "BT", label: "Bhutan", phone: "975" },
|
||||
{ code: "BV", label: "Bouvet Island", phone: "47" },
|
||||
{ code: "BW", label: "Botswana", phone: "267" },
|
||||
{ code: "BY", label: "Belarus", phone: "375" },
|
||||
{ code: "BZ", label: "Belize", phone: "501" },
|
||||
{
|
||||
code: "CA",
|
||||
label: "Canada",
|
||||
phone: "1",
|
||||
suggested: true,
|
||||
},
|
||||
{
|
||||
code: "CC",
|
||||
label: "Cocos (Keeling) Islands",
|
||||
phone: "61",
|
||||
},
|
||||
{
|
||||
code: "CD",
|
||||
label: "Congo, Democratic Republic of the",
|
||||
phone: "243",
|
||||
},
|
||||
{
|
||||
code: "CF",
|
||||
label: "Central African Republic",
|
||||
phone: "236",
|
||||
},
|
||||
{
|
||||
code: "CG",
|
||||
label: "Congo, Republic of the",
|
||||
phone: "242",
|
||||
},
|
||||
{ code: "CH", label: "Switzerland", phone: "41" },
|
||||
{ code: "CI", label: "Cote d'Ivoire", phone: "225" },
|
||||
{ code: "CK", label: "Cook Islands", phone: "682" },
|
||||
{ code: "CL", label: "Chile", phone: "56" },
|
||||
{ code: "CM", label: "Cameroon", phone: "237" },
|
||||
{ code: "CN", label: "China", phone: "86" },
|
||||
{ code: "CO", label: "Colombia", phone: "57" },
|
||||
{ code: "CR", label: "Costa Rica", phone: "506" },
|
||||
{ code: "CU", label: "Cuba", phone: "53" },
|
||||
{ code: "CV", label: "Cape Verde", phone: "238" },
|
||||
{ code: "CW", label: "Curacao", phone: "599" },
|
||||
{ code: "CX", label: "Christmas Island", phone: "61" },
|
||||
{ code: "CY", label: "Cyprus", phone: "357" },
|
||||
{ code: "CZ", label: "Czech Republic", phone: "420" },
|
||||
{
|
||||
code: "DE",
|
||||
label: "Germany",
|
||||
phone: "49",
|
||||
suggested: true,
|
||||
},
|
||||
{ code: "DJ", label: "Djibouti", phone: "253" },
|
||||
{ code: "DK", label: "Denmark", phone: "45" },
|
||||
{ code: "DM", label: "Dominica", phone: "1-767" },
|
||||
{
|
||||
code: "DO",
|
||||
label: "Dominican Republic",
|
||||
phone: "1-809",
|
||||
},
|
||||
{ code: "DZ", label: "Algeria", phone: "213" },
|
||||
{ code: "EC", label: "Ecuador", phone: "593" },
|
||||
{ code: "EE", label: "Estonia", phone: "372" },
|
||||
{ code: "EG", label: "Egypt", phone: "20" },
|
||||
{ code: "EH", label: "Western Sahara", phone: "212" },
|
||||
{ code: "ER", label: "Eritrea", phone: "291" },
|
||||
{ code: "ES", label: "Spain", phone: "34" },
|
||||
{ code: "ET", label: "Ethiopia", phone: "251" },
|
||||
{ code: "FI", label: "Finland", phone: "358" },
|
||||
{ code: "FJ", label: "Fiji", phone: "679" },
|
||||
{
|
||||
code: "FK",
|
||||
label: "Falkland Islands (Malvinas)",
|
||||
phone: "500",
|
||||
},
|
||||
{
|
||||
code: "FM",
|
||||
label: "Micronesia, Federated States of",
|
||||
phone: "691",
|
||||
},
|
||||
{ code: "FO", label: "Faroe Islands", phone: "298" },
|
||||
{
|
||||
code: "FR",
|
||||
label: "France",
|
||||
phone: "33",
|
||||
suggested: true,
|
||||
},
|
||||
{ code: "GA", label: "Gabon", phone: "241" },
|
||||
{ code: "GB", label: "United Kingdom", phone: "44" },
|
||||
{ code: "GD", label: "Grenada", phone: "1-473" },
|
||||
{ code: "GE", label: "Georgia", phone: "995" },
|
||||
{ code: "GF", label: "French Guiana", phone: "594" },
|
||||
{ code: "GG", label: "Guernsey", phone: "44" },
|
||||
{ code: "GH", label: "Ghana", phone: "233" },
|
||||
{ code: "GI", label: "Gibraltar", phone: "350" },
|
||||
{ code: "GL", label: "Greenland", phone: "299" },
|
||||
{ code: "GM", label: "Gambia", phone: "220" },
|
||||
{ code: "GN", label: "Guinea", phone: "224" },
|
||||
{ code: "GP", label: "Guadeloupe", phone: "590" },
|
||||
{ code: "GQ", label: "Equatorial Guinea", phone: "240" },
|
||||
{ code: "GR", label: "Greece", phone: "30" },
|
||||
{
|
||||
code: "GS",
|
||||
label: "South Georgia and the South Sandwich Islands",
|
||||
phone: "500",
|
||||
},
|
||||
{ code: "GT", label: "Guatemala", phone: "502" },
|
||||
{ code: "GU", label: "Guam", phone: "1-671" },
|
||||
{ code: "GW", label: "Guinea-Bissau", phone: "245" },
|
||||
{ code: "GY", label: "Guyana", phone: "592" },
|
||||
{ code: "HK", label: "Hong Kong", phone: "852" },
|
||||
{
|
||||
code: "HM",
|
||||
label: "Heard Island and McDonald Islands",
|
||||
phone: "672",
|
||||
},
|
||||
{ code: "HN", label: "Honduras", phone: "504" },
|
||||
{ code: "HR", label: "Croatia", phone: "385" },
|
||||
{ code: "HT", label: "Haiti", phone: "509" },
|
||||
{ code: "HU", label: "Hungary", phone: "36" },
|
||||
{ code: "ID", label: "Indonesia", phone: "62" },
|
||||
{ code: "IE", label: "Ireland", phone: "353" },
|
||||
{ code: "IL", label: "Israel", phone: "972" },
|
||||
{ code: "IM", label: "Isle of Man", phone: "44" },
|
||||
{ code: "IN", label: "India", phone: "91" },
|
||||
{
|
||||
code: "IO",
|
||||
label: "British Indian Ocean Territory",
|
||||
phone: "246",
|
||||
},
|
||||
{ code: "IQ", label: "Iraq", phone: "964" },
|
||||
{
|
||||
code: "IR",
|
||||
label: "Iran, Islamic Republic of",
|
||||
phone: "98",
|
||||
},
|
||||
{ code: "IS", label: "Iceland", phone: "354" },
|
||||
{ code: "IT", label: "Italy", phone: "39" },
|
||||
{ code: "JE", label: "Jersey", phone: "44" },
|
||||
{ code: "JM", label: "Jamaica", phone: "1-876" },
|
||||
{ code: "JO", label: "Jordan", phone: "962" },
|
||||
{
|
||||
code: "JP",
|
||||
label: "Japan",
|
||||
phone: "81",
|
||||
suggested: true,
|
||||
},
|
||||
{ code: "KE", label: "Kenya", phone: "254" },
|
||||
{ code: "KG", label: "Kyrgyzstan", phone: "996" },
|
||||
{ code: "KH", label: "Cambodia", phone: "855" },
|
||||
{ code: "KI", label: "Kiribati", phone: "686" },
|
||||
{ code: "KM", label: "Comoros", phone: "269" },
|
||||
{
|
||||
code: "KN",
|
||||
label: "Saint Kitts and Nevis",
|
||||
phone: "1-869",
|
||||
},
|
||||
{
|
||||
code: "KP",
|
||||
label: "Korea, Democratic People's Republic of",
|
||||
phone: "850",
|
||||
},
|
||||
{ code: "KR", label: "Korea, Republic of", phone: "82" },
|
||||
{ code: "KW", label: "Kuwait", phone: "965" },
|
||||
{ code: "KY", label: "Cayman Islands", phone: "1-345" },
|
||||
{ code: "KZ", label: "Kazakhstan", phone: "7" },
|
||||
{
|
||||
code: "LA",
|
||||
label: "Lao People's Democratic Republic",
|
||||
phone: "856",
|
||||
},
|
||||
{ code: "LB", label: "Lebanon", phone: "961" },
|
||||
{ code: "LC", label: "Saint Lucia", phone: "1-758" },
|
||||
{ code: "LI", label: "Liechtenstein", phone: "423" },
|
||||
{ code: "LK", label: "Sri Lanka", phone: "94" },
|
||||
{ code: "LR", label: "Liberia", phone: "231" },
|
||||
{ code: "LS", label: "Lesotho", phone: "266" },
|
||||
{ code: "LT", label: "Lithuania", phone: "370" },
|
||||
{ code: "LU", label: "Luxembourg", phone: "352" },
|
||||
{ code: "LV", label: "Latvia", phone: "371" },
|
||||
{ code: "LY", label: "Libya", phone: "218" },
|
||||
{ code: "MA", label: "Morocco", phone: "212" },
|
||||
{ code: "MC", label: "Monaco", phone: "377" },
|
||||
{
|
||||
code: "MD",
|
||||
label: "Moldova, Republic of",
|
||||
phone: "373",
|
||||
},
|
||||
{ code: "ME", label: "Montenegro", phone: "382" },
|
||||
{
|
||||
code: "MF",
|
||||
label: "Saint Martin (French part)",
|
||||
phone: "590",
|
||||
},
|
||||
{ code: "MG", label: "Madagascar", phone: "261" },
|
||||
{ code: "MH", label: "Marshall Islands", phone: "692" },
|
||||
{
|
||||
code: "MK",
|
||||
label: "Macedonia, the Former Yugoslav Republic of",
|
||||
phone: "389",
|
||||
},
|
||||
{ code: "ML", label: "Mali", phone: "223" },
|
||||
{ code: "MM", label: "Myanmar", phone: "95" },
|
||||
{ code: "MN", label: "Mongolia", phone: "976" },
|
||||
{ code: "MO", label: "Macao", phone: "853" },
|
||||
{
|
||||
code: "MP",
|
||||
label: "Northern Mariana Islands",
|
||||
phone: "1-670",
|
||||
},
|
||||
{ code: "MQ", label: "Martinique", phone: "596" },
|
||||
{ code: "MR", label: "Mauritania", phone: "222" },
|
||||
{ code: "MS", label: "Montserrat", phone: "1-664" },
|
||||
{ code: "MT", label: "Malta", phone: "356" },
|
||||
{ code: "MU", label: "Mauritius", phone: "230" },
|
||||
{ code: "MV", label: "Maldives", phone: "960" },
|
||||
{ code: "MW", label: "Malawi", phone: "265" },
|
||||
{ code: "MX", label: "Mexico", phone: "52" },
|
||||
{ code: "MY", label: "Malaysia", phone: "60" },
|
||||
{ code: "MZ", label: "Mozambique", phone: "258" },
|
||||
{ code: "NA", label: "Namibia", phone: "264" },
|
||||
{ code: "NC", label: "New Caledonia", phone: "687" },
|
||||
{ code: "NE", label: "Niger", phone: "227" },
|
||||
{ code: "NF", label: "Norfolk Island", phone: "672" },
|
||||
{ code: "NG", label: "Nigeria", phone: "234" },
|
||||
{ code: "NI", label: "Nicaragua", phone: "505" },
|
||||
{ code: "NL", label: "Netherlands", phone: "31" },
|
||||
{ code: "NO", label: "Norway", phone: "47" },
|
||||
{ code: "NP", label: "Nepal", phone: "977" },
|
||||
{ code: "NR", label: "Nauru", phone: "674" },
|
||||
{ code: "NU", label: "Niue", phone: "683" },
|
||||
{ code: "NZ", label: "New Zealand", phone: "64" },
|
||||
{ code: "OM", label: "Oman", phone: "968" },
|
||||
{ code: "PA", label: "Panama", phone: "507" },
|
||||
{ code: "PE", label: "Peru", phone: "51" },
|
||||
{ code: "PF", label: "French Polynesia", phone: "689" },
|
||||
{ code: "PG", label: "Papua New Guinea", phone: "675" },
|
||||
{ code: "PH", label: "Philippines", phone: "63" },
|
||||
{ code: "PK", label: "Pakistan", phone: "92" },
|
||||
{ code: "PL", label: "Poland", phone: "48" },
|
||||
{
|
||||
code: "PM",
|
||||
label: "Saint Pierre and Miquelon",
|
||||
phone: "508",
|
||||
},
|
||||
{ code: "PN", label: "Pitcairn", phone: "870" },
|
||||
{ code: "PR", label: "Puerto Rico", phone: "1" },
|
||||
{
|
||||
code: "PS",
|
||||
label: "Palestine, State of",
|
||||
phone: "970",
|
||||
},
|
||||
{ code: "PT", label: "Portugal", phone: "351" },
|
||||
{ code: "PW", label: "Palau", phone: "680" },
|
||||
{ code: "PY", label: "Paraguay", phone: "595" },
|
||||
{ code: "QA", label: "Qatar", phone: "974" },
|
||||
{ code: "RE", label: "Reunion", phone: "262" },
|
||||
{ code: "RO", label: "Romania", phone: "40" },
|
||||
{ code: "RS", label: "Serbia", phone: "381" },
|
||||
{ code: "RU", label: "Russian Federation", phone: "7" },
|
||||
{ code: "RW", label: "Rwanda", phone: "250" },
|
||||
{ code: "SA", label: "Saudi Arabia", phone: "966" },
|
||||
{ code: "SB", label: "Solomon Islands", phone: "677" },
|
||||
{ code: "SC", label: "Seychelles", phone: "248" },
|
||||
{ code: "SD", label: "Sudan", phone: "249" },
|
||||
{ code: "SE", label: "Sweden", phone: "46" },
|
||||
{ code: "SG", label: "Singapore", phone: "65" },
|
||||
{ code: "SH", label: "Saint Helena", phone: "290" },
|
||||
{ code: "SI", label: "Slovenia", phone: "386" },
|
||||
{
|
||||
code: "SJ",
|
||||
label: "Svalbard and Jan Mayen",
|
||||
phone: "47",
|
||||
},
|
||||
{ code: "SK", label: "Slovakia", phone: "421" },
|
||||
{ code: "SL", label: "Sierra Leone", phone: "232" },
|
||||
{ code: "SM", label: "San Marino", phone: "378" },
|
||||
{ code: "SN", label: "Senegal", phone: "221" },
|
||||
{ code: "SO", label: "Somalia", phone: "252" },
|
||||
{ code: "SR", label: "Suriname", phone: "597" },
|
||||
{ code: "SS", label: "South Sudan", phone: "211" },
|
||||
{
|
||||
code: "ST",
|
||||
label: "Sao Tome and Principe",
|
||||
phone: "239",
|
||||
},
|
||||
{ code: "SV", label: "El Salvador", phone: "503" },
|
||||
{
|
||||
code: "SX",
|
||||
label: "Sint Maarten (Dutch part)",
|
||||
phone: "1-721",
|
||||
},
|
||||
{
|
||||
code: "SY",
|
||||
label: "Syrian Arab Republic",
|
||||
phone: "963",
|
||||
},
|
||||
{ code: "SZ", label: "Swaziland", phone: "268" },
|
||||
{
|
||||
code: "TC",
|
||||
label: "Turks and Caicos Islands",
|
||||
phone: "1-649",
|
||||
},
|
||||
{ code: "TD", label: "Chad", phone: "235" },
|
||||
{
|
||||
code: "TF",
|
||||
label: "French Southern Territories",
|
||||
phone: "262",
|
||||
},
|
||||
{ code: "TG", label: "Togo", phone: "228" },
|
||||
{ code: "TH", label: "Thailand", phone: "66" },
|
||||
{ code: "TJ", label: "Tajikistan", phone: "992" },
|
||||
{ code: "TK", label: "Tokelau", phone: "690" },
|
||||
{ code: "TL", label: "Timor-Leste", phone: "670" },
|
||||
{ code: "TM", label: "Turkmenistan", phone: "993" },
|
||||
{ code: "TN", label: "Tunisia", phone: "216" },
|
||||
{ code: "TO", label: "Tonga", phone: "676" },
|
||||
{ code: "TR", label: "Turkey", phone: "90" },
|
||||
{
|
||||
code: "TT",
|
||||
label: "Trinidad and Tobago",
|
||||
phone: "1-868",
|
||||
},
|
||||
{ code: "TV", label: "Tuvalu", phone: "688" },
|
||||
{
|
||||
code: "TW",
|
||||
label: "Taiwan, Republic of China",
|
||||
phone: "886",
|
||||
},
|
||||
{
|
||||
code: "TZ",
|
||||
label: "United Republic of Tanzania",
|
||||
phone: "255",
|
||||
},
|
||||
{ code: "UA", label: "Ukraine", phone: "380" },
|
||||
{ code: "UG", label: "Uganda", phone: "256" },
|
||||
{
|
||||
code: "US",
|
||||
label: "United States",
|
||||
phone: "1",
|
||||
suggested: true,
|
||||
},
|
||||
{ code: "UY", label: "Uruguay", phone: "598" },
|
||||
{ code: "UZ", label: "Uzbekistan", phone: "998" },
|
||||
{
|
||||
code: "VA",
|
||||
label: "Holy See (Vatican City State)",
|
||||
phone: "379",
|
||||
},
|
||||
{
|
||||
code: "VC",
|
||||
label: "Saint Vincent and the Grenadines",
|
||||
phone: "1-784",
|
||||
},
|
||||
{ code: "VE", label: "Venezuela", phone: "58" },
|
||||
{
|
||||
code: "VG",
|
||||
label: "British Virgin Islands",
|
||||
phone: "1-284",
|
||||
},
|
||||
{
|
||||
code: "VI",
|
||||
label: "US Virgin Islands",
|
||||
phone: "1-340",
|
||||
},
|
||||
{ code: "VN", label: "Vietnam", phone: "84" },
|
||||
{ code: "VU", label: "Vanuatu", phone: "678" },
|
||||
{ code: "WF", label: "Wallis and Futuna", phone: "681" },
|
||||
{ code: "WS", label: "Samoa", phone: "685" },
|
||||
{ code: "XK", label: "Kosovo", phone: "383" },
|
||||
{ code: "YE", label: "Yemen", phone: "967" },
|
||||
{ code: "YT", label: "Mayotte", phone: "262" },
|
||||
{ code: "ZA", label: "South Africa", phone: "27" },
|
||||
{ code: "ZM", label: "Zambia", phone: "260" },
|
||||
{ code: "ZW", label: "Zimbabwe", phone: "263" },
|
||||
];
|
||||
@@ -0,0 +1,46 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import TextareaAutosize from '@mui/base/TextareaAutosize';
|
||||
|
||||
const CustomizeTextareaComponent = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Customize Textarea Component
|
||||
</Typography>
|
||||
|
||||
<TextareaAutosize
|
||||
aria-label="minimum height"
|
||||
minRows={8}
|
||||
placeholder="Minimum 3 rows"
|
||||
style={{
|
||||
width: "100%",
|
||||
background: '#FFFFFF',
|
||||
border: '1px solid #B1B5C3',
|
||||
borderRadius: '10px',
|
||||
padding: '15px'
|
||||
}}
|
||||
className="dark-textarea"
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomizeTextareaComponent;
|
||||
@@ -0,0 +1,363 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import PropTypes from "prop-types";
|
||||
import useAutocomplete from '@mui/base/useAutocomplete';
|
||||
import CheckIcon from "@mui/icons-material/Check";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import { autocompleteClasses } from "@mui/material/Autocomplete";
|
||||
|
||||
const Root = styled("div")(
|
||||
({ theme }) => `
|
||||
color: ${
|
||||
theme.palette.mode === "dark" ? "rgba(255,255,255,0.65)" : "rgba(0,0,0,.85)"
|
||||
};
|
||||
font-size: 14px;
|
||||
`
|
||||
);
|
||||
|
||||
const Label = styled("label")`
|
||||
padding: 0 0 4px;
|
||||
line-height: 1.5;
|
||||
display: block;
|
||||
`;
|
||||
|
||||
const InputWrapper = styled("div")(
|
||||
({ theme }) => `
|
||||
width: 300px;
|
||||
border: 1px solid ${theme.palette.mode === "dark" ? "#434343" : "#d9d9d9"};
|
||||
background-color: ${theme.palette.mode === "dark" ? "#141414" : "#fff"};
|
||||
border-radius: 4px;
|
||||
padding: 1px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&:hover {
|
||||
border-color: ${theme.palette.mode === "dark" ? "#177ddc" : "#40a9ff"};
|
||||
}
|
||||
|
||||
&.focused {
|
||||
border-color: ${theme.palette.mode === "dark" ? "#177ddc" : "#40a9ff"};
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
& input {
|
||||
background-color: ${theme.palette.mode === "dark" ? "#141414" : "#fff"};
|
||||
color: ${
|
||||
theme.palette.mode === "dark"
|
||||
? "rgba(255,255,255,0.65)"
|
||||
: "rgba(0,0,0,.85)"
|
||||
};
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
padding: 4px 6px;
|
||||
width: 0;
|
||||
min-width: 30px;
|
||||
flex-grow: 1;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
}
|
||||
`
|
||||
);
|
||||
|
||||
function Tag(props) {
|
||||
const { label, onDelete, ...other } = props;
|
||||
return (
|
||||
<div {...other}>
|
||||
<span>{label}</span>
|
||||
<CloseIcon onClick={onDelete} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Tag.propTypes = {
|
||||
label: PropTypes.string.isRequired,
|
||||
onDelete: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const StyledTag = styled(Tag)(
|
||||
({ theme }) => `
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
margin: 2px;
|
||||
line-height: 22px;
|
||||
background-color: ${
|
||||
theme.palette.mode === "dark" ? "rgba(255,255,255,0.08)" : "#fafafa"
|
||||
};
|
||||
border: 1px solid ${theme.palette.mode === "dark" ? "#303030" : "#e8e8e8"};
|
||||
border-radius: 2px;
|
||||
box-sizing: content-box;
|
||||
padding: 0 4px 0 10px;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&:focus {
|
||||
border-color: ${theme.palette.mode === "dark" ? "#177ddc" : "#40a9ff"};
|
||||
background-color: ${theme.palette.mode === "dark" ? "#003b57" : "#e6f7ff"};
|
||||
}
|
||||
|
||||
& span {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
& svg {
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
`
|
||||
);
|
||||
|
||||
const Listbox = styled("ul")(
|
||||
({ theme }) => `
|
||||
width: 300px;
|
||||
margin: 2px 0 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
list-style: none;
|
||||
background-color: ${theme.palette.mode === "dark" ? "#141414" : "#fff"};
|
||||
overflow: auto;
|
||||
max-height: 250px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1;
|
||||
|
||||
& li {
|
||||
padding: 5px 12px;
|
||||
display: flex;
|
||||
|
||||
& span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
& svg {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& li[aria-selected='true'] {
|
||||
background-color: ${theme.palette.mode === "dark" ? "#2b2b2b" : "#fafafa"};
|
||||
font-weight: 500;
|
||||
|
||||
& svg {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
& li.${autocompleteClasses.focused} {
|
||||
background-color: ${theme.palette.mode === "dark" ? "#003b57" : "#e6f7ff"};
|
||||
cursor: pointer;
|
||||
|
||||
& svg {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
`
|
||||
);
|
||||
|
||||
const CustomizedHook = () => {
|
||||
const {
|
||||
getRootProps,
|
||||
getInputLabelProps,
|
||||
getInputProps,
|
||||
getTagProps,
|
||||
getListboxProps,
|
||||
getOptionProps,
|
||||
groupedOptions,
|
||||
value,
|
||||
focused,
|
||||
setAnchorEl,
|
||||
} = useAutocomplete({
|
||||
id: "customized-hook-demo",
|
||||
defaultValue: [top100Films[1]],
|
||||
multiple: true,
|
||||
options: top100Films,
|
||||
getOptionLabel: (option) => option.title,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: "10px",
|
||||
}}
|
||||
>
|
||||
Customized Hook
|
||||
</Typography>
|
||||
|
||||
<Root>
|
||||
<div {...getRootProps()}>
|
||||
<Label {...getInputLabelProps()}>Customized hook</Label>
|
||||
<InputWrapper
|
||||
ref={setAnchorEl}
|
||||
className={focused ? "focused" : ""}
|
||||
>
|
||||
{value.map((option, index) => (
|
||||
<StyledTag label={option.title} {...getTagProps({ index })} />
|
||||
))}
|
||||
|
||||
<input {...getInputProps()} />
|
||||
</InputWrapper>
|
||||
</div>
|
||||
{groupedOptions.length > 0 ? (
|
||||
<Listbox {...getListboxProps()}>
|
||||
{groupedOptions.map((option, index) => (
|
||||
<li {...getOptionProps({ option, index })}>
|
||||
<span>{option.title}</span>
|
||||
<CheckIcon fontSize="small" />
|
||||
</li>
|
||||
))}
|
||||
</Listbox>
|
||||
) : null}
|
||||
</Root>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomizedHook;
|
||||
|
||||
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
|
||||
const top100Films = [
|
||||
{ title: "The Shawshank Redemption", year: 1994 },
|
||||
{ title: "The Godfather", year: 1972 },
|
||||
{ title: "The Godfather: Part II", year: 1974 },
|
||||
{ title: "The Dark Knight", year: 2008 },
|
||||
{ title: "12 Angry Men", year: 1957 },
|
||||
{ title: "Schindler's List", year: 1993 },
|
||||
{ title: "Pulp Fiction", year: 1994 },
|
||||
{
|
||||
title: "The Lord of the Rings: The Return of the King",
|
||||
year: 2003,
|
||||
},
|
||||
{ title: "The Good, the Bad and the Ugly", year: 1966 },
|
||||
{ title: "Fight Club", year: 1999 },
|
||||
{
|
||||
title: "The Lord of the Rings: The Fellowship of the Ring",
|
||||
year: 2001,
|
||||
},
|
||||
{
|
||||
title: "Star Wars: Episode V - The Empire Strikes Back",
|
||||
year: 1980,
|
||||
},
|
||||
{ title: "Forrest Gump", year: 1994 },
|
||||
{ title: "Inception", year: 2010 },
|
||||
{
|
||||
title: "The Lord of the Rings: The Two Towers",
|
||||
year: 2002,
|
||||
},
|
||||
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
|
||||
{ title: "Goodfellas", year: 1990 },
|
||||
{ title: "The Matrix", year: 1999 },
|
||||
{ title: "Seven Samurai", year: 1954 },
|
||||
{
|
||||
title: "Star Wars: Episode IV - A New Hope",
|
||||
year: 1977,
|
||||
},
|
||||
{ title: "City of God", year: 2002 },
|
||||
{ title: "Se7en", year: 1995 },
|
||||
{ title: "The Silence of the Lambs", year: 1991 },
|
||||
{ title: "It's a Wonderful Life", year: 1946 },
|
||||
{ title: "Life Is Beautiful", year: 1997 },
|
||||
{ title: "The Usual Suspects", year: 1995 },
|
||||
{ title: "Léon: The Professional", year: 1994 },
|
||||
{ title: "Spirited Away", year: 2001 },
|
||||
{ title: "Saving Private Ryan", year: 1998 },
|
||||
{ title: "Once Upon a Time in the West", year: 1968 },
|
||||
{ title: "American History X", year: 1998 },
|
||||
{ title: "Interstellar", year: 2014 },
|
||||
{ title: "Casablanca", year: 1942 },
|
||||
{ title: "City Lights", year: 1931 },
|
||||
{ title: "Psycho", year: 1960 },
|
||||
{ title: "The Green Mile", year: 1999 },
|
||||
{ title: "The Intouchables", year: 2011 },
|
||||
{ title: "Modern Times", year: 1936 },
|
||||
{ title: "Raiders of the Lost Ark", year: 1981 },
|
||||
{ title: "Rear Window", year: 1954 },
|
||||
{ title: "The Pianist", year: 2002 },
|
||||
{ title: "The Departed", year: 2006 },
|
||||
{ title: "Terminator 2: Judgment Day", year: 1991 },
|
||||
{ title: "Back to the Future", year: 1985 },
|
||||
{ title: "Whiplash", year: 2014 },
|
||||
{ title: "Gladiator", year: 2000 },
|
||||
{ title: "Memento", year: 2000 },
|
||||
{ title: "The Prestige", year: 2006 },
|
||||
{ title: "The Lion King", year: 1994 },
|
||||
{ title: "Apocalypse Now", year: 1979 },
|
||||
{ title: "Alien", year: 1979 },
|
||||
{ title: "Sunset Boulevard", year: 1950 },
|
||||
{
|
||||
title:
|
||||
"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
|
||||
year: 1964,
|
||||
},
|
||||
{ title: "The Great Dictator", year: 1940 },
|
||||
{ title: "Cinema Paradiso", year: 1988 },
|
||||
{ title: "The Lives of Others", year: 2006 },
|
||||
{ title: "Grave of the Fireflies", year: 1988 },
|
||||
{ title: "Paths of Glory", year: 1957 },
|
||||
{ title: "Django Unchained", year: 2012 },
|
||||
{ title: "The Shining", year: 1980 },
|
||||
{ title: "WALL·E", year: 2008 },
|
||||
{ title: "American Beauty", year: 1999 },
|
||||
{ title: "The Dark Knight Rises", year: 2012 },
|
||||
{ title: "Princess Mononoke", year: 1997 },
|
||||
{ title: "Aliens", year: 1986 },
|
||||
{ title: "Oldboy", year: 2003 },
|
||||
{ title: "Once Upon a Time in America", year: 1984 },
|
||||
{ title: "Witness for the Prosecution", year: 1957 },
|
||||
{ title: "Das Boot", year: 1981 },
|
||||
{ title: "Citizen Kane", year: 1941 },
|
||||
{ title: "North by Northwest", year: 1959 },
|
||||
{ title: "Vertigo", year: 1958 },
|
||||
{
|
||||
title: "Star Wars: Episode VI - Return of the Jedi",
|
||||
year: 1983,
|
||||
},
|
||||
{ title: "Reservoir Dogs", year: 1992 },
|
||||
{ title: "Braveheart", year: 1995 },
|
||||
{ title: "M", year: 1931 },
|
||||
{ title: "Requiem for a Dream", year: 2000 },
|
||||
{ title: "Amélie", year: 2001 },
|
||||
{ title: "A Clockwork Orange", year: 1971 },
|
||||
{ title: "Like Stars on Earth", year: 2007 },
|
||||
{ title: "Taxi Driver", year: 1976 },
|
||||
{ title: "Lawrence of Arabia", year: 1962 },
|
||||
{ title: "Double Indemnity", year: 1944 },
|
||||
{
|
||||
title: "Eternal Sunshine of the Spotless Mind",
|
||||
year: 2004,
|
||||
},
|
||||
{ title: "Amadeus", year: 1984 },
|
||||
{ title: "To Kill a Mockingbird", year: 1962 },
|
||||
{ title: "Toy Story 3", year: 2010 },
|
||||
{ title: "Logan", year: 2017 },
|
||||
{ title: "Full Metal Jacket", year: 1987 },
|
||||
{ title: "Dangal", year: 2016 },
|
||||
{ title: "The Sting", year: 1973 },
|
||||
{ title: "2001: A Space Odyssey", year: 1968 },
|
||||
{ title: "Singin' in the Rain", year: 1952 },
|
||||
{ title: "Toy Story", year: 1995 },
|
||||
{ title: "Bicycle Thieves", year: 1948 },
|
||||
{ title: "The Kid", year: 1921 },
|
||||
{ title: "Inglourious Basterds", year: 2009 },
|
||||
{ title: "Snatch", year: 2000 },
|
||||
{ title: "3 Idiots", year: 2009 },
|
||||
{ title: "Monty Python and the Holy Grail", year: 1975 },
|
||||
];
|
||||
@@ -0,0 +1,174 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Autocomplete from '@mui/material/Autocomplete';
|
||||
import TextField from '@mui/material/TextField';
|
||||
|
||||
const LimitTags= () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
LimitTags
|
||||
</Typography>
|
||||
|
||||
<Autocomplete
|
||||
multiple
|
||||
limitTags={2}
|
||||
id="multiple-limit-tags"
|
||||
options={top100Films}
|
||||
getOptionLabel={(option) => option.title}
|
||||
defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label="limitTags" placeholder="Favorites" />
|
||||
)}
|
||||
sx={{ width: '500px' }}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LimitTags;
|
||||
|
||||
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
|
||||
const top100Films = [
|
||||
{ title: 'The Shawshank Redemption', year: 1994 },
|
||||
{ title: 'The Godfather', year: 1972 },
|
||||
{ title: 'The Godfather: Part II', year: 1974 },
|
||||
{ title: 'The Dark Knight', year: 2008 },
|
||||
{ title: '12 Angry Men', year: 1957 },
|
||||
{ title: "Schindler's List", year: 1993 },
|
||||
{ title: 'Pulp Fiction', year: 1994 },
|
||||
{
|
||||
title: 'The Lord of the Rings: The Return of the King',
|
||||
year: 2003,
|
||||
},
|
||||
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
|
||||
{ title: 'Fight Club', year: 1999 },
|
||||
{
|
||||
title: 'The Lord of the Rings: The Fellowship of the Ring',
|
||||
year: 2001,
|
||||
},
|
||||
{
|
||||
title: 'Star Wars: Episode V - The Empire Strikes Back',
|
||||
year: 1980,
|
||||
},
|
||||
{ title: 'Forrest Gump', year: 1994 },
|
||||
{ title: 'Inception', year: 2010 },
|
||||
{
|
||||
title: 'The Lord of the Rings: The Two Towers',
|
||||
year: 2002,
|
||||
},
|
||||
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
|
||||
{ title: 'Goodfellas', year: 1990 },
|
||||
{ title: 'The Matrix', year: 1999 },
|
||||
{ title: 'Seven Samurai', year: 1954 },
|
||||
{
|
||||
title: 'Star Wars: Episode IV - A New Hope',
|
||||
year: 1977,
|
||||
},
|
||||
{ title: 'City of God', year: 2002 },
|
||||
{ title: 'Se7en', year: 1995 },
|
||||
{ title: 'The Silence of the Lambs', year: 1991 },
|
||||
{ title: "It's a Wonderful Life", year: 1946 },
|
||||
{ title: 'Life Is Beautiful', year: 1997 },
|
||||
{ title: 'The Usual Suspects', year: 1995 },
|
||||
{ title: 'Léon: The Professional', year: 1994 },
|
||||
{ title: 'Spirited Away', year: 2001 },
|
||||
{ title: 'Saving Private Ryan', year: 1998 },
|
||||
{ title: 'Once Upon a Time in the West', year: 1968 },
|
||||
{ title: 'American History X', year: 1998 },
|
||||
{ title: 'Interstellar', year: 2014 },
|
||||
{ title: 'Casablanca', year: 1942 },
|
||||
{ title: 'City Lights', year: 1931 },
|
||||
{ title: 'Psycho', year: 1960 },
|
||||
{ title: 'The Green Mile', year: 1999 },
|
||||
{ title: 'The Intouchables', year: 2011 },
|
||||
{ title: 'Modern Times', year: 1936 },
|
||||
{ title: 'Raiders of the Lost Ark', year: 1981 },
|
||||
{ title: 'Rear Window', year: 1954 },
|
||||
{ title: 'The Pianist', year: 2002 },
|
||||
{ title: 'The Departed', year: 2006 },
|
||||
{ title: 'Terminator 2: Judgment Day', year: 1991 },
|
||||
{ title: 'Back to the Future', year: 1985 },
|
||||
{ title: 'Whiplash', year: 2014 },
|
||||
{ title: 'Gladiator', year: 2000 },
|
||||
{ title: 'Memento', year: 2000 },
|
||||
{ title: 'The Prestige', year: 2006 },
|
||||
{ title: 'The Lion King', year: 1994 },
|
||||
{ title: 'Apocalypse Now', year: 1979 },
|
||||
{ title: 'Alien', year: 1979 },
|
||||
{ title: 'Sunset Boulevard', year: 1950 },
|
||||
{
|
||||
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
|
||||
year: 1964,
|
||||
},
|
||||
{ title: 'The Great Dictator', year: 1940 },
|
||||
{ title: 'Cinema Paradiso', year: 1988 },
|
||||
{ title: 'The Lives of Others', year: 2006 },
|
||||
{ title: 'Grave of the Fireflies', year: 1988 },
|
||||
{ title: 'Paths of Glory', year: 1957 },
|
||||
{ title: 'Django Unchained', year: 2012 },
|
||||
{ title: 'The Shining', year: 1980 },
|
||||
{ title: 'WALL·E', year: 2008 },
|
||||
{ title: 'American Beauty', year: 1999 },
|
||||
{ title: 'The Dark Knight Rises', year: 2012 },
|
||||
{ title: 'Princess Mononoke', year: 1997 },
|
||||
{ title: 'Aliens', year: 1986 },
|
||||
{ title: 'Oldboy', year: 2003 },
|
||||
{ title: 'Once Upon a Time in America', year: 1984 },
|
||||
{ title: 'Witness for the Prosecution', year: 1957 },
|
||||
{ title: 'Das Boot', year: 1981 },
|
||||
{ title: 'Citizen Kane', year: 1941 },
|
||||
{ title: 'North by Northwest', year: 1959 },
|
||||
{ title: 'Vertigo', year: 1958 },
|
||||
{
|
||||
title: 'Star Wars: Episode VI - Return of the Jedi',
|
||||
year: 1983,
|
||||
},
|
||||
{ title: 'Reservoir Dogs', year: 1992 },
|
||||
{ title: 'Braveheart', year: 1995 },
|
||||
{ title: 'M', year: 1931 },
|
||||
{ title: 'Requiem for a Dream', year: 2000 },
|
||||
{ title: 'Amélie', year: 2001 },
|
||||
{ title: 'A Clockwork Orange', year: 1971 },
|
||||
{ title: 'Like Stars on Earth', year: 2007 },
|
||||
{ title: 'Taxi Driver', year: 1976 },
|
||||
{ title: 'Lawrence of Arabia', year: 1962 },
|
||||
{ title: 'Double Indemnity', year: 1944 },
|
||||
{
|
||||
title: 'Eternal Sunshine of the Spotless Mind',
|
||||
year: 2004,
|
||||
},
|
||||
{ title: 'Amadeus', year: 1984 },
|
||||
{ title: 'To Kill a Mockingbird', year: 1962 },
|
||||
{ title: 'Toy Story 3', year: 2010 },
|
||||
{ title: 'Logan', year: 2017 },
|
||||
{ title: 'Full Metal Jacket', year: 1987 },
|
||||
{ title: 'Dangal', year: 2016 },
|
||||
{ title: 'The Sting', year: 1973 },
|
||||
{ title: '2001: A Space Odyssey', year: 1968 },
|
||||
{ title: "Singin' in the Rain", year: 1952 },
|
||||
{ title: 'Toy Story', year: 1995 },
|
||||
{ title: 'Bicycle Thieves', year: 1948 },
|
||||
{ title: 'The Kid', year: 1921 },
|
||||
{ title: 'Inglourious Basterds', year: 2009 },
|
||||
{ title: 'Snatch', year: 2000 },
|
||||
{ title: '3 Idiots', year: 2009 },
|
||||
{ title: 'Monty Python and the Holy Grail', year: 1975 },
|
||||
];
|
||||
@@ -0,0 +1,64 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import AvatarGroup from '@mui/material/AvatarGroup';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const GroupUserExample = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '30px'
|
||||
}}
|
||||
>
|
||||
Group User Example
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<AvatarGroup max={4}>
|
||||
<Avatar alt="Remy Sharp" src="/images/user1.png" />
|
||||
<Avatar alt="Travis Howard" src="/images/user2.png" />
|
||||
<Avatar alt="Cindy Baker" src="/images/user3.png" />
|
||||
<Avatar alt="Agnes Walker" src="/images/user4.png" />
|
||||
<Avatar alt="Trevor Henderson" src="/images/user5.png" />
|
||||
</AvatarGroup>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: 'capitalize'
|
||||
}}
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupUserExample;
|
||||
@@ -0,0 +1,43 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import AvatarGroup from '@mui/material/AvatarGroup';
|
||||
|
||||
const Grouped = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
Grouped
|
||||
</Typography>
|
||||
|
||||
<AvatarGroup
|
||||
max={4}
|
||||
>
|
||||
<Avatar alt="Remy Sharp" src="/images/user1.png" />
|
||||
<Avatar alt="Travis Howard" src="/images/user2.png" />
|
||||
<Avatar alt="Cindy Baker" src="/images/user3.png" />
|
||||
<Avatar alt="Agnes Walker" src="/images/user4.png" />
|
||||
<Avatar alt="Trevor Henderson" src="/images/user5.png" />
|
||||
</AvatarGroup>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Grouped;
|
||||
@@ -0,0 +1,61 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import { deepOrange, green, pink, red } from '@mui/material/colors';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import FolderIcon from '@mui/icons-material/Folder';
|
||||
import PageviewIcon from '@mui/icons-material/Pageview';
|
||||
import AssignmentIcon from '@mui/icons-material/Assignment';
|
||||
import PersonIcon from '@mui/icons-material/Person';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
|
||||
const IconAvatars = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
Icon Avatars
|
||||
</Typography>
|
||||
|
||||
<Stack direction="row" spacing={2} className="avatars-gap">
|
||||
<Avatar>
|
||||
<FolderIcon />
|
||||
</Avatar>
|
||||
|
||||
<Avatar sx={{ bgcolor: pink[500] }}>
|
||||
<PageviewIcon />
|
||||
</Avatar>
|
||||
|
||||
<Avatar sx={{ bgcolor: green[500] }}>
|
||||
<AssignmentIcon />
|
||||
</Avatar>
|
||||
|
||||
<Avatar sx={{ bgcolor: deepOrange[500] }}>
|
||||
<PersonIcon />
|
||||
</Avatar>
|
||||
|
||||
<Avatar sx={{ bgcolor: red[500] }}>
|
||||
<DeleteIcon />
|
||||
</Avatar>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconAvatars;
|
||||
@@ -0,0 +1,45 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
const ImageAvatars = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
Image Avatars
|
||||
</Typography>
|
||||
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
className="avatars-gap"
|
||||
>
|
||||
<Avatar alt="Remy Sharp" src="/images/user1.png" />
|
||||
<Avatar alt="Travis Howard" src="/images/user2.png" />
|
||||
<Avatar alt="Cindy Baker" src="/images/user3.png" />
|
||||
<Avatar alt="Cindy Baker" src="/images/user4.png" />
|
||||
<Avatar alt="Cindy Baker" src="/images/user5.png" />
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImageAvatars;
|
||||
@@ -0,0 +1,68 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
function stringToColor(string) {
|
||||
let hash = 0;
|
||||
let i;
|
||||
|
||||
/* eslint-disable no-bitwise */
|
||||
for (i = 0; i < string.length; i += 1) {
|
||||
hash = string.charCodeAt(i) + ((hash << 5) - hash);
|
||||
}
|
||||
|
||||
let color = '#';
|
||||
|
||||
for (i = 0; i < 3; i += 1) {
|
||||
const value = (hash >> (i * 8)) & 0xff;
|
||||
color += `00${value.toString(16)}`.slice(-2);
|
||||
}
|
||||
/* eslint-enable no-bitwise */
|
||||
|
||||
return color;
|
||||
}
|
||||
|
||||
function stringAvatar(name) {
|
||||
return {
|
||||
sx: {
|
||||
bgcolor: stringToColor(name),
|
||||
},
|
||||
children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
|
||||
};
|
||||
}
|
||||
|
||||
const LetterAvatars = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
Letter Avatars
|
||||
</Typography>
|
||||
|
||||
<Stack direction="row" spacing={2} className="avatars-gap">
|
||||
<Avatar {...stringAvatar('Kent Dodds')} />
|
||||
<Avatar {...stringAvatar('Jed Watson')} />
|
||||
<Avatar {...stringAvatar('Tim Neutkens')} />
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LetterAvatars;
|
||||
@@ -0,0 +1,133 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import FacebookIcon from '@mui/icons-material/Facebook';
|
||||
import TwitterIcon from '@mui/icons-material/Twitter';
|
||||
import LinkedInIcon from '@mui/icons-material/LinkedIn';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
const SingleUserExample = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
Single User Example
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/profile.png"
|
||||
alt="User"
|
||||
width="55px"
|
||||
height="55px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
|
||||
<Box className="ml-12px">
|
||||
<Typography as="h3" fontWeight="500" fontSize="15px">
|
||||
Andrew Burns
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="13px">
|
||||
Programmer
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Stack direction="row">
|
||||
<a
|
||||
href="https://www.facebook.com/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="ml-1"
|
||||
>
|
||||
<IconButton
|
||||
aria-label="facebook"
|
||||
size="small"
|
||||
color="primary"
|
||||
style={{
|
||||
background: '#EDEFF5'
|
||||
}}
|
||||
>
|
||||
<FacebookIcon
|
||||
fontSize="inherit"
|
||||
/>
|
||||
</IconButton>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://www.twitter.com/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="ml-1"
|
||||
>
|
||||
<IconButton
|
||||
aria-label="twitter"
|
||||
size="small"
|
||||
color="primary"
|
||||
style={{
|
||||
background: '#EDEFF5'
|
||||
}}
|
||||
>
|
||||
<TwitterIcon
|
||||
fontSize="inherit"
|
||||
/>
|
||||
</IconButton>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://www.linkedin.com/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="ml-1"
|
||||
>
|
||||
<IconButton
|
||||
aria-label="LinkedInIcon"
|
||||
size="small"
|
||||
color="primary"
|
||||
style={{
|
||||
background: '#EDEFF5'
|
||||
}}
|
||||
>
|
||||
<LinkedInIcon
|
||||
fontSize="inherit"
|
||||
/>
|
||||
</IconButton>
|
||||
</a>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleUserExample;
|
||||
@@ -0,0 +1,65 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
const SizesAvatars = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
Sizes Avatars
|
||||
</Typography>
|
||||
|
||||
<Stack direction="row" alignItems="center" spacing={2} className="avatars-gap">
|
||||
<Avatar
|
||||
alt="Remy Sharp"
|
||||
src="/images/profile.png"
|
||||
sx={{ width: 60, height: 60 }}
|
||||
/>
|
||||
|
||||
<Avatar
|
||||
alt="Remy Sharp"
|
||||
src="/images/profile.png"
|
||||
sx={{ width: 55, height: 55 }}
|
||||
/>
|
||||
|
||||
<Avatar
|
||||
alt="Remy Sharp"
|
||||
src="/images/profile.png"
|
||||
sx={{ width: 50, height: 50 }}
|
||||
/>
|
||||
|
||||
<Avatar
|
||||
alt="Remy Sharp"
|
||||
src="/images/profile.png"
|
||||
sx={{ width: 45, height: 45 }}
|
||||
/>
|
||||
|
||||
<Avatar
|
||||
alt="Remy Sharp"
|
||||
src="/images/profile.png"
|
||||
sx={{ width: 40, height: 40 }}
|
||||
/>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SizesAvatars;
|
||||
@@ -0,0 +1,40 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import AvatarGroup from '@mui/material/AvatarGroup';
|
||||
|
||||
const TotalAvatars = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
Total Avatars
|
||||
</Typography>
|
||||
|
||||
<AvatarGroup total={24}>
|
||||
<Avatar alt="Remy Sharp" src="/images/user1.png" />
|
||||
<Avatar alt="Travis Howard" src="/images/user2.png" />
|
||||
<Avatar alt="Agnes Walker" src="/images/user3.png" />
|
||||
<Avatar alt="Trevor Henderson" src="/images/user4.png" />
|
||||
</AvatarGroup>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TotalAvatars;
|
||||
@@ -0,0 +1,89 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Badge from '@mui/material/Badge';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
const StyledBadge = styled(Badge)(({ theme }) => ({
|
||||
'& .MuiBadge-badge': {
|
||||
backgroundColor: '#44b700',
|
||||
color: '#44b700',
|
||||
boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
borderRadius: '50%',
|
||||
animation: 'ripple 1.2s infinite ease-in-out',
|
||||
border: '1px solid currentColor',
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
'@keyframes ripple': {
|
||||
'0%': {
|
||||
transform: 'scale(.8)',
|
||||
opacity: 1,
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(2.4)',
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const SmallAvatar = styled(Avatar)(({ theme }) => ({
|
||||
width: 22,
|
||||
height: 22,
|
||||
border: `2px solid ${theme.palette.background.paper}`,
|
||||
}));
|
||||
|
||||
const WithBadge = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
With Badge
|
||||
</Typography>
|
||||
|
||||
<Stack direction="row" spacing={2} className="avatars-gap">
|
||||
<StyledBadge
|
||||
overlap="circular"
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
|
||||
variant="dot"
|
||||
>
|
||||
<Avatar alt="Remy Sharp" src="/images/user1.png" />
|
||||
</StyledBadge>
|
||||
<Badge
|
||||
overlap="circular"
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
|
||||
badgeContent={
|
||||
<SmallAvatar alt="Remy Sharp" src="/images/user2.png" />
|
||||
}
|
||||
>
|
||||
<Avatar alt="Travis Howard" src="/images/user2.png" />
|
||||
</Badge>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WithBadge;
|
||||
@@ -0,0 +1,50 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Badge from '@mui/material/Badge';
|
||||
import MailIcon from '@mui/icons-material/Mail';
|
||||
|
||||
function notificationsLabel(count) {
|
||||
if (count === 0) {
|
||||
return 'no notifications';
|
||||
}
|
||||
if (count > 99) {
|
||||
return 'more than 99 notifications';
|
||||
}
|
||||
return `${count} notifications`;
|
||||
}
|
||||
|
||||
const Accessibility = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
Accessibility
|
||||
</Typography>
|
||||
|
||||
<IconButton aria-label={notificationsLabel(100)}>
|
||||
<Badge badgeContent={100} color="primary">
|
||||
<MailIcon fontSize="large" />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Accessibility;
|
||||
@@ -0,0 +1,56 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Badge from '@mui/material/Badge';
|
||||
|
||||
const shapeStyles = { bgcolor: 'primary.main', width: 40, height: 40 };
|
||||
const shapeCircleStyles = { borderRadius: '50%' };
|
||||
const rectangle = <Box component="span" sx={shapeStyles} />;
|
||||
const circle = (
|
||||
<Box component="span" sx={{ ...shapeStyles, ...shapeCircleStyles }} />
|
||||
);
|
||||
|
||||
const BadgeOverlap = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
Badge Overlap
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={3} direction="row">
|
||||
<Badge color="danger" badgeContent=" ">
|
||||
{rectangle}
|
||||
</Badge>
|
||||
<Badge color="danger" badgeContent=" " variant="dot">
|
||||
{rectangle}
|
||||
</Badge>
|
||||
<Badge color="danger" overlap="circular" badgeContent=" ">
|
||||
{circle}
|
||||
</Badge>
|
||||
<Badge color="danger" overlap="circular" badgeContent=" " variant="dot">
|
||||
{circle}
|
||||
</Badge>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BadgeOverlap;
|
||||
@@ -0,0 +1,62 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Badge from '@mui/material/Badge';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import MailIcon from '@mui/icons-material/Mail';
|
||||
import NotificationsIcon from '@mui/icons-material/Notifications';
|
||||
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
|
||||
|
||||
const BasicBadge = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
Basic Badge
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={3} direction="row" className="gadge-gap">
|
||||
<Badge badgeContent={4} color="primary">
|
||||
<MailIcon color="action" fontSize="large" />
|
||||
</Badge>
|
||||
|
||||
<Badge
|
||||
badgeContent={4}
|
||||
color="danger"
|
||||
sx={{
|
||||
color: '#fff'
|
||||
}}
|
||||
>
|
||||
<NotificationsIcon color="action" fontSize="large" />
|
||||
</Badge>
|
||||
|
||||
<Badge
|
||||
badgeContent={4}
|
||||
color="success"
|
||||
style={{
|
||||
color: '#fff'
|
||||
}}
|
||||
>
|
||||
<ShoppingCartIcon color="action" fontSize="large" />
|
||||
</Badge>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BasicBadge;
|
||||
@@ -0,0 +1,96 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Badge from '@mui/material/Badge';
|
||||
import ButtonGroup from '@mui/material/ButtonGroup';
|
||||
import Button from '@mui/material/Button';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import RemoveIcon from '@mui/icons-material/Remove';
|
||||
import MailIcon from '@mui/icons-material/Mail';
|
||||
import Switch from '@mui/material/Switch';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
|
||||
const Dynamic = () => {
|
||||
|
||||
const [count, setCount] = React.useState(1);
|
||||
const [invisible, setInvisible] = React.useState(false);
|
||||
|
||||
const handleBadgeVisibility = () => {
|
||||
setInvisible(!invisible);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
Dynamic
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
color: 'action.active',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
'& > *': {
|
||||
marginBottom: 2,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Badge color="primary" badgeContent={count} className="mr-4">
|
||||
<MailIcon />
|
||||
</Badge>
|
||||
|
||||
<ButtonGroup className="mr-4">
|
||||
<Button
|
||||
aria-label="reduce"
|
||||
onClick={() => {
|
||||
setCount(Math.max(count - 1, 0));
|
||||
}}
|
||||
>
|
||||
<RemoveIcon fontSize="small" />
|
||||
</Button>
|
||||
<Button
|
||||
aria-label="increase"
|
||||
onClick={() => {
|
||||
setCount(count + 1);
|
||||
}}
|
||||
>
|
||||
<AddIcon fontSize="small" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Badge color="primary" variant="dot" invisible={invisible} className="mr-4">
|
||||
<MailIcon />
|
||||
</Badge>
|
||||
<FormControlLabel
|
||||
sx={{ color: 'text.primary' }}
|
||||
control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />}
|
||||
label="Show Badge"
|
||||
className="mr-4"
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dynamic;
|
||||
@@ -0,0 +1,49 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Badge from '@mui/material/Badge';
|
||||
import MailIcon from '@mui/icons-material/Mail';
|
||||
|
||||
const MaximumValue = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
Maximum Value
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={4} direction="row" sx={{ color: 'action.active' }} className="gadge-gap">
|
||||
<Badge
|
||||
color="primary"
|
||||
badgeContent={99}
|
||||
>
|
||||
<MailIcon fontSize="large" />
|
||||
</Badge>
|
||||
<Badge color="primary" badgeContent={100}>
|
||||
<MailIcon fontSize="large" />
|
||||
</Badge>
|
||||
<Badge color="primary" badgeContent={1000} max={999}>
|
||||
<MailIcon fontSize="large" />
|
||||
</Badge>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MaximumValue;
|
||||
@@ -0,0 +1,58 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Fab from '@mui/material/Fab';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import FavoriteIcon from '@mui/icons-material/Favorite';
|
||||
import NavigationIcon from '@mui/icons-material/Navigation';
|
||||
|
||||
const BasicFAB = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Basic Favorite
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ '& > :not(style)': { m: 1 } }}>
|
||||
<Fab color="primary" aria-label="add">
|
||||
<AddIcon sx={{ color: "#fff !important" }} />
|
||||
</Fab>
|
||||
|
||||
<Fab color="secondary" aria-label="edit">
|
||||
<EditIcon sx={{ color: "#fff !important" }} />
|
||||
</Fab>
|
||||
|
||||
<Fab variant="extended">
|
||||
<NavigationIcon
|
||||
className="mr-1"
|
||||
/>
|
||||
Navigate
|
||||
</Fab>
|
||||
|
||||
<Fab disabled aria-label="like" sx={{ backgroundColor: "rgba(117, 127, 239, 0.1) !important" }}>
|
||||
<FavoriteIcon />
|
||||
</Fab>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BasicFAB;
|
||||
@@ -0,0 +1,87 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const BlockButtons = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Block Buttons
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Secondary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="success"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlockButtons;
|
||||
@@ -0,0 +1,170 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Button from '@mui/material/Button';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import SendIcon from '@mui/icons-material/Send';
|
||||
import PersonIcon from '@mui/icons-material/Person';
|
||||
import CheckIcon from '@mui/icons-material/Check';
|
||||
import InfoIcon from '@mui/icons-material/Info';
|
||||
import WarningIcon from '@mui/icons-material/Warning';
|
||||
|
||||
const ButtonsWithIcon = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px',
|
||||
}}
|
||||
>
|
||||
Buttons With Icon
|
||||
</Typography>
|
||||
|
||||
<Stack
|
||||
sx={{
|
||||
display: 'inline-block'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
startIcon={<PersonIcon sx={{ color: '#fff !important' }} />}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
startIcon={<AddIcon sx={{ color: '#fff !important' }} />}
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Secondary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
startIcon={<CheckIcon sx={{ color: '#fff !important' }} />}
|
||||
variant="contained"
|
||||
color="success"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
startIcon={<InfoIcon sx={{ color: '#fff !important' }} />}
|
||||
variant="contained"
|
||||
color="info"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Info
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
startIcon={<WarningIcon sx={{ color: '#fff !important' }} />}
|
||||
variant="contained"
|
||||
color="warning"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
startIcon={<DeleteIcon sx={{ color: '#fff !important' }} />}
|
||||
variant="contained"
|
||||
color="danger"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Danger
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
startIcon={<SendIcon sx={{ color: '#fff !important' }} />}
|
||||
variant="contained"
|
||||
color="dark"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ButtonsWithIcon;
|
||||
@@ -0,0 +1,156 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const DefaultButtons = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px',
|
||||
}}
|
||||
>
|
||||
Default Buttons
|
||||
</Typography>
|
||||
|
||||
<Stack
|
||||
sx={{
|
||||
display: 'inline-block'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Secondary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="success"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="info"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Info
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="warning"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="danger"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Danger
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="dark"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DefaultButtons;
|
||||
@@ -0,0 +1,54 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import LoadingButton from '@mui/lab/LoadingButton';
|
||||
import SaveIcon from '@mui/icons-material/Save';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
const Loading = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Loading
|
||||
</Typography>
|
||||
|
||||
<Stack direction="row" spacing={2}>
|
||||
<LoadingButton loading variant="outlined" className="for-dark-border">
|
||||
Submit
|
||||
</LoadingButton>
|
||||
|
||||
<LoadingButton loading loadingIndicator="Loading…" variant="outlined" className="for-dark-border whiteColor">
|
||||
Fetch data
|
||||
</LoadingButton>
|
||||
|
||||
<LoadingButton
|
||||
loading
|
||||
loadingPosition="start"
|
||||
startIcon={<SaveIcon />}
|
||||
variant="outlined"
|
||||
className="for-dark-border"
|
||||
>
|
||||
Save
|
||||
</LoadingButton>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Loading;
|
||||
@@ -0,0 +1,143 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const OutlineButtons = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Outline Buttons
|
||||
</Typography>
|
||||
|
||||
<Stack
|
||||
sx={{
|
||||
display: 'inline-block'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px primary"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px secondary"
|
||||
>
|
||||
Secondary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="success"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px success"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="info"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px info"
|
||||
>
|
||||
Info
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="warning"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px warning"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="danger"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px danger"
|
||||
>
|
||||
Danger
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="dark"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px dark"
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default OutlineButtons;
|
||||
@@ -0,0 +1,143 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const OutlineRoundedButtons = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Outline Rounded Buttons
|
||||
</Typography>
|
||||
|
||||
<Stack
|
||||
sx={{
|
||||
display: 'inline-block'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px primary"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px secondary"
|
||||
>
|
||||
Secondary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="success"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px success"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="info"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px info"
|
||||
>
|
||||
Info
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="warning"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px warning"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="danger"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px danger"
|
||||
>
|
||||
Danger
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="dark"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default OutlineRoundedButtons;
|
||||
@@ -0,0 +1,156 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const RoundedButtons = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px',
|
||||
}}
|
||||
>
|
||||
Rounded Buttons
|
||||
</Typography>
|
||||
|
||||
<Stack
|
||||
sx={{
|
||||
display: 'inline-block'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Secondary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="success"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="info"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Info
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="warning"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="danger"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Danger
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="dark"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default RoundedButtons;
|
||||
@@ -0,0 +1,81 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const SizesButtons = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Sizes
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ '& button': { m: 1 } }}>
|
||||
<div>
|
||||
<Button size="small">Small</Button>
|
||||
<Button size="medium">Medium</Button>
|
||||
<Button size="large">Large</Button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button variant="outlined" size="small">
|
||||
Small
|
||||
</Button>
|
||||
|
||||
<Button variant="outlined" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
|
||||
<Button variant="outlined" size="large">
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
sx={{ color: "#fff !important" }}
|
||||
>
|
||||
Small
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
sx={{ color: "#fff !important" }}
|
||||
>
|
||||
Medium
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
sx={{ color: "#fff !important" }}
|
||||
>
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SizesButtons;
|
||||
@@ -0,0 +1,144 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const SoftButtons = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Soft Buttons
|
||||
</Typography>
|
||||
|
||||
<Stack
|
||||
sx={{
|
||||
display: 'inline-block'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.1)',
|
||||
color: '#757FEF',
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
mt: '10px'
|
||||
}}
|
||||
className="mr-10px primary"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.1)',
|
||||
color: '#818093',
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
mt: '10px'
|
||||
}}
|
||||
className="mr-10px secondary"
|
||||
>
|
||||
Secondary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.1)',
|
||||
color: '#00B69B',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
}}
|
||||
className="mr-10px success"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.1)',
|
||||
color: '#2DB6F5',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
}}
|
||||
className="mr-10px info"
|
||||
>
|
||||
Info
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.1)',
|
||||
color: '#FFBC2B',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
}}
|
||||
className="mr-10px warning"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.1)',
|
||||
color: '#EE368C',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
}}
|
||||
className="mr-10px danger"
|
||||
>
|
||||
Danger
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.1)',
|
||||
color: '#260944',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SoftButtons;
|
||||
@@ -0,0 +1,46 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardActions from '@mui/material/CardActions';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import Button from '@mui/material/Button';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
const bull = (
|
||||
<Box
|
||||
component="span"
|
||||
sx={{ display: 'inline-block', mx: '2px', transform: 'scale(0.8)' }}
|
||||
>
|
||||
•
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default function BasicCard() {
|
||||
return (
|
||||
<Card sx={{ mb: '15px' }}>
|
||||
<CardContent>
|
||||
<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
|
||||
Word of the Day
|
||||
</Typography>
|
||||
|
||||
<Typography variant="h5" component="div">
|
||||
be{bull}nev{bull}o{bull}lent
|
||||
</Typography>
|
||||
|
||||
<Typography sx={{ mb: 1.5 }} color="text.secondary">
|
||||
adjective
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body2">
|
||||
well meaning and kindly.
|
||||
<br />
|
||||
{'"a benevolent smile"'}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
|
||||
<CardActions>
|
||||
<Button size="small">Learn More</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
.cardWithBgImg {
|
||||
border-radius: 10px;
|
||||
padding: 25px 20px;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
.cardWithBgImg::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
|
||||
border-radius: 10px;
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
import * as React from "react";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import Card from "@mui/material/Card";
|
||||
import CardHeader from "@mui/material/CardHeader";
|
||||
import CardMedia from "@mui/material/CardMedia";
|
||||
import CardContent from "@mui/material/CardContent";
|
||||
import CardActions from "@mui/material/CardActions";
|
||||
import Collapse from "@mui/material/Collapse";
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { red } from "@mui/material/colors";
|
||||
import FavoriteIcon from "@mui/icons-material/Favorite";
|
||||
import ShareIcon from "@mui/icons-material/Share";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
||||
|
||||
const ExpandMore = styled((props) => {
|
||||
const { expand, ...other } = props;
|
||||
return <IconButton {...other} />;
|
||||
})(({ theme, expand }) => ({
|
||||
transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
|
||||
marginLeft: "auto",
|
||||
transition: theme.transitions.create("transform", {
|
||||
duration: theme.transitions.duration.shortest,
|
||||
}),
|
||||
}));
|
||||
|
||||
export default function ComplexInteraction() {
|
||||
const [expanded, setExpanded] = React.useState(false);
|
||||
|
||||
const handleExpandClick = () => {
|
||||
setExpanded(!expanded);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card sx={{ mb: "15px" }}>
|
||||
<CardHeader
|
||||
avatar={
|
||||
<Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
|
||||
R
|
||||
</Avatar>
|
||||
}
|
||||
action={
|
||||
<IconButton aria-label="settings">
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
}
|
||||
title="Shrimp and Chorizo Paella"
|
||||
subheader="September 14, 2016"
|
||||
/>
|
||||
|
||||
<CardMedia
|
||||
component="img"
|
||||
height="194"
|
||||
image="/images/paella.jpg"
|
||||
alt="Paella dish"
|
||||
/>
|
||||
<CardContent>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
This impressive paella is a perfect party dish and a fun meal to cook
|
||||
together with your guests. Add 1 cup of frozen peas along with the
|
||||
mussels, if you like.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
|
||||
<CardActions disableSpacing>
|
||||
<IconButton aria-label="add to favorites">
|
||||
<FavoriteIcon />
|
||||
</IconButton>
|
||||
|
||||
<IconButton aria-label="share">
|
||||
<ShareIcon />
|
||||
</IconButton>
|
||||
|
||||
<ExpandMore
|
||||
expand={expanded}
|
||||
onClick={handleExpandClick}
|
||||
aria-expanded={expanded}
|
||||
aria-label="show more"
|
||||
>
|
||||
<ExpandMoreIcon />
|
||||
</ExpandMore>
|
||||
</CardActions>
|
||||
|
||||
<Collapse in={expanded} timeout="auto" unmountOnExit>
|
||||
<CardContent>
|
||||
<Typography paragraph>Method:</Typography>
|
||||
|
||||
<Typography paragraph>
|
||||
Heat 1/2 cup of the broth in a pot until simmering, add saffron and
|
||||
set aside for 10 minutes.
|
||||
</Typography>
|
||||
|
||||
<Typography paragraph>
|
||||
Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet
|
||||
over medium-high heat. Add chicken, shrimp and chorizo, and cook,
|
||||
stirring occasionally until lightly browned, 6 to 8 minutes.
|
||||
Transfer shrimp to a large plate and set aside, leaving chicken and
|
||||
chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes,
|
||||
onion, salt and pepper, and cook, stirring often until thickened and
|
||||
fragrant, about 10 minutes. Add saffron broth and remaining 4 1/2
|
||||
cups chicken broth; bring to a boil.
|
||||
</Typography>
|
||||
|
||||
<Typography paragraph>
|
||||
Add rice and stir very gently to distribute. Top with artichokes and
|
||||
peppers, and cook without stirring, until most of the liquid is
|
||||
absorbed, 15 to 18 minutes. Reduce heat to medium-low, add reserved
|
||||
shrimp and mussels, tucking them down into the rice, and cook again
|
||||
without stirring, until mussels have opened and rice is just tender,
|
||||
5 to 7 minutes more. (Discard any mussels that don't open.)
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
Set aside off of the heat to let rest for 10 minutes, and then
|
||||
serve.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Collapse>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import * as React from 'react';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardActions from '@mui/material/CardActions';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import CardMedia from '@mui/material/CardMedia';
|
||||
import Button from '@mui/material/Button';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
export default function Media() {
|
||||
return (
|
||||
<Card sx={{ mb: '15px' }}>
|
||||
<CardMedia
|
||||
sx={{ height: 140 }}
|
||||
image="/images/contemplative-reptile.jpg"
|
||||
title="green iguana"
|
||||
/>
|
||||
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h5" component="div">
|
||||
Lizard
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Lizards are a widespread group of squamate reptiles, with over 6,000
|
||||
species, ranging across all continents except Antarctica
|
||||
</Typography>
|
||||
</CardContent>
|
||||
|
||||
<CardActions>
|
||||
<Button size="small">Share</Button>
|
||||
<Button size="small">Learn More</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import * as React from 'react';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import Box from '@mui/material/Box';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import CardMedia from '@mui/material/CardMedia';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import SkipPreviousIcon from '@mui/icons-material/SkipPrevious';
|
||||
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
|
||||
import SkipNextIcon from '@mui/icons-material/SkipNext';
|
||||
|
||||
export default function UIControls() {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Card sx={{ display: 'flex', mb: '15px' }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<CardContent sx={{ flex: '1 0 auto' }}>
|
||||
<Typography component="div" variant="h6">
|
||||
Live From Space
|
||||
</Typography>
|
||||
|
||||
<Typography variant="subtitle1" color="text.secondary" component="div">
|
||||
Mac Miller
|
||||
</Typography>
|
||||
</CardContent>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', pl: 1, pb: 1 }}>
|
||||
<IconButton aria-label="previous">
|
||||
{theme.direction === 'rtl' ? <SkipNextIcon /> : <SkipPreviousIcon />}
|
||||
</IconButton>
|
||||
|
||||
<IconButton aria-label="play/pause">
|
||||
<PlayArrowIcon sx={{ height: 38, width: 38 }} />
|
||||
</IconButton>
|
||||
|
||||
<IconButton aria-label="next">
|
||||
{theme.direction === 'rtl' ? <SkipPreviousIcon /> : <SkipNextIcon />}
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<CardMedia
|
||||
component="img"
|
||||
sx={{ maxWidth: 190 }}
|
||||
image="/images/live-from-space.jpg"
|
||||
alt="Live from space album cover"
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
|
||||
const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
|
||||
|
||||
export default function Basic() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Basic
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<Checkbox {...label} defaultChecked />
|
||||
<Checkbox {...label} />
|
||||
<Checkbox {...label} disabled />
|
||||
<Checkbox {...label} disabled checked />
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import { pink } from '@mui/material/colors';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
|
||||
const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
|
||||
|
||||
export default function Color() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Color
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<Checkbox {...label} defaultChecked />
|
||||
|
||||
<Checkbox {...label} defaultChecked color="secondary" />
|
||||
|
||||
<Checkbox {...label} defaultChecked color="success" />
|
||||
|
||||
<Checkbox {...label} defaultChecked color="default" />
|
||||
|
||||
<Checkbox
|
||||
{...label}
|
||||
defaultChecked
|
||||
sx={{
|
||||
color: pink[800],
|
||||
'&.Mui-checked': {
|
||||
color: pink[500],
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
|
||||
export default function Controlled() {
|
||||
|
||||
const [checked, setChecked] = React.useState(true);
|
||||
|
||||
const handleChange = (event) => {
|
||||
setChecked(event.target.checked);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Controlled
|
||||
</Typography>
|
||||
|
||||
<Checkbox
|
||||
checked={checked}
|
||||
onChange={handleChange}
|
||||
inputProps={{ 'aria-label': 'controlled' }}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
|
||||
import Favorite from '@mui/icons-material/Favorite';
|
||||
import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
|
||||
import BookmarkIcon from '@mui/icons-material/Bookmark';
|
||||
|
||||
const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
|
||||
|
||||
export default function Icon() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Icon
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<Checkbox {...label} icon={<FavoriteBorder />} checkedIcon={<Favorite />} />
|
||||
<Checkbox
|
||||
{...label}
|
||||
icon={<BookmarkBorderIcon />}
|
||||
checkedIcon={<BookmarkIcon />}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import FormGroup from '@mui/material/FormGroup';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
|
||||
export default function Label() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
With Label
|
||||
</Typography>
|
||||
|
||||
<FormGroup>
|
||||
<FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
|
||||
<FormControlLabel disabled control={<Checkbox />} label="Disabled" />
|
||||
</FormGroup>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
|
||||
const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
|
||||
|
||||
export default function Size() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Size
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<Checkbox {...label} defaultChecked size="small" />
|
||||
<Checkbox {...label} defaultChecked />
|
||||
<Checkbox
|
||||
{...label}
|
||||
defaultChecked
|
||||
sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
export default function Basic() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Basic
|
||||
</Typography>
|
||||
|
||||
<Stack direction="row" spacing={1} className="chip-gap-for-rtl">
|
||||
<Chip label="Chip Filled" />
|
||||
<Chip label="Chip Outlined" variant="outlined" />
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
export default function ChipActions() {
|
||||
|
||||
const handleClick = () => {
|
||||
console.info('You clicked the Chip.');
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Chip Actions
|
||||
</Typography>
|
||||
|
||||
<Stack direction="row" spacing={1} className="chip-gap-for-rtl">
|
||||
<Chip label="Clickable" onClick={handleClick} />
|
||||
<Chip label="Clickable" variant="outlined" onClick={handleClick} />
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
export default function ChipAdornments() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Chip Adornments
|
||||
</Typography>
|
||||
|
||||
<Stack direction="row" spacing={1} className="chip-gap-for-rtl">
|
||||
<Chip avatar={<Avatar>M</Avatar>} label="Avatar" />
|
||||
<Chip
|
||||
avatar={<Avatar alt="Natacha" src="/images/user1.png" />}
|
||||
label="Avatar"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import TagFacesIcon from '@mui/icons-material/TagFaces';
|
||||
|
||||
const ListItem = styled('li')(({ theme }) => ({
|
||||
margin: theme.spacing(0.5),
|
||||
}));
|
||||
|
||||
export default function ChipArray() {
|
||||
|
||||
const [chipData, setChipData] = React.useState([
|
||||
{ key: 0, label: 'Angular' },
|
||||
{ key: 1, label: 'jQuery' },
|
||||
{ key: 2, label: 'Polymer' },
|
||||
{ key: 3, label: 'React' },
|
||||
{ key: 4, label: 'Vue.js' },
|
||||
]);
|
||||
|
||||
const handleDelete = (chipToDelete) => () => {
|
||||
setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Chip Array
|
||||
</Typography>
|
||||
|
||||
<Paper
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
flexWrap: 'wrap',
|
||||
listStyle: 'none',
|
||||
p: 0.5,
|
||||
m: 0,
|
||||
}}
|
||||
component="ul"
|
||||
>
|
||||
{chipData.map((data) => {
|
||||
let icon;
|
||||
|
||||
if (data.label === 'React') {
|
||||
icon = <TagFacesIcon />;
|
||||
}
|
||||
|
||||
return (
|
||||
<ListItem key={data.key}>
|
||||
<Chip
|
||||
icon={icon}
|
||||
label={data.label}
|
||||
onDelete={data.label === 'React' ? undefined : handleDelete(data)}
|
||||
/>
|
||||
</ListItem>
|
||||
);
|
||||
})}
|
||||
</Paper>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
export default function ClickableAndDeletable() {
|
||||
const handleClick = () => {
|
||||
console.info('You clicked the Chip.');
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
console.info('You clicked the delete icon.');
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Clickable And Deletable
|
||||
</Typography>
|
||||
|
||||
<Stack direction="row" spacing={1} className="chip-gap-for-rtl">
|
||||
<Chip
|
||||
label="Clickable Deletable"
|
||||
onClick={handleClick}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
<Chip
|
||||
label="Clickable Deletable"
|
||||
variant="outlined"
|
||||
onClick={handleClick}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
export default function ClickableLink() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Clickable Link
|
||||
</Typography>
|
||||
|
||||
<Stack direction="row" spacing={1} className="chip-gap-for-rtl">
|
||||
<Chip label="Clickable Link" component="a" href="#basic-chip" clickable />
|
||||
<Chip
|
||||
label="Clickable Link"
|
||||
component="a"
|
||||
href="#basic-chip"
|
||||
variant="outlined"
|
||||
clickable
|
||||
/>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
export default function ColorChip() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Color Chip
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={1} alignItems="center" className="chip-gap-for-rtl">
|
||||
<Stack direction="row" spacing={1}>
|
||||
|
||||
<Chip
|
||||
label="Primary"
|
||||
color="primary"
|
||||
className="whiteColor"
|
||||
/>
|
||||
|
||||
<Chip
|
||||
label="Secondary"
|
||||
color="secondary"
|
||||
className="whiteColor"
|
||||
/>
|
||||
|
||||
<Chip
|
||||
label="Success"
|
||||
color="success"
|
||||
className="whiteColor"
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Stack direction="row" spacing={1} className="chip-gap-for-rtl">
|
||||
<Chip label="Primary" color="primary" variant="outlined" />
|
||||
|
||||
<Chip label="Secondary" color="secondary" variant="outlined" />
|
||||
|
||||
<Chip label="Success" color="success" variant="outlined" />
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import DoneIcon from '@mui/icons-material/Done';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
|
||||
export default function CustomDeleteIcon() {
|
||||
|
||||
const handleClick = () => {
|
||||
console.info('You clicked the Chip.');
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
console.info('You clicked the delete icon.');
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Custom Delete Icon
|
||||
</Typography>
|
||||
|
||||
<Stack direction="row" spacing={1} className="chip-gap-for-rtl">
|
||||
<Chip
|
||||
label="Custom delete icon"
|
||||
onClick={handleClick}
|
||||
onDelete={handleDelete}
|
||||
deleteIcon={<DoneIcon />}
|
||||
/>
|
||||
<Chip
|
||||
label="Custom delete icon"
|
||||
onClick={handleClick}
|
||||
onDelete={handleDelete}
|
||||
deleteIcon={<DeleteIcon />}
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
export default function Deletable() {
|
||||
|
||||
const handleDelete = () => {
|
||||
console.info('You clicked the delete icon.');
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Deletable
|
||||
</Typography>
|
||||
|
||||
<Stack direction="row" spacing={1} className="chip-gap-for-rtl">
|
||||
<Chip label="Deletable" onDelete={handleDelete} />
|
||||
<Chip label="Deletable" variant="outlined" onDelete={handleDelete} />
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import FaceIcon from '@mui/icons-material/Face';
|
||||
|
||||
export default function IconChip() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Icon Chip
|
||||
</Typography>
|
||||
|
||||
<Stack direction="row" spacing={1} className="chip-gap-for-rtl">
|
||||
<Chip icon={<FaceIcon />} label="With Icon" />
|
||||
<Chip icon={<FaceIcon />} label="With Icon" variant="outlined" />
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
export default function SizesChip() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Sizes Chip
|
||||
</Typography>
|
||||
|
||||
<Stack direction="row" spacing={1} className="chip-gap-for-rtl">
|
||||
<Chip label="Small" size="small" />
|
||||
<Chip label="Small" size="small" variant="outlined" />
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import ImageList from '@mui/material/ImageList';
|
||||
import ImageListItem from '@mui/material/ImageListItem';
|
||||
import ImageListItemBar from '@mui/material/ImageListItemBar';
|
||||
import ListSubheader from '@mui/material/ListSubheader';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import InfoIcon from '@mui/icons-material/Info';
|
||||
|
||||
export default function ImageListWithTitleBars() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Image List With Title Bars
|
||||
</Typography>
|
||||
|
||||
<ImageList sx={{ width: 500, height: 450 }}>
|
||||
<ImageListItem key="Subheader" cols={2}>
|
||||
<ListSubheader component="div">December</ListSubheader>
|
||||
</ImageListItem>
|
||||
{itemData.map((item) => (
|
||||
<ImageListItem key={item.img}>
|
||||
<img
|
||||
src={`${item.img}?w=248&fit=crop&auto=format`}
|
||||
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
<ImageListItemBar
|
||||
title={item.title}
|
||||
subtitle={item.author}
|
||||
actionIcon={
|
||||
<IconButton
|
||||
sx={{ color: 'rgba(255, 255, 255, 0.54)' }}
|
||||
aria-label={`info about ${item.title}`}
|
||||
>
|
||||
<InfoIcon />
|
||||
</IconButton>
|
||||
}
|
||||
/>
|
||||
</ImageListItem>
|
||||
))}
|
||||
</ImageList>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const itemData = [
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
|
||||
title: 'Breakfast',
|
||||
author: '@bkristastucchio',
|
||||
rows: 2,
|
||||
cols: 2,
|
||||
featured: true,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
|
||||
title: 'Burger',
|
||||
author: '@rollelflex_graphy726',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
|
||||
title: 'Camera',
|
||||
author: '@helloimnik',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
|
||||
title: 'Coffee',
|
||||
author: '@nolanissac',
|
||||
cols: 2,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
|
||||
title: 'Hats',
|
||||
author: '@hjrc33',
|
||||
cols: 2,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
|
||||
title: 'Honey',
|
||||
author: '@arwinneil',
|
||||
rows: 2,
|
||||
cols: 2,
|
||||
featured: true,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
|
||||
title: 'Basketball',
|
||||
author: '@tjdragotta',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
|
||||
title: 'Fern',
|
||||
author: '@katie_wasserman',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
|
||||
title: 'Mushrooms',
|
||||
author: '@silverdalex',
|
||||
rows: 2,
|
||||
cols: 2,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
|
||||
title: 'Tomato basil',
|
||||
author: '@shelleypauls',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
|
||||
title: 'Sea star',
|
||||
author: '@peterlaster',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
|
||||
title: 'Bike',
|
||||
author: '@southside_customs',
|
||||
cols: 2,
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,98 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import ImageList from '@mui/material/ImageList';
|
||||
import ImageListItem from '@mui/material/ImageListItem';
|
||||
|
||||
export default function MasonryImageList() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Masonry Image List
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ width: 500, height: 450, overflowY: 'scroll' }}>
|
||||
<ImageList variant="masonry" cols={3} gap={8}>
|
||||
{itemData.map((item) => (
|
||||
<ImageListItem key={item.img}>
|
||||
<img
|
||||
src={`${item.img}?w=248&fit=crop&auto=format`}
|
||||
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
</ImageListItem>
|
||||
))}
|
||||
</ImageList>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const itemData = [
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110',
|
||||
title: 'Bed',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31',
|
||||
title: 'Books',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6',
|
||||
title: 'Sink',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3',
|
||||
title: 'Kitchen',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3',
|
||||
title: 'Blinds',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622',
|
||||
title: 'Chairs',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1530731141654-5993c3016c77',
|
||||
title: 'Laptop',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61',
|
||||
title: 'Doors',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7',
|
||||
title: 'Coffee',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee',
|
||||
title: 'Storage',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62',
|
||||
title: 'Candle',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4',
|
||||
title: 'Coffee table',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,118 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import ImageList from '@mui/material/ImageList';
|
||||
import ImageListItem from '@mui/material/ImageListItem';
|
||||
|
||||
function srcset(image, size, rows = 1, cols = 1) {
|
||||
return {
|
||||
src: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format`,
|
||||
srcSet: `${image}?w=${size * cols}&h=${
|
||||
size * rows
|
||||
}&fit=crop&auto=format&dpr=2 2x`,
|
||||
};
|
||||
}
|
||||
|
||||
export default function QuiltedImageList() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Quilted Image List
|
||||
</Typography>
|
||||
|
||||
<ImageList
|
||||
sx={{ width: 500, height: 450 }}
|
||||
variant="quilted"
|
||||
cols={4}
|
||||
rowHeight={121}
|
||||
>
|
||||
{itemData.map((item) => (
|
||||
<ImageListItem key={item.img} cols={item.cols || 1} rows={item.rows || 1}>
|
||||
<img
|
||||
{...srcset(item.img, 121, item.rows, item.cols)}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
</ImageListItem>
|
||||
))}
|
||||
</ImageList>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const itemData = [
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
|
||||
title: 'Breakfast',
|
||||
rows: 2,
|
||||
cols: 2,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
|
||||
title: 'Burger',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
|
||||
title: 'Camera',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
|
||||
title: 'Coffee',
|
||||
cols: 2,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
|
||||
title: 'Hats',
|
||||
cols: 2,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
|
||||
title: 'Honey',
|
||||
author: '@arwinneil',
|
||||
rows: 2,
|
||||
cols: 2,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
|
||||
title: 'Basketball',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
|
||||
title: 'Fern',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
|
||||
title: 'Mushrooms',
|
||||
rows: 2,
|
||||
cols: 2,
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
|
||||
title: 'Tomato basil',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
|
||||
title: 'Sea star',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
|
||||
title: 'Bike',
|
||||
cols: 2,
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,95 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import ImageList from '@mui/material/ImageList';
|
||||
import ImageListItem from '@mui/material/ImageListItem';
|
||||
|
||||
const itemData = [
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
|
||||
title: 'Breakfast',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
|
||||
title: 'Burger',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
|
||||
title: 'Camera',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
|
||||
title: 'Coffee',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
|
||||
title: 'Hats',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
|
||||
title: 'Honey',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
|
||||
title: 'Basketball',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
|
||||
title: 'Fern',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
|
||||
title: 'Mushrooms',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
|
||||
title: 'Tomato basil',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
|
||||
title: 'Sea star',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
|
||||
title: 'Bike',
|
||||
},
|
||||
];
|
||||
|
||||
export default function StandardImageList() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Standard Image List
|
||||
</Typography>
|
||||
|
||||
<ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
|
||||
{itemData.map((item) => (
|
||||
<ImageListItem key={item.img}>
|
||||
<img
|
||||
src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
|
||||
srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
</ImageListItem>
|
||||
))}
|
||||
</ImageList>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import ImageList from '@mui/material/ImageList';
|
||||
import ImageListItem from '@mui/material/ImageListItem';
|
||||
import ImageListItemBar from '@mui/material/ImageListItemBar';
|
||||
|
||||
export default function TitleBarBelowImageStandard() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Title Bar Below Image Standard
|
||||
</Typography>
|
||||
|
||||
<ImageList sx={{ width: 500, height: 450 }}>
|
||||
{itemData.map((item) => (
|
||||
<ImageListItem key={item.img}>
|
||||
<img
|
||||
src={`${item.img}?w=248&fit=crop&auto=format`}
|
||||
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
<ImageListItemBar
|
||||
title={item.title}
|
||||
subtitle={<span>by: {item.author}</span>}
|
||||
position="below"
|
||||
/>
|
||||
</ImageListItem>
|
||||
))}
|
||||
</ImageList>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const itemData = [
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
|
||||
title: 'Breakfast',
|
||||
author: '@bkristastucchio',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
|
||||
title: 'Burger',
|
||||
author: '@rollelflex_graphy726',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
|
||||
title: 'Camera',
|
||||
author: '@helloimnik',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
|
||||
title: 'Coffee',
|
||||
author: '@nolanissac',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
|
||||
title: 'Hats',
|
||||
author: '@hjrc33',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
|
||||
title: 'Honey',
|
||||
author: '@arwinneil',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
|
||||
title: 'Basketball',
|
||||
author: '@tjdragotta',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
|
||||
title: 'Fern',
|
||||
author: '@katie_wasserman',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
|
||||
title: 'Mushrooms',
|
||||
author: '@silverdalex',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
|
||||
title: 'Tomato basil',
|
||||
author: '@shelleypauls',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
|
||||
title: 'Sea star',
|
||||
author: '@peterlaster',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
|
||||
title: 'Bike',
|
||||
author: '@southside_customs',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,95 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import ImageList from '@mui/material/ImageList';
|
||||
import ImageListItem from '@mui/material/ImageListItem';
|
||||
|
||||
export default function WovenImageList() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Woven Image List
|
||||
</Typography>
|
||||
|
||||
<ImageList sx={{ width: 500, height: 450 }} variant="woven" cols={3} gap={8}>
|
||||
{itemData.map((item) => (
|
||||
<ImageListItem key={item.img}>
|
||||
<img
|
||||
src={`${item.img}?w=161&fit=crop&auto=format`}
|
||||
srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
</ImageListItem>
|
||||
))}
|
||||
</ImageList>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const itemData = [
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110',
|
||||
title: 'Bed',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3',
|
||||
title: 'Kitchen',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6',
|
||||
title: 'Sink',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31',
|
||||
title: 'Books',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622',
|
||||
title: 'Chairs',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62',
|
||||
title: 'Candle',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1530731141654-5993c3016c77',
|
||||
title: 'Laptop',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61',
|
||||
title: 'Doors',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7',
|
||||
title: 'Coffee',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee',
|
||||
title: 'Storage',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4',
|
||||
title: 'Coffee table',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3',
|
||||
title: 'Blinds',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,82 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import InboxIcon from '@mui/icons-material/Inbox';
|
||||
import DraftsIcon from '@mui/icons-material/Drafts';
|
||||
|
||||
export default function BasicList() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Basic List
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
|
||||
className="bg-black"
|
||||
>
|
||||
<nav aria-label="main mailbox folders">
|
||||
<List>
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton>
|
||||
<ListItemIcon>
|
||||
<InboxIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Inbox" />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton>
|
||||
<ListItemIcon>
|
||||
<DraftsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Drafts" />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
</List>
|
||||
</nav>
|
||||
|
||||
<Divider />
|
||||
|
||||
<nav aria-label="secondary mailbox folders">
|
||||
<List>
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton>
|
||||
<ListItemText primary="Trash" />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton component="a" href="#simple-list">
|
||||
<ListItemText primary="Spam" />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
</List>
|
||||
</nav>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import ListItemAvatar from '@mui/material/ListItemAvatar';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import ImageIcon from '@mui/icons-material/Image';
|
||||
import WorkIcon from '@mui/icons-material/Work';
|
||||
import BeachAccessIcon from '@mui/icons-material/BeachAccess';
|
||||
|
||||
export default function FolderList() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
FolderList
|
||||
</Typography>
|
||||
|
||||
<List
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: 360,
|
||||
}}
|
||||
>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<ImageIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Photos" secondary="Jan 9, 2014" />
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<WorkIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Work" secondary="Jan 7, 2014" />
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<BeachAccessIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Vacation" secondary="July 20, 2014" />
|
||||
</ListItem>
|
||||
</List>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import CommentIcon from '@mui/icons-material/Comment';
|
||||
|
||||
export default function ListControls() {
|
||||
|
||||
const [checked, setChecked] = React.useState([0]);
|
||||
|
||||
const handleToggle = (value) => () => {
|
||||
const currentIndex = checked.indexOf(value);
|
||||
const newChecked = [...checked];
|
||||
|
||||
if (currentIndex === -1) {
|
||||
newChecked.push(value);
|
||||
} else {
|
||||
newChecked.splice(currentIndex, 1);
|
||||
}
|
||||
|
||||
setChecked(newChecked);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
List Controls
|
||||
</Typography>
|
||||
|
||||
<List sx={{ width: '100%', maxWidth: 360 }}>
|
||||
{[0, 1, 2, 3].map((value) => {
|
||||
const labelId = `checkbox-list-label-${value}`;
|
||||
|
||||
return (
|
||||
<ListItem
|
||||
key={value}
|
||||
secondaryAction={
|
||||
<IconButton edge="end" aria-label="comments">
|
||||
<CommentIcon />
|
||||
</IconButton>
|
||||
}
|
||||
disablePadding
|
||||
>
|
||||
<ListItemButton role={undefined} onClick={handleToggle(value)} dense>
|
||||
<ListItemIcon>
|
||||
<Checkbox
|
||||
edge="start"
|
||||
checked={checked.indexOf(value) !== -1}
|
||||
tabIndex={-1}
|
||||
disableRipple
|
||||
inputProps={{ 'aria-labelledby': labelId }}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
<ListItemText id={labelId} primary={`Line item ${value + 1}`} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import ListSubheader from '@mui/material/ListSubheader';
|
||||
import List from '@mui/material/List';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import Collapse from '@mui/material/Collapse';
|
||||
import InboxIcon from '@mui/icons-material/MoveToInbox';
|
||||
import DraftsIcon from '@mui/icons-material/Drafts';
|
||||
import SendIcon from '@mui/icons-material/Send';
|
||||
import ExpandLess from '@mui/icons-material/ExpandLess';
|
||||
import ExpandMore from '@mui/icons-material/ExpandMore';
|
||||
import StarBorder from '@mui/icons-material/StarBorder';
|
||||
|
||||
export default function NestedList() {
|
||||
const [open, setOpen] = React.useState(true);
|
||||
|
||||
const handleClick = () => {
|
||||
setOpen(!open);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Nested List
|
||||
</Typography>
|
||||
|
||||
<List
|
||||
sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
|
||||
component="nav"
|
||||
aria-labelledby="nested-list-subheader"
|
||||
subheader={
|
||||
<ListSubheader component="div" id="nested-list-subheader">
|
||||
Nested List Items
|
||||
</ListSubheader>
|
||||
}
|
||||
className="bg-black"
|
||||
>
|
||||
<ListItemButton>
|
||||
<ListItemIcon>
|
||||
<SendIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Sent mail" />
|
||||
</ListItemButton>
|
||||
|
||||
<ListItemButton>
|
||||
<ListItemIcon>
|
||||
<DraftsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Drafts" />
|
||||
</ListItemButton>
|
||||
|
||||
<ListItemButton onClick={handleClick}>
|
||||
<ListItemIcon>
|
||||
<InboxIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Inbox" />
|
||||
{open ? <ExpandLess /> : <ExpandMore />}
|
||||
</ListItemButton>
|
||||
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<List component="div" disablePadding>
|
||||
<ListItemButton sx={{ pl: 4 }}>
|
||||
<ListItemIcon>
|
||||
<StarBorder />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Starred" />
|
||||
</ListItemButton>
|
||||
</List>
|
||||
</Collapse>
|
||||
</List>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Modal from '@mui/material/Modal';
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
|
||||
export default function BasicModal() {
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Basic Modal
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
onClick={handleOpen}
|
||||
variant="contained"
|
||||
className="whiteColor"
|
||||
>
|
||||
Open Modal
|
||||
</Button>
|
||||
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style} className="bg-black">
|
||||
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||||
Text in a modal
|
||||
</Typography>
|
||||
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
|
||||
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Modal>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Button from '@mui/material/Button';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
|
||||
'& .MuiDialogContent-root': {
|
||||
padding: theme.spacing(2),
|
||||
},
|
||||
'& .MuiDialogActions-root': {
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
}));
|
||||
|
||||
function BootstrapDialogTitle(props) {
|
||||
const { children, onClose, ...other } = props;
|
||||
|
||||
return (
|
||||
<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
|
||||
{children}
|
||||
{onClose ? (
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={onClose}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: 8,
|
||||
top: 8,
|
||||
color: (theme) => theme.palette.grey[500],
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
) : null}
|
||||
</DialogTitle>
|
||||
);
|
||||
}
|
||||
|
||||
BootstrapDialogTitle.propTypes = {
|
||||
children: PropTypes.node,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default function CustomizationDialog() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Customization Dialog
|
||||
</Typography>
|
||||
|
||||
<Button variant="outlined" onClick={handleClickOpen}>
|
||||
Open dialog
|
||||
</Button>
|
||||
|
||||
<BootstrapDialog
|
||||
onClose={handleClose}
|
||||
aria-labelledby="customized-dialog-title"
|
||||
open={open}
|
||||
>
|
||||
<div className="bg-black">
|
||||
<BootstrapDialogTitle id="customized-dialog-title" onClose={handleClose}>
|
||||
Modal title
|
||||
</BootstrapDialogTitle>
|
||||
|
||||
<DialogContent dividers>
|
||||
<Typography gutterBottom>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
|
||||
dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
|
||||
consectetur ac, vestibulum at eros.
|
||||
</Typography>
|
||||
|
||||
<Typography gutterBottom>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
|
||||
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</Typography>
|
||||
|
||||
<Typography gutterBottom>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus
|
||||
magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec
|
||||
ullamcorper nulla non metus auctor fringilla.
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button autoFocus onClick={handleClose}>
|
||||
Save changes
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</div>
|
||||
</BootstrapDialog>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import * as React from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import List from '@mui/material/List';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import Slide from '@mui/material/Slide';
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
const Transition = React.forwardRef(function Transition(props, ref) {
|
||||
return <Slide direction="up" ref={ref} {...props} />;
|
||||
});
|
||||
|
||||
export default function FullScreenDialogs() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Full Screen Dialog
|
||||
</Typography>
|
||||
|
||||
<Button variant="outlined" onClick={handleClickOpen}>
|
||||
Open full-screen dialog
|
||||
</Button>
|
||||
|
||||
<Dialog
|
||||
fullScreen
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
TransitionComponent={Transition}
|
||||
>
|
||||
<AppBar sx={{ position: 'relative' }}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
onClick={handleClose}
|
||||
aria-label="close"
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
|
||||
Sound
|
||||
</Typography>
|
||||
<Button autoFocus color="inherit" onClick={handleClose}>
|
||||
save
|
||||
</Button>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<List>
|
||||
<ListItem button>
|
||||
<ListItemText primary="Phone ringtone" secondary="Titania" />
|
||||
</ListItem>
|
||||
<Divider />
|
||||
<ListItem button>
|
||||
<ListItemText
|
||||
primary="Default notification ringtone"
|
||||
secondary="Tethys"
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Dialog>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
pt: 2,
|
||||
px: 4,
|
||||
pb: 3,
|
||||
};
|
||||
|
||||
function ChildModal() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button onClick={handleOpen}>Open Child Modal</Button>
|
||||
<Modal
|
||||
hideBackdrop
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="child-modal-title"
|
||||
aria-describedby="child-modal-description"
|
||||
>
|
||||
<Box sx={{ ...style, width: 200 }}>
|
||||
<h2 id="child-modal-title">Text in a child modal</h2>
|
||||
<p id="child-modal-description">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
||||
</p>
|
||||
<Button onClick={handleClose}>Close Child Modal</Button>
|
||||
</Box>
|
||||
</Modal>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default function NestedModal() {
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Nested Modal
|
||||
</Typography>
|
||||
|
||||
<Button onClick={handleOpen} variant="contained" className="whiteColor">Open Modal</Button>
|
||||
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="parent-modal-title"
|
||||
aria-describedby="parent-modal-description"
|
||||
>
|
||||
<Box sx={{ ...style, width: 400 }}>
|
||||
<h2 id="parent-modal-title">Text in a modal</h2>
|
||||
<p id="parent-modal-description">
|
||||
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
|
||||
</p>
|
||||
<ChildModal />
|
||||
</Box>
|
||||
</Modal>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import * as React from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogContentText from '@mui/material/DialogContentText';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
|
||||
export default function ScrollingLongContent() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [scroll, setScroll] = React.useState('paper');
|
||||
|
||||
const handleClickOpen = (scrollType) => () => {
|
||||
setOpen(true);
|
||||
setScroll(scrollType);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const descriptionElementRef = React.useRef(null);
|
||||
React.useEffect(() => {
|
||||
if (open) {
|
||||
const { current: descriptionElement } = descriptionElementRef;
|
||||
if (descriptionElement !== null) {
|
||||
descriptionElement.focus();
|
||||
}
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Scrolling Long Content
|
||||
</Typography>
|
||||
|
||||
<Button onClick={handleClickOpen('paper')}>scroll=paper</Button>
|
||||
|
||||
<Button onClick={handleClickOpen('body')}>scroll=body</Button>
|
||||
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
scroll={scroll}
|
||||
aria-labelledby="scroll-dialog-title"
|
||||
aria-describedby="scroll-dialog-description"
|
||||
>
|
||||
<div className='bg-black'>
|
||||
<DialogTitle id="scroll-dialog-title">Subscribe</DialogTitle>
|
||||
|
||||
<DialogContent dividers={scroll === 'paper'}>
|
||||
<DialogContentText
|
||||
id="scroll-dialog-description"
|
||||
ref={descriptionElementRef}
|
||||
tabIndex={-1}
|
||||
>
|
||||
{[...new Array(50)]
|
||||
.map(
|
||||
() => `Cras mattis consectetur purus sit amet fermentum.
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
|
||||
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
|
||||
)
|
||||
.join('\n')}
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose}>Cancel</Button>
|
||||
<Button onClick={handleClose}>Subscribe</Button>
|
||||
</DialogActions>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Button from '@mui/material/Button';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemAvatar from '@mui/material/ListItemAvatar';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import PersonIcon from '@mui/icons-material/Person';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { blue } from '@mui/material/colors';
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
const emails = ['username@gmail.com', 'user02@gmail.com'];
|
||||
|
||||
function SimpleDialog(props) {
|
||||
const { onClose, selectedValue, open } = props;
|
||||
|
||||
const handleClose = () => {
|
||||
onClose(selectedValue);
|
||||
};
|
||||
|
||||
const handleListItemClick = (value) => {
|
||||
onClose(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog onClose={handleClose} open={open}>
|
||||
<div className="bg-black">
|
||||
<DialogTitle>Set backup account</DialogTitle>
|
||||
|
||||
<List sx={{ pt: 0 }}>
|
||||
{emails.map((email) => (
|
||||
<ListItem disableGutters>
|
||||
<ListItemButton onClick={() => handleListItemClick(email)} key={email}>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ bgcolor: blue[100], color: blue[500] }}>
|
||||
<PersonIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary={email} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
))}
|
||||
|
||||
<ListItem disableGutters>
|
||||
<ListItemButton
|
||||
autoFocus
|
||||
onClick={() => handleListItemClick('addAccount')}
|
||||
>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<AddIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Add account" />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
SimpleDialog.propTypes = {
|
||||
onClose: PropTypes.func.isRequired,
|
||||
open: PropTypes.bool.isRequired,
|
||||
selectedValue: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default function SimpleDialogDemo() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [selectedValue, setSelectedValue] = React.useState(emails[1]);
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleClose = (value) => {
|
||||
setOpen(false);
|
||||
setSelectedValue(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Simple Dialog
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<Typography variant="subtitle1" component="div">
|
||||
Selected: {selectedValue}
|
||||
</Typography>
|
||||
<br />
|
||||
<Button variant="outlined" onClick={handleClickOpen}>
|
||||
Open simple dialog
|
||||
</Button>
|
||||
<SimpleDialog
|
||||
selectedValue={selectedValue}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Backdrop from '@mui/material/Backdrop';
|
||||
import Box from '@mui/material/Box';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import Fade from '@mui/material/Fade';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
|
||||
export default function Transitions() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Transitions
|
||||
</Typography>
|
||||
|
||||
<Button onClick={handleOpen} variant="contained" className="whiteColor">Open Modal</Button>
|
||||
|
||||
<Modal
|
||||
aria-labelledby="transition-modal-title"
|
||||
aria-describedby="transition-modal-description"
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
closeAfterTransition
|
||||
BackdropComponent={Backdrop}
|
||||
BackdropProps={{
|
||||
timeout: 500,
|
||||
}}
|
||||
>
|
||||
<Fade in={open}>
|
||||
<Box sx={style} className="bg-black">
|
||||
<Typography id="transition-modal-title" variant="h6" component="h2">
|
||||
Text in a modal
|
||||
</Typography>
|
||||
<Typography id="transition-modal-description" sx={{ mt: 2 }}>
|
||||
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Fade>
|
||||
</Modal>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import * as React from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogContentText from '@mui/material/DialogContentText';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import Slide from '@mui/material/Slide';
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
|
||||
const Transition = React.forwardRef(function Transition(props, ref) {
|
||||
return <Slide direction="up" ref={ref} {...props} />;
|
||||
});
|
||||
|
||||
export default function TransitionsDialog() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Transitions Dialog
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<Button variant="outlined" onClick={handleClickOpen}>
|
||||
Slide in alert dialog
|
||||
</Button>
|
||||
|
||||
<Dialog
|
||||
open={open}
|
||||
TransitionComponent={Transition}
|
||||
keepMounted
|
||||
onClose={handleClose}
|
||||
aria-describedby="alert-dialog-slide-description"
|
||||
>
|
||||
<div className="bg-black">
|
||||
<DialogTitle>{"Use Google's location service?"}</DialogTitle>
|
||||
|
||||
<DialogContent>
|
||||
<DialogContentText id="alert-dialog-slide-description">
|
||||
Let Google help apps determine location. This means sending anonymous
|
||||
location data to Google, even when no apps are running.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose}>Disagree</Button>
|
||||
<Button onClick={handleClose}>Agree</Button>
|
||||
</DialogActions>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Pagination from '@mui/material/Pagination';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
export default function BasicPagination() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
BasicPagination
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={2}>
|
||||
<Pagination count={10} />
|
||||
<Pagination count={10} color="primary" />
|
||||
<Pagination count={10} color="secondary" />
|
||||
<Pagination count={10} disabled />
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Pagination from '@mui/material/Pagination';
|
||||
import PaginationItem from '@mui/material/PaginationItem';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
||||
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
|
||||
|
||||
export default function CustomIcons() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
CustomIcons
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={2}>
|
||||
<Pagination
|
||||
count={10}
|
||||
renderItem={(item) => (
|
||||
<PaginationItem
|
||||
slots={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
|
||||
{...item}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Pagination from '@mui/material/Pagination';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
export default function OutlinedPagination() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Outlined Pagination
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={2}>
|
||||
<Pagination count={10} variant="outlined" />
|
||||
<Pagination count={10} variant="outlined" color="primary" />
|
||||
<Pagination count={10} variant="outlined" color="secondary" />
|
||||
<Pagination count={10} variant="outlined" disabled />
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Pagination from '@mui/material/Pagination';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
export default function PaginationSize() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
PaginationSize
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={2}>
|
||||
<Pagination count={10} size="small" />
|
||||
<Pagination count={10} />
|
||||
<Pagination count={10} size="large" />
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Pagination from '@mui/material/Pagination';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
export default function RoundedPagination() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Rounded Pagination
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={2}>
|
||||
<Pagination count={10} shape="rounded" />
|
||||
<Pagination count={10} variant="outlined" shape="rounded" />
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Stack from '@mui/material/Stack';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
|
||||
export default function Circular() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
Circular
|
||||
</Typography>
|
||||
|
||||
<Stack sx={{ color: 'grey.500' }} spacing={2} direction="row">
|
||||
<CircularProgress color="secondary" />
|
||||
<CircularProgress color="success" />
|
||||
<CircularProgress color="inherit" />
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Stack from '@mui/material/Stack';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
|
||||
export default function CircularDeterminate() {
|
||||
|
||||
const [progress, setProgress] = React.useState(0);
|
||||
|
||||
React.useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
|
||||
}, 800);
|
||||
|
||||
return () => {
|
||||
clearInterval(timer);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
Circular Determinate
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={2} direction="row">
|
||||
<CircularProgress variant="determinate" value={25} />
|
||||
<CircularProgress variant="determinate" value={50} />
|
||||
<CircularProgress variant="determinate" value={75} />
|
||||
<CircularProgress variant="determinate" value={100} />
|
||||
<CircularProgress variant="determinate" value={progress} />
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Box from '@mui/material/Box';
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
function CircularProgressWithLabel(props) {
|
||||
return (
|
||||
<Box sx={{ position: 'relative', display: 'inline-flex' }}>
|
||||
<CircularProgress variant="determinate" {...props} />
|
||||
<Box
|
||||
sx={{
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
position: 'absolute',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" component="div" color="text.secondary">
|
||||
{`${Math.round(props.value)}%`}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
CircularProgressWithLabel.propTypes = {
|
||||
/**
|
||||
* The value of the progress indicator for the determinate variant.
|
||||
* Value between 0 and 100.
|
||||
* @default 0
|
||||
*/
|
||||
value: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
export default function CircularStatic() {
|
||||
const [progress, setProgress] = React.useState(10);
|
||||
|
||||
React.useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
|
||||
}, 800);
|
||||
return () => {
|
||||
clearInterval(timer);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '15px'
|
||||
}}
|
||||
>
|
||||
Default
|
||||
</Typography>
|
||||
|
||||
<CircularProgressWithLabel value={progress} />
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Box from '@mui/material/Box';
|
||||
import CircularProgress, {
|
||||
circularProgressClasses,
|
||||
} from '@mui/material/CircularProgress';
|
||||
import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
|
||||
|
||||
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
[`&.${linearProgressClasses.colorPrimary}`]: {
|
||||
backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800],
|
||||
},
|
||||
[`& .${linearProgressClasses.bar}`]: {
|
||||
borderRadius: 5,
|
||||
backgroundColor: theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8',
|
||||
},
|
||||
}));
|
||||
|
||||
// Inspired by the former Facebook spinners.
|
||||
function FacebookCircularProgress(props) {
|
||||
return (
|
||||
<Box sx={{ position: 'relative' }}>
|
||||
<CircularProgress
|
||||
variant="determinate"
|
||||
sx={{
|
||||
color: (theme) =>
|
||||
theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800],
|
||||
}}
|
||||
size={40}
|
||||
thickness={4}
|
||||
{...props}
|
||||
value={100}
|
||||
/>
|
||||
<CircularProgress
|
||||
variant="indeterminate"
|
||||
disableShrink
|
||||
sx={{
|
||||
color: (theme) => (theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8'),
|
||||
animationDuration: '550ms',
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
[`& .${circularProgressClasses.circle}`]: {
|
||||
strokeLinecap: 'round',
|
||||
},
|
||||
}}
|
||||
size={40}
|
||||
thickness={4}
|
||||
{...props}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Customization() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Customization
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<FacebookCircularProgress />
|
||||
<br />
|
||||
<BorderLinearProgress variant="determinate" value={50} />
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import { green } from '@mui/material/colors';
|
||||
import Button from '@mui/material/Button';
|
||||
import Fab from '@mui/material/Fab';
|
||||
import CheckIcon from '@mui/icons-material/Check';
|
||||
import SaveIcon from '@mui/icons-material/Save';
|
||||
|
||||
export default function InteractiveIntegration() {
|
||||
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
const [success, setSuccess] = React.useState(false);
|
||||
const timer = React.useRef();
|
||||
|
||||
const buttonSx = {
|
||||
...(success && {
|
||||
bgcolor: green[500],
|
||||
'&:hover': {
|
||||
bgcolor: green[700],
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
return () => {
|
||||
clearTimeout(timer.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleButtonClick = () => {
|
||||
if (!loading) {
|
||||
setSuccess(false);
|
||||
setLoading(true);
|
||||
timer.current = window.setTimeout(() => {
|
||||
setSuccess(true);
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Interactive Integration
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Box sx={{ m: 1, position: 'relative' }}>
|
||||
<Fab
|
||||
aria-label="save"
|
||||
color="primary"
|
||||
sx={buttonSx}
|
||||
onClick={handleButtonClick}
|
||||
>
|
||||
{success ? <CheckIcon className="whiteColor" /> : <SaveIcon className="whiteColor" />}
|
||||
</Fab>
|
||||
{loading && (
|
||||
<CircularProgress
|
||||
size={68}
|
||||
sx={{
|
||||
color: green[500],
|
||||
position: 'absolute',
|
||||
top: -6,
|
||||
left: -6,
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ m: 1, position: 'relative' }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={buttonSx}
|
||||
disabled={loading}
|
||||
onClick={handleButtonClick}
|
||||
className="whiteColor"
|
||||
>
|
||||
Accept terms
|
||||
</Button>
|
||||
{loading && (
|
||||
<CircularProgress
|
||||
size={24}
|
||||
sx={{
|
||||
color: green[500],
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
marginTop: '-12px',
|
||||
marginLeft: '-12px',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Stack from '@mui/material/Stack';
|
||||
import LinearProgress from '@mui/material/LinearProgress';
|
||||
|
||||
export default function LinearIndeterminate() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Linear Indeterminate
|
||||
</Typography>
|
||||
|
||||
<Stack sx={{ width: '100%', color: 'grey.500' }} spacing={2}>
|
||||
<LinearProgress color="secondary" />
|
||||
<LinearProgress color="success" />
|
||||
<LinearProgress color="inherit" />
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import { pink } from '@mui/material/colors';
|
||||
import Radio from '@mui/material/Radio';
|
||||
|
||||
export default function Color() {
|
||||
|
||||
const [selectedValue, setSelectedValue] = React.useState('a');
|
||||
|
||||
const handleChange = (event) => {
|
||||
setSelectedValue(event.target.value);
|
||||
};
|
||||
|
||||
const controlProps = (item) => ({
|
||||
checked: selectedValue === item,
|
||||
onChange: handleChange,
|
||||
value: item,
|
||||
name: 'color-radio-button-demo',
|
||||
inputProps: { 'aria-label': item },
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Color
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<Radio {...controlProps('a')} />
|
||||
<Radio {...controlProps('b')} color="secondary" />
|
||||
<Radio {...controlProps('c')} color="success" />
|
||||
<Radio {...controlProps('d')} color="default" />
|
||||
<Radio
|
||||
{...controlProps('e')}
|
||||
sx={{
|
||||
color: pink[800],
|
||||
'&.Mui-checked': {
|
||||
color: pink[500],
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Radio from '@mui/material/Radio';
|
||||
import RadioGroup from '@mui/material/RadioGroup';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import FormLabel from '@mui/material/FormLabel';
|
||||
|
||||
export default function Controlled() {
|
||||
const [value, setValue] = React.useState('female');
|
||||
|
||||
const handleChange = (event) => {
|
||||
setValue(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Controlled
|
||||
</Typography>
|
||||
|
||||
<FormControl>
|
||||
<FormLabel id="demo-controlled-radio-buttons-group">Gender</FormLabel>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-controlled-radio-buttons-group"
|
||||
name="controlled-radio-buttons-group"
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<FormControlLabel value="female" control={<Radio />} label="Female" />
|
||||
<FormControlLabel value="male" control={<Radio />} label="Male" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Radio from '@mui/material/Radio';
|
||||
import RadioGroup from '@mui/material/RadioGroup';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import FormLabel from '@mui/material/FormLabel';
|
||||
|
||||
export default function Direction() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Direction
|
||||
</Typography>
|
||||
|
||||
<FormControl>
|
||||
<FormLabel id="demo-row-radio-buttons-group-label">Gender</FormLabel>
|
||||
<RadioGroup
|
||||
row
|
||||
aria-labelledby="demo-row-radio-buttons-group-label"
|
||||
name="row-radio-buttons-group"
|
||||
>
|
||||
<FormControlLabel value="female" control={<Radio />} label="Female" />
|
||||
<FormControlLabel value="male" control={<Radio />} label="Male" />
|
||||
<FormControlLabel value="other" control={<Radio />} label="Other" />
|
||||
<FormControlLabel
|
||||
value="disabled"
|
||||
disabled
|
||||
control={<Radio />}
|
||||
label="other"
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Radio from '@mui/material/Radio';
|
||||
import RadioGroup from '@mui/material/RadioGroup';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import FormLabel from '@mui/material/FormLabel';
|
||||
|
||||
export default function Group() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Radio Group
|
||||
</Typography>
|
||||
|
||||
<FormControl>
|
||||
<FormLabel id="demo-radio-buttons-group-label">Gender</FormLabel>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
defaultValue="female"
|
||||
name="radio-buttons-group"
|
||||
>
|
||||
<FormControlLabel value="female" control={<Radio />} label="Female" />
|
||||
<FormControlLabel value="male" control={<Radio />} label="Male" />
|
||||
<FormControlLabel value="other" control={<Radio />} label="Other" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Radio from '@mui/material/Radio';
|
||||
|
||||
export default function Size() {
|
||||
|
||||
const [selectedValue, setSelectedValue] = React.useState('a');
|
||||
const handleChange = (event) => {
|
||||
setSelectedValue(event.target.value);
|
||||
};
|
||||
|
||||
const controlProps = (item) => ({
|
||||
checked: selectedValue === item,
|
||||
onChange: handleChange,
|
||||
value: item,
|
||||
name: 'size-radio-button-demo',
|
||||
inputProps: { 'aria-label': item },
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Size
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<Radio {...controlProps('a')} size="small" />
|
||||
|
||||
<Radio {...controlProps('b')} />
|
||||
|
||||
<Radio
|
||||
{...controlProps('c')}
|
||||
sx={{
|
||||
'& .MuiSvgIcon-root': {
|
||||
fontSize: 28,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Rating from '@mui/material/Rating';
|
||||
|
||||
export default function Basic() {
|
||||
const [value, setValue] = React.useState(2);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Basic
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
'& > legend': { mt: 2 },
|
||||
}}
|
||||
>
|
||||
<Typography component="legend">Controlled</Typography>
|
||||
<Rating
|
||||
name="simple-controlled"
|
||||
value={value}
|
||||
onChange={(event, newValue) => {
|
||||
setValue(newValue);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Typography component="legend">Read only</Typography>
|
||||
<Rating name="read-only" value={value} readOnly />
|
||||
|
||||
<Typography component="legend">Disabled</Typography>
|
||||
<Rating name="disabled" value={value} disabled />
|
||||
|
||||
<Typography component="legend">No rating given</Typography>
|
||||
<Rating name="no-value" value={null} />
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Box from '@mui/material/Box';
|
||||
import Rating from '@mui/material/Rating';
|
||||
import FavoriteIcon from '@mui/icons-material/Favorite';
|
||||
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
||||
|
||||
const StyledRating = styled(Rating)({
|
||||
'& .MuiRating-iconFilled': {
|
||||
color: '#ff6d75',
|
||||
},
|
||||
'& .MuiRating-iconHover': {
|
||||
color: '#ff3d47',
|
||||
},
|
||||
});
|
||||
|
||||
export default function Customization() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Customization
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
'& > legend': { mt: 2 },
|
||||
}}
|
||||
>
|
||||
<Typography component="legend">Custom icon and color</Typography>
|
||||
<StyledRating
|
||||
name="customized-color"
|
||||
defaultValue={2}
|
||||
getLabelText={(value) => `${value} Heart${value !== 1 ? 's' : ''}`}
|
||||
precision={0.5}
|
||||
icon={<FavoriteIcon fontSize="inherit" />}
|
||||
emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
|
||||
/>
|
||||
<Typography component="legend">10 stars</Typography>
|
||||
<Rating name="customized-10" defaultValue={2} max={10} />
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Rating from '@mui/material/Rating';
|
||||
import Box from '@mui/material/Box';
|
||||
import StarIcon from '@mui/icons-material/Star';
|
||||
|
||||
const labels = {
|
||||
0.5: 'Useless',
|
||||
1: 'Useless+',
|
||||
1.5: 'Poor',
|
||||
2: 'Poor+',
|
||||
2.5: 'Ok',
|
||||
3: 'Ok+',
|
||||
3.5: 'Good',
|
||||
4: 'Good+',
|
||||
4.5: 'Excellent',
|
||||
5: 'Excellent+',
|
||||
};
|
||||
|
||||
function getLabelText(value) {
|
||||
return `${value} Star${value !== 1 ? 's' : ''}, ${labels[value]}`;
|
||||
}
|
||||
|
||||
export default function HoverFeedback() {
|
||||
|
||||
const [value, setValue] = React.useState(2);
|
||||
const [hover, setHover] = React.useState(-1);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Hover Feedback
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: 200,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Rating
|
||||
name="hover-feedback"
|
||||
value={value}
|
||||
precision={0.5}
|
||||
getLabelText={getLabelText}
|
||||
onChange={(event, newValue) => {
|
||||
setValue(newValue);
|
||||
}}
|
||||
onChangeActive={(event, newHover) => {
|
||||
setHover(newHover);
|
||||
}}
|
||||
emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
|
||||
/>
|
||||
{value !== null && (
|
||||
<Box
|
||||
className="ml-2"
|
||||
>
|
||||
{labels[hover !== -1 ? hover : value]}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import PropTypes from 'prop-types';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Rating from '@mui/material/Rating';
|
||||
import SentimentVeryDissatisfiedIcon from '@mui/icons-material/SentimentVeryDissatisfied';
|
||||
import SentimentDissatisfiedIcon from '@mui/icons-material/SentimentDissatisfied';
|
||||
import SentimentSatisfiedIcon from '@mui/icons-material/SentimentSatisfied';
|
||||
import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAltOutlined';
|
||||
import SentimentVerySatisfiedIcon from '@mui/icons-material/SentimentVerySatisfied';
|
||||
|
||||
const StyledRating = styled(Rating)(({ theme }) => ({
|
||||
'& .MuiRating-iconEmpty .MuiSvgIcon-root': {
|
||||
color: theme.palette.action.disabled,
|
||||
},
|
||||
}));
|
||||
|
||||
const customIcons = {
|
||||
1: {
|
||||
icon: <SentimentVeryDissatisfiedIcon color="error" />,
|
||||
label: 'Very Dissatisfied',
|
||||
},
|
||||
2: {
|
||||
icon: <SentimentDissatisfiedIcon color="error" />,
|
||||
label: 'Dissatisfied',
|
||||
},
|
||||
3: {
|
||||
icon: <SentimentSatisfiedIcon color="warning" />,
|
||||
label: 'Neutral',
|
||||
},
|
||||
4: {
|
||||
icon: <SentimentSatisfiedAltIcon color="success" />,
|
||||
label: 'Satisfied',
|
||||
},
|
||||
5: {
|
||||
icon: <SentimentVerySatisfiedIcon color="success" />,
|
||||
label: 'Very Satisfied',
|
||||
},
|
||||
};
|
||||
|
||||
function IconContainer(props) {
|
||||
const { value, ...other } = props;
|
||||
return <span {...other}>{customIcons[value].icon}</span>;
|
||||
}
|
||||
|
||||
IconContainer.propTypes = {
|
||||
value: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
export default function RadioGroup() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Radio Group
|
||||
</Typography>
|
||||
|
||||
<StyledRating
|
||||
name="highlight-selected-only"
|
||||
defaultValue={2}
|
||||
IconContainerComponent={IconContainer}
|
||||
getLabelText={(value) => customIcons[value].label}
|
||||
highlightSelectedOnly
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user