66 lines
3.5 KiB
TypeScript
66 lines
3.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useNotifications } from '../NotificationContext';
|
|
|
|
export const NotificationBell: React.FC = () => {
|
|
const { notifications, unreadCount, markAsRead } = useNotifications();
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="relative">
|
|
<button
|
|
className="p-2 rounded-full hover:bg-white/10 relative transition-colors"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
>
|
|
<span className="text-xl">🔔</span>
|
|
{unreadCount > 0 && (
|
|
<span className="absolute top-1 right-1 bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full min-w-[18px] text-center border-2 border-[#0f172a]">
|
|
{unreadCount}
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<div className="absolute right-0 mt-2 w-80 bg-[#1e293b] border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden backdrop-blur-md">
|
|
<div className="p-4 border-b border-white/10 flex justify-between items-center">
|
|
<h3 className="font-semibold text-white">Notifications</h3>
|
|
<span className="text-xs text-slate-400">{unreadCount} unread</span>
|
|
</div>
|
|
<div className="max-height-[400px] overflow-y-auto">
|
|
{notifications.length === 0 ? (
|
|
<div className="p-8 text-center text-slate-500 italic">
|
|
No notifications yet
|
|
</div>
|
|
) : (
|
|
notifications.map(n => (
|
|
<div
|
|
key={n.id}
|
|
className={`p-4 border-b border-white/5 hover:bg-white/5 cursor-pointer transition-colors ${!n.is_read ? 'bg-blue-500/5' : ''}`}
|
|
onClick={() => markAsRead(n.id)}
|
|
>
|
|
<div className="flex gap-3">
|
|
<div className="text-lg">
|
|
{n.type === 'assignment' ? '📋' : n.type === 'mention' ? '💬' : '🔔'}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className={`text-sm ${!n.is_read ? 'text-white font-medium' : 'text-slate-300'}`}>
|
|
{n.title}
|
|
</p>
|
|
<p className="text-xs text-slate-400 mt-1 truncate">
|
|
{n.message}
|
|
</p>
|
|
<p className="text-[10px] text-slate-500 mt-1">
|
|
{new Date(n.created_at).toLocaleString()}
|
|
</p>
|
|
</div>
|
|
{!n.is_read && <div className="w-2 h-2 bg-blue-500 rounded-full mt-2" />}
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|