70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import React from 'react'
|
|
import type { Notification } from '@/types/notifications'
|
|
import { NotificationItem } from './NotificationItem'
|
|
import { NotificationPanelHeader } from './NotificationPanelHeader'
|
|
|
|
interface NotificationPanelProps {
|
|
notifications: Notification[]
|
|
unreadCount: number
|
|
onNotificationClick: (notification: Notification) => void
|
|
onDelete: (id: string) => void
|
|
onMarkAllAsRead: () => void
|
|
onClose: () => void
|
|
}
|
|
|
|
function NotificationList({ notifications, onNotificationClick, onDelete }: {
|
|
notifications: Notification[]
|
|
onNotificationClick: (notification: Notification) => void
|
|
onDelete: (id: string) => void
|
|
}) {
|
|
if (notifications.length === 0) {
|
|
return (
|
|
<div className="p-8 text-center text-gray-500">
|
|
<p>No notifications yet</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="divide-y divide-gray-100">
|
|
{notifications.map((notification) => (
|
|
<NotificationItem
|
|
key={notification.id}
|
|
notification={notification}
|
|
onNotificationClick={onNotificationClick}
|
|
onDelete={onDelete}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function NotificationPanel({
|
|
notifications,
|
|
unreadCount,
|
|
onNotificationClick,
|
|
onDelete,
|
|
onMarkAllAsRead,
|
|
onClose,
|
|
}: NotificationPanelProps) {
|
|
return (
|
|
<>
|
|
<div className="fixed inset-0 z-40 bg-black bg-opacity-50" onClick={onClose} />
|
|
<div className="absolute right-0 mt-2 w-96 bg-white rounded-lg shadow-xl border border-gray-200 z-50 max-h-[600px] flex flex-col">
|
|
<NotificationPanelHeader
|
|
unreadCount={unreadCount}
|
|
onMarkAllAsRead={onMarkAllAsRead}
|
|
onClose={onClose}
|
|
/>
|
|
<div className="overflow-y-auto flex-1">
|
|
<NotificationList
|
|
notifications={notifications}
|
|
onNotificationClick={onNotificationClick}
|
|
onDelete={onDelete}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|