120 lines
4.5 KiB
TypeScript
120 lines
4.5 KiB
TypeScript
'use client';
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Search, Bell, User, ChevronDown, Command } from 'lucide-react';
|
|
import { usePathname } from 'next/navigation';
|
|
import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import { Button } from '@/ui/Button';
|
|
import { useState, useEffect } from 'react';
|
|
import { AppShellBar } from './AppShellBar';
|
|
|
|
export function AppHeader() {
|
|
const pathname = usePathname();
|
|
const { data: session } = useCurrentSession();
|
|
const isAuthenticated = !!session;
|
|
|
|
// Simple breadcrumb logic
|
|
const pathSegments = pathname.split('/').filter(Boolean);
|
|
const breadcrumbs = pathSegments.length > 0
|
|
? pathSegments.map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' / ')
|
|
: 'Home';
|
|
|
|
// Clock
|
|
const [time, setTime] = useState<string>('');
|
|
useEffect(() => {
|
|
const updateTime = () => {
|
|
const now = new Date();
|
|
setTime(now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }));
|
|
};
|
|
updateTime();
|
|
const interval = setInterval(updateTime, 60000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<AppShellBar position="top">
|
|
{/* Left: Context & Search */}
|
|
<Box display="flex" alignItems="center" gap={6} flex={1}>
|
|
<Text size="sm" className="text-text-med font-medium tracking-wide whitespace-nowrap min-w-[100px]">
|
|
{breadcrumbs}
|
|
</Text>
|
|
|
|
{/* Command Search - Refined */}
|
|
<Box
|
|
className="hidden md:flex items-center gap-3 px-3 h-9 bg-surface-charcoal/50 border border-outline-steel rounded-md w-96 text-text-low hover:border-text-low/50 focus-within:border-primary-accent focus-within:ring-1 focus-within:ring-primary-accent/20 transition-all cursor-text group"
|
|
>
|
|
<Search size={14} className="text-text-low group-hover:text-text-med transition-colors" />
|
|
<Box
|
|
as="input"
|
|
type="text"
|
|
placeholder="Search or type a command..."
|
|
className="bg-transparent border-none outline-none text-sm w-full text-text-high placeholder:text-text-low/50 h-full"
|
|
/>
|
|
<Box className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-white/5 border border-white/5 text-[10px] font-mono text-text-low">
|
|
<Command size={10} />
|
|
<span>K</span>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Right: System Status & User */}
|
|
<Box display="flex" alignItems="center" gap={4}>
|
|
{/* System Time */}
|
|
<Box className="hidden lg:flex items-center gap-2 text-text-med border-r border-outline-steel pr-4 h-6">
|
|
<Text size="sm" font="mono" className="tracking-widest tabular-nums">
|
|
{time} UTC
|
|
</Text>
|
|
</Box>
|
|
|
|
{/* Notifications */}
|
|
<Box
|
|
as="button"
|
|
className="w-8 h-8 flex items-center justify-center text-text-low hover:text-text-high hover:bg-white/5 transition-colors rounded-md relative"
|
|
title="Notifications"
|
|
>
|
|
<Bell size={16} />
|
|
<Box className="absolute top-2 right-2 w-1.5 h-1.5 bg-primary-accent rounded-full ring-2 ring-base-black" />
|
|
</Box>
|
|
|
|
{/* User Menu */}
|
|
{isAuthenticated ? (
|
|
<Box display="flex" alignItems="center" gap={3} className="pl-2 cursor-pointer group">
|
|
<Box
|
|
className="w-8 h-8 rounded-full bg-surface-charcoal flex items-center justify-center text-text-med border border-outline-steel group-hover:border-primary-accent transition-colors"
|
|
>
|
|
<User size={14} />
|
|
</Box>
|
|
<Box className="hidden md:block text-left">
|
|
<Text size="sm" weight="medium" className="text-text-high leading-none group-hover:text-primary-accent transition-colors">
|
|
{session.user.displayName || 'Driver'}
|
|
</Text>
|
|
</Box>
|
|
<ChevronDown size={12} className="text-text-low group-hover:text-text-high transition-colors" />
|
|
</Box>
|
|
) : (
|
|
<Box display="flex" gap={2}>
|
|
<Button
|
|
as="a"
|
|
href={routes.auth.login}
|
|
variant="ghost"
|
|
size="sm"
|
|
>
|
|
Sign In
|
|
</Button>
|
|
<Button
|
|
as="a"
|
|
href={routes.auth.signup}
|
|
variant="primary"
|
|
size="sm"
|
|
>
|
|
Join
|
|
</Button>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</AppShellBar>
|
|
);
|
|
}
|