initial: standalone repo from monorepo split
This commit is contained in:
kevin-asprec
165
src/components/layout/header.tsx
Normal file
165
src/components/layout/header.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useTheme } from 'next-themes';
|
||||
import { logout } from '@/lib/auth';
|
||||
import { useAuthStore } from '@/stores/auth.store';
|
||||
import { api } from '@/lib/api';
|
||||
|
||||
function timeAgo(date: string) {
|
||||
const seconds = Math.floor((Date.now() - new Date(date).getTime()) / 1000);
|
||||
if (seconds < 60) return 'just now';
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days}d ago`;
|
||||
}
|
||||
|
||||
interface Notification {
|
||||
id: string;
|
||||
title: string;
|
||||
message: string;
|
||||
isRead: boolean;
|
||||
createdAt: string;
|
||||
channel: string;
|
||||
}
|
||||
|
||||
export function Header({ onSupportOpen }: { onSupportOpen: () => void }) {
|
||||
const router = useRouter();
|
||||
const { theme, setTheme } = useTheme();
|
||||
const logoutStore = useAuthStore((s) => s.logout);
|
||||
const [unread, setUnread] = useState(0);
|
||||
const [showNotifs, setShowNotifs] = useState(false);
|
||||
const [notifs, setNotifs] = useState<Notification[]>([]);
|
||||
|
||||
const fetchUnread = useCallback(() => {
|
||||
api.get('/notifications/unread-count').then((r) => setUnread(r.data.data.count)).catch(() => {});
|
||||
}, []);
|
||||
|
||||
// Auto-refresh unread count every 30s and on window focus
|
||||
useEffect(() => {
|
||||
fetchUnread();
|
||||
const interval = setInterval(fetchUnread, 30_000);
|
||||
const onFocus = () => fetchUnread();
|
||||
window.addEventListener('focus', onFocus);
|
||||
return () => { clearInterval(interval); window.removeEventListener('focus', onFocus); };
|
||||
}, [fetchUnread]);
|
||||
|
||||
async function toggleNotifs() {
|
||||
const next = !showNotifs;
|
||||
setShowNotifs(next);
|
||||
if (next) {
|
||||
const res = await api.get('/notifications');
|
||||
setNotifs(res.data.data);
|
||||
}
|
||||
}
|
||||
|
||||
async function markAllRead() {
|
||||
await api.patch('/notifications/read-all');
|
||||
setUnread(0);
|
||||
setNotifs(notifs.map((n) => ({ ...n, isRead: true })));
|
||||
}
|
||||
|
||||
async function markOneRead(id: string) {
|
||||
await api.patch(`/notifications/${id}/read`);
|
||||
setNotifs(notifs.map((n) => n.id === id ? { ...n, isRead: true } : n));
|
||||
setUnread((u) => Math.max(0, u - 1));
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
logout();
|
||||
logoutStore();
|
||||
router.push('/login');
|
||||
}
|
||||
|
||||
return (
|
||||
<header className="h-14 bg-white/80 dark:bg-surface-900/80 backdrop-blur-sm border-b border-surface-200/60 dark:border-surface-700/60 flex items-center justify-end gap-3 px-6 shrink-0 z-10">
|
||||
{/* Notification bell */}
|
||||
<div className="relative">
|
||||
<button onClick={toggleNotifs}
|
||||
className="relative p-2 text-surface-400 hover:text-surface-700 dark:hover:text-surface-200 transition-colors duration-200 cursor-pointer rounded-lg hover:bg-surface-50 dark:hover:bg-surface-700">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
|
||||
<path d="M13.73 12.73A14.65 14.65 0 0014.5 9V7.5a5.5 5.5 0 10-11 0V9c0 1.3.26 2.56.77 3.73L3 14h12l-1.27-1.27z" />
|
||||
<path d="M7 14v.5a2 2 0 004 0V14" />
|
||||
</svg>
|
||||
{unread > 0 && (
|
||||
<span className="absolute -top-0.5 -right-0.5 w-4 h-4 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
|
||||
{unread > 9 ? '9+' : unread}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{showNotifs && (
|
||||
<div className="absolute right-0 top-12 w-80 bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-xl shadow-lg shadow-surface-200/50 dark:shadow-surface-900/50 overflow-hidden z-50">
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-surface-100 dark:border-surface-700">
|
||||
<span className="text-sm font-semibold text-surface-800 dark:text-surface-200">Notifications</span>
|
||||
{unread > 0 && (
|
||||
<button onClick={markAllRead} className="text-xs text-primary-600 dark:text-primary-400 hover:text-primary-700 cursor-pointer">Mark all read</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="max-h-64 overflow-y-auto">
|
||||
{notifs.length > 0 ? notifs.map((n) => (
|
||||
<button
|
||||
key={n.id}
|
||||
onClick={() => { if (!n.isRead) markOneRead(n.id); }}
|
||||
className={`w-full text-left px-4 py-3 border-b border-surface-50 dark:border-surface-700/50 transition-colors ${
|
||||
!n.isRead ? 'bg-primary-50/30 dark:bg-primary-900/20 hover:bg-primary-50/50 dark:hover:bg-primary-900/30' : 'hover:bg-surface-50 dark:hover:bg-surface-700/50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-sm text-surface-800 dark:text-surface-200">{n.title}</p>
|
||||
{!n.isRead && <span className="mt-1.5 w-2 h-2 rounded-full bg-primary-500 shrink-0" />}
|
||||
</div>
|
||||
<p className="text-xs text-surface-400 dark:text-surface-500 mt-0.5">{n.message}</p>
|
||||
<p className="text-[10px] text-surface-300 dark:text-surface-600 mt-1">{timeAgo(n.createdAt)}</p>
|
||||
</button>
|
||||
)) : (
|
||||
<div className="px-4 py-6 text-center text-sm text-surface-400 dark:text-surface-500">No notifications</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dark/Light mode toggle */}
|
||||
<button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
||||
className="p-2 text-surface-400 hover:text-surface-700 dark:hover:text-surface-200 transition-colors duration-200 cursor-pointer rounded-lg hover:bg-surface-50 dark:hover:bg-surface-700"
|
||||
title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}>
|
||||
{theme === 'dark' ? (
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
|
||||
<circle cx="9" cy="9" r="3.5" />
|
||||
<path d="M9 1.5v1M9 15.5v1M1.5 9h1M15.5 9h1M3.4 3.4l.7.7M13.9 13.9l.7.7M3.4 14.6l.7-.7M13.9 4.1l.7-.7" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M14 10.7A6 6 0 017.3 4 6 6 0 1014 10.7z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Support icon */}
|
||||
<button onClick={onSupportOpen}
|
||||
className="p-2 text-surface-400 hover:text-surface-700 dark:hover:text-surface-200 transition-colors duration-200 cursor-pointer rounded-lg hover:bg-surface-50 dark:hover:bg-surface-700"
|
||||
title="Support">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="9" cy="9" r="7.5" />
|
||||
<path d="M6.75 7.5a2.25 2.25 0 014.5 0c0 1.5-2.25 1.875-2.25 3" />
|
||||
<circle cx="9" cy="13.125" r="0.375" fill="currentColor" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div className="w-px h-5 bg-surface-200 dark:bg-surface-700" />
|
||||
|
||||
<button onClick={handleLogout}
|
||||
className="flex items-center gap-2 text-sm text-surface-500 dark:text-surface-400 hover:text-surface-800 dark:hover:text-surface-200 transition-colors duration-200 cursor-pointer">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
|
||||
<path d="M6 2H3a1 1 0 00-1 1v10a1 1 0 001 1h3M11 11l3-3-3-3M14 8H6" />
|
||||
</svg>
|
||||
Sign out
|
||||
</button>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user