77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useRef, useEffect } from 'react';
|
|
|
|
interface AdminNotificationsBadgeProps {
|
|
total: number;
|
|
pendingOrders: number;
|
|
designApprovals: number;
|
|
photoRequests: number;
|
|
unreadMessages: number;
|
|
}
|
|
|
|
export default function AdminNotificationsBadge({
|
|
total,
|
|
pendingOrders,
|
|
designApprovals,
|
|
photoRequests,
|
|
unreadMessages,
|
|
}: AdminNotificationsBadgeProps) {
|
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const onClickOutside = (e: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) {
|
|
setShowTooltip(false);
|
|
}
|
|
};
|
|
document.addEventListener('mousedown', onClickOutside);
|
|
return () => document.removeEventListener('mousedown', onClickOutside);
|
|
}, []);
|
|
|
|
if (total === 0) return null;
|
|
|
|
return (
|
|
<div ref={ref} className="relative">
|
|
<button
|
|
onClick={() => setShowTooltip(!showTooltip)}
|
|
className="relative inline-flex items-center justify-center w-8 h-8 rounded-full bg-splash-pink text-white text-xs font-bold hover:bg-splash-pink-dark transition-colors"
|
|
title="Admin notifications"
|
|
>
|
|
{total}
|
|
</button>
|
|
|
|
{showTooltip && (
|
|
<div className="absolute right-0 top-full mt-2 w-64 bg-paper border border-line rounded shadow-lg p-4 z-50 text-sm space-y-2">
|
|
<p className="font-bold text-ink">Notifications</p>
|
|
{pendingOrders > 0 && (
|
|
<div className="flex items-center justify-between py-2 px-3 bg-surface rounded">
|
|
<span className="text-muted">Waiting payment</span>
|
|
<span className="font-bold text-splash-orange">{pendingOrders}</span>
|
|
</div>
|
|
)}
|
|
{designApprovals > 0 && (
|
|
<div className="flex items-center justify-between py-2 px-3 bg-surface rounded">
|
|
<span className="text-muted">Design approvals</span>
|
|
<span className="font-bold text-splash-blue">{designApprovals}</span>
|
|
</div>
|
|
)}
|
|
{photoRequests > 0 && (
|
|
<div className="flex items-center justify-between py-2 px-3 bg-surface rounded">
|
|
<span className="text-muted">Photo requests</span>
|
|
<span className="font-bold text-clay">{photoRequests}</span>
|
|
</div>
|
|
)}
|
|
{unreadMessages > 0 && (
|
|
<div className="flex items-center justify-between py-2 px-3 bg-surface rounded">
|
|
<span className="text-muted">Unread messages</span>
|
|
<span className="font-bold text-splash-pink">{unreadMessages}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|