36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import React, { memo } from 'react';
|
|
import Link from 'next/link';
|
|
import { Bell } from 'lucide-react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { useNotifications } from '@/hooks/use-notifications';
|
|
|
|
interface NotificationBadgeProps {
|
|
className?: string;
|
|
}
|
|
|
|
// Use React.memo to prevent unnecessary re-renders
|
|
export const NotificationBadge = memo(function NotificationBadge({ className }: NotificationBadgeProps) {
|
|
const { notificationCount } = useNotifications();
|
|
const hasUnread = notificationCount.unread > 0;
|
|
|
|
return (
|
|
<div className={`relative ${className || ''}`}>
|
|
<Link
|
|
href='/notifications'
|
|
className='text-white/80 hover:text-white transition-colors relative'
|
|
aria-label={`Notifications${hasUnread ? ` (${notificationCount.unread} unread)` : ''}`}
|
|
>
|
|
<Bell className='w-5 h-5' />
|
|
{hasUnread && (
|
|
<Badge
|
|
variant="notification"
|
|
size="notification"
|
|
className="absolute -top-2 -right-2"
|
|
>
|
|
{notificationCount.unread > 99 ? '99+' : notificationCount.unread}
|
|
</Badge>
|
|
)}
|
|
</Link>
|
|
</div>
|
|
);
|
|
});
|