File size: 4,594 Bytes
68c2137 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | import React from 'react';
import {
Sun,
Moon,
Settings,
Sparkles,
Activity,
Menu,
ChevronDown
} from 'lucide-react';
import type { ModelStats } from '../types/chat';
interface HeaderProps {
darkMode: boolean;
setDarkMode: (val: boolean) => void;
onOpenSettings: () => void;
onOpenDashboard: () => void;
onOpenSystemPrompt: () => void;
modelStats: ModelStats;
sidebarOpen: boolean;
setSidebarOpen: (val: boolean) => void;
}
export const Header: React.FC<HeaderProps> = ({
darkMode,
setDarkMode,
onOpenSettings,
onOpenDashboard,
onOpenSystemPrompt,
modelStats,
sidebarOpen,
setSidebarOpen
}) => {
return (
<header className="h-[72px] px-6 glass-header flex items-center justify-between z-30 shrink-0 sticky top-0 w-full">
<div className="flex items-center space-x-4">
<button
onClick={() => setSidebarOpen(!sidebarOpen)}
className="p-2 rounded-xl hover:bg-white/10 text-slate-300 md:hidden transition-colors"
>
<Menu className="w-5 h-5" />
</button>
<div className="flex items-center space-x-3">
{/* LawSLM Logo */}
<img src="/lawslm-logo.svg" alt="LawSLM" className="logo-img" />
<div>
<div className="flex items-center space-x-2">
<h1 className="font-extrabold text-lg tracking-tight text-white">
LawSLM
</h1>
<span className="px-2.5 py-0.5 text-[10px] font-bold rounded-full bg-orange-500/20 text-orange-400 border border-orange-500/30 tracking-wider">
v1.0 Scratch
</span>
</div>
<p className="text-[11px] text-slate-400 font-medium hidden sm:block">
Intelligent Legal & General Assistant
</p>
</div>
</div>
</div>
<div className="flex items-center space-x-2 sm:space-x-3">
{/* Model Selector */}
<button
onClick={onOpenDashboard}
className="hidden md:flex items-center space-x-2 px-3.5 py-2 rounded-xl bg-white/5 hover:bg-white/10 border border-orange-500/20 text-xs font-medium text-slate-200 transition-all shadow-sm"
>
<span className="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse" />
<span className="font-semibold">{modelStats.checkpointLoaded.split('/').pop()}</span>
<ChevronDown className="w-3.5 h-3.5 text-slate-400 ml-1" />
</button>
{/* System Prompt */}
<button
onClick={onOpenSystemPrompt}
title="System Prompt"
className="px-3.5 py-2 rounded-xl bg-white/5 hover:bg-white/10 border border-orange-500/20 text-slate-200 transition-all flex items-center space-x-2 text-xs font-medium shadow-sm"
>
<Sparkles className="w-4 h-4 text-orange-400" />
<span className="hidden lg:inline font-semibold">System Prompt</span>
</button>
{/* Dashboard */}
<button
onClick={onOpenDashboard}
title="Model Dashboard"
className="p-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-orange-500/20 text-orange-400 transition-all shadow-sm"
>
<Activity className="w-4 h-4" />
</button>
{/* Theme Toggle */}
<button
onClick={() => setDarkMode(!darkMode)}
title="Toggle Theme"
className="p-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-orange-500/20 text-orange-400 transition-all shadow-sm"
>
{darkMode ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4 text-slate-300" />}
</button>
{/* Settings */}
<button
onClick={onOpenSettings}
title="Settings"
className="p-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-orange-500/20 text-slate-300 transition-all shadow-sm"
>
<Settings className="w-4 h-4" />
</button>
{/* User Profile */}
<div className="flex items-center space-x-2.5 pl-3 border-l border-orange-500/15">
<div className="w-9 h-9 rounded-full bg-gradient-to-br from-orange-500 to-amber-600 flex items-center justify-center text-white text-xs font-bold shadow-md">
AK
</div>
<div className="hidden xl:block text-left">
<p className="text-xs font-bold text-white leading-none">Amit Kumar</p>
<p className="text-[10px] text-slate-400 mt-1 font-medium">Creator & Lead Eng</p>
</div>
</div>
</div>
</header>
);
};
|