74 lines
1.6 KiB
TypeScript
74 lines
1.6 KiB
TypeScript
import { DashboardCard } from "@/components/card";
|
|
import { notificationData } from "@/data/dashboardData";
|
|
import { tw } from "@/utils/tailwind";
|
|
import {
|
|
Avatar,
|
|
Chip,
|
|
List,
|
|
ListItem,
|
|
ListItemAvatar,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
} from "@mui/material";
|
|
import { Label } from "recharts";
|
|
|
|
import CheckIcon from "@mui/icons-material/Check";
|
|
import InfoIcon from "@mui/icons-material/Info";
|
|
import PriorityHighIcon from "@mui/icons-material/PriorityHigh";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
|
|
const severityMap = {
|
|
info: {
|
|
icon: <InfoIcon />,
|
|
color: "info",
|
|
},
|
|
success: {
|
|
icon: <CheckIcon />,
|
|
color: "success",
|
|
},
|
|
warning: {
|
|
icon: <PriorityHighIcon />,
|
|
color: "warning",
|
|
},
|
|
error: {
|
|
icon: <CloseIcon />,
|
|
color: "error",
|
|
},
|
|
};
|
|
|
|
export const Notifications = () => {
|
|
return (
|
|
<DashboardCard title="Notifications">
|
|
<List>
|
|
{notificationData.map((n, idx) => (
|
|
<ListItem key={idx}>
|
|
<ListItemAvatar>
|
|
<Avatar
|
|
sx={{
|
|
bgcolor: `${n.severity}.main`,
|
|
}}
|
|
>
|
|
{severityMap[n.severity].icon}
|
|
</Avatar>
|
|
</ListItemAvatar>
|
|
<ListItemText
|
|
primary={n.msg}
|
|
secondary={n.date}
|
|
sx={{
|
|
width: "100px",
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary={n.source}
|
|
sx={{
|
|
width: "100px",
|
|
}}
|
|
/>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</DashboardCard>
|
|
);
|
|
};
|