37 lines
1007 B
TypeScript
37 lines
1007 B
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import type { Notification } from '@/db/Notifications/type';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import ListItem from '@mui/material/ListItem';
|
|
import Tooltip from '@mui/material/Tooltip';
|
|
import { X as XIcon } from '@phosphor-icons/react/dist/ssr/X';
|
|
|
|
import { NotificationContent } from './notification-content';
|
|
|
|
interface NotificationItemProps {
|
|
divider?: boolean;
|
|
notification: Notification;
|
|
onRemove?: () => void;
|
|
}
|
|
|
|
export function NotificationItem({ divider, notification, onRemove }: NotificationItemProps): React.JSX.Element {
|
|
return (
|
|
<ListItem
|
|
divider={divider}
|
|
sx={{ alignItems: 'flex-start', justifyContent: 'space-between' }}
|
|
>
|
|
<NotificationContent notification={notification} />
|
|
<Tooltip title="Remove">
|
|
<IconButton
|
|
edge="end"
|
|
onClick={onRemove}
|
|
size="small"
|
|
>
|
|
<XIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</ListItem>
|
|
);
|
|
}
|