110 lines
3.8 KiB
TypeScript
Executable File
110 lines
3.8 KiB
TypeScript
Executable File
// @mui
|
|
import { styled } from '@mui/material/styles';
|
|
import { Button, Card, Divider, Link, Typography, Stack } from '@mui/material';
|
|
import { ChevronRight } from '@mui/icons-material';
|
|
// components
|
|
import Iconify from '@/components/Iconify';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
const RootStyle = styled(Card)(({ theme }) => ({
|
|
boxShadow: 'none',
|
|
padding: '1rem 0.5rem',
|
|
color: 'black',
|
|
backgroundColor: theme.palette.grey[200],
|
|
maxHeight: '250px',
|
|
}));
|
|
|
|
const ItemStyle = styled(Card)(({ theme }) => ({
|
|
boxShadow: 'none',
|
|
padding: theme.spacing(1),
|
|
borderRadius: 0.5,
|
|
color: 'black',
|
|
height: '180px',
|
|
}));
|
|
|
|
const itemList = [
|
|
{ info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '08:00 WIB' },
|
|
{ info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '09:00 WIB' },
|
|
{ info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '10:00 WIB' },
|
|
{ info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 WIB' },
|
|
];
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export default function NotificationCard() {
|
|
return (
|
|
<RootStyle>
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
|
<Typography>
|
|
<Typography
|
|
variant="body2"
|
|
component="span"
|
|
sx={{ display: 'flex', alignItems: 'center' }}
|
|
>
|
|
<Iconify icon="eva:bell-fill" marginRight={0.75} />
|
|
Notification
|
|
<div
|
|
style={{
|
|
width: '12px',
|
|
height: '12px',
|
|
backgroundColor: '#19BBBB',
|
|
marginLeft: '0.5rem',
|
|
borderRadius: '50%',
|
|
}}
|
|
/>
|
|
</Typography>
|
|
</Typography>
|
|
<Button sx={{ typography: 'body2' }} endIcon={<ChevronRight />}>
|
|
View All
|
|
</Button>
|
|
</Stack>
|
|
|
|
<Stack sx={{ marginTop: 2 }}>
|
|
<ItemStyle>
|
|
{itemList.map(({ info, date, time }, key) => (
|
|
<div key={key}>
|
|
{key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
|
<Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
|
|
<Typography sx={{ typography: 'caption' }}>{info}</Typography>
|
|
<Link
|
|
component="button"
|
|
variant="caption"
|
|
underline="always"
|
|
onClick={() => {
|
|
alert('Info Detail');
|
|
}}
|
|
>
|
|
Info Detail
|
|
</Link>
|
|
</Stack>
|
|
<Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
|
|
<Typography sx={{ typography: 'caption', color: '#656565' }}>{date}</Typography>
|
|
<Typography sx={{ typography: 'caption', color: '#656565' }}>{time}</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
</div>
|
|
))}
|
|
</ItemStyle>
|
|
</Stack>
|
|
|
|
{/* <BorderLinearProgress variant="determinate" value={50} sx={{ mb: 1 }} />
|
|
|
|
<Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
|
|
<Typography sx={{ typography: 'caption' }}>Lock Fund ( 25% )</Typography>
|
|
<Typography sx={{ typography: 'caption' }}>125.000.000 / 125.000.000</Typography>
|
|
</Stack>
|
|
|
|
<Stack direction="row" spacing={2}>
|
|
<Button variant="outlined" fullWidth={true}>
|
|
Submit Claim
|
|
</Button>
|
|
<Button variant="contained" startIcon={<Payments />} fullWidth={true}>
|
|
Top Up
|
|
</Button>
|
|
</Stack> */}
|
|
</RootStyle>
|
|
);
|
|
}
|