File size: 3,562 Bytes
95b5a04 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | import PropTypes from 'prop-types';
import { memo } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
import Avatar from '@mui/material/Avatar';
import Card from '@mui/material/Card';
import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import ListItemText from '@mui/material/ListItemText';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
// assets
import TableChartOutlinedIcon from '@mui/icons-material/TableChartOutlined';
// ==============================|| PROGRESS BAR WITH LABEL ||============================== //
function LinearProgressWithLabel({ value, ...others }) {
return (
<Stack sx={{ gap: 1 }}>
<Stack direction="row" sx={{ justifyContent: 'space-between', mt: 1.5 }}>
<Typography
variant="h6"
sx={{
color: 'primary.800'
}}
>
Progress
</Typography>
<Typography variant="h6" sx={{ color: 'inherit' }}>{`${Math.round(value)}%`}</Typography>
</Stack>
<LinearProgress
aria-label="progress of theme"
variant="determinate"
value={value}
{...others}
sx={{
height: 10,
borderRadius: 30,
[`&.${linearProgressClasses.colorPrimary}`]: {
bgcolor: 'background.paper'
},
[`& .${linearProgressClasses.bar}`]: {
borderRadius: 5,
bgcolor: 'primary.dark'
}
}}
/>
</Stack>
);
}
// ==============================|| SIDEBAR - MENU CARD ||============================== //
function MenuCard() {
const theme = useTheme();
return (
<Card
sx={{
bgcolor: 'primary.light',
mb: 2.75,
overflow: 'hidden',
position: 'relative',
'&:after': {
content: '""',
position: 'absolute',
width: 157,
height: 157,
bgcolor: 'primary.200',
borderRadius: '50%',
top: -105,
right: -96
}
}}
>
<Box sx={{ p: 2 }}>
<List disablePadding sx={{ pb: 1 }}>
<ListItem alignItems="flex-start" disableGutters disablePadding>
<ListItemAvatar sx={{ mt: 0 }}>
<Avatar
variant="rounded"
sx={{
...theme.typography.largeAvatar,
borderRadius: 2,
color: 'primary.main',
border: 'none',
bgcolor: 'background.paper'
}}
>
<TableChartOutlinedIcon fontSize="inherit" />
</Avatar>
</ListItemAvatar>
<ListItemText
sx={{ mt: 0 }}
primary={
<Typography
variant="subtitle1"
sx={{
color: 'primary.800'
}}
>
Get Extra Space
</Typography>
}
secondary={<Typography variant="caption"> 28/23 GB</Typography>}
/>
</ListItem>
</List>
<LinearProgressWithLabel value={80} />
</Box>
</Card>
);
}
export default memo(MenuCard);
LinearProgressWithLabel.propTypes = { value: PropTypes.number, others: PropTypes.any };
|