37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import type { Notification } from '@/lib/notificationService'
|
|
import { NotificationContent } from './NotificationContent'
|
|
import { NotificationActions } from './NotificationActions'
|
|
|
|
interface NotificationItemProps {
|
|
notification: Notification
|
|
onNotificationClick: (notification: Notification) => void
|
|
onDelete: (id: string) => void
|
|
}
|
|
|
|
export function NotificationItem({
|
|
notification,
|
|
onNotificationClick,
|
|
onDelete,
|
|
}: NotificationItemProps): React.ReactElement {
|
|
const handleDelete = (): void => {
|
|
onDelete(notification.id)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`p-4 hover:bg-gray-50 transition-colors cursor-pointer relative ${
|
|
!notification.read ? 'bg-blue-50' : ''
|
|
}`}
|
|
onClick={() => onNotificationClick(notification)}
|
|
>
|
|
{!notification.read && (
|
|
<div className="absolute top-2 right-2 w-2 h-2 bg-orange-500 rounded-full" />
|
|
)}
|
|
<div className="flex items-start justify-between">
|
|
<NotificationContent notification={notification} />
|
|
<NotificationActions timestamp={notification.timestamp} onDelete={handleDelete} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|