35 lines
996 B
TypeScript
35 lines
996 B
TypeScript
import React from 'react'
|
|
import type { Notification } from '@/types/notifications'
|
|
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) {
|
|
const handleDelete = () => {
|
|
onDelete(notification.id)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`p-4 hover:bg-gray-50 transition-colors cursor-pointer ${
|
|
!notification.read ? 'bg-blue-50' : ''
|
|
}`}
|
|
onClick={() => onNotificationClick(notification)}
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<NotificationContent notification={notification} />
|
|
<NotificationActions timestamp={notification.timestamp} onDelete={handleDelete} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|