first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -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;
|
||||
Reference in New Issue
Block a user