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