Spaces:
Sleeping
Sleeping
File size: 3,865 Bytes
743409d | 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 | import { Shield, LayoutDashboard, Database, Cpu, Sun, Moon, TrendingUp } from 'lucide-react';
interface DashboardHeaderProps {
activeTab: string;
setActiveTab: (tab: string) => void;
isDarkMode: boolean;
setIsDarkMode: (dark: boolean) => void;
}
export function DashboardHeader({ activeTab, setActiveTab, isDarkMode, setIsDarkMode }: DashboardHeaderProps) {
const tabs = [
{ id: 'auditor', label: 'Screenshot Auditor', icon: LayoutDashboard },
{ id: 'market', label: 'Real-Time Markets', icon: TrendingUp },
{ id: 'explorer', label: 'Model & Dataset Explorer', icon: Database },
];
return (
<header className="sticky top-0 z-50 bg-card/60 backdrop-blur-md border-b border-border shadow-lg transition-colors duration-300">
<div className="container mx-auto px-6 py-4 max-w-7xl">
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
{/* Brand Info */}
<div className="flex items-center gap-3">
<div className="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-2.5 rounded-xl shadow-[0_0_15px_rgba(99,102,241,0.4)]">
<Shield className="w-7 h-7 text-white" />
</div>
<div>
<div className="flex items-center gap-2">
<h1 className="text-xl font-bold bg-gradient-to-r from-foreground via-foreground/90 to-muted-foreground bg-clip-text text-transparent">
Fintech Dark Pattern Detector
</h1>
<span className="text-[10px] font-mono font-semibold bg-indigo-500/10 text-indigo-500 dark:text-indigo-400 border border-indigo-500/20 px-2 py-0.5 rounded-full">
v1.2.0
</span>
</div>
<p className="text-xs text-muted-foreground flex items-center gap-1.5 mt-0.5">
<Cpu className="w-3.5 h-3.5 text-indigo-500 dark:text-indigo-400" />
AI-Powered XAI Compliance Analyzer (TF-IDF & Logistic Regression)
</p>
</div>
</div>
{/* Navigation & Theme Switcher */}
<div className="flex items-center gap-3">
<nav className="flex bg-slate-900/10 dark:bg-slate-900/60 p-1.5 rounded-xl border border-border">
{tabs.map((tab) => {
const Icon = tab.icon;
const isActive = activeTab === tab.id;
return (
<button
key={tab.id}
onClick={() => setActiveTab(tab.id)}
className={`flex items-center gap-2 px-4 py-2 text-xs font-semibold rounded-lg transition-all duration-300 ${
isActive
? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-md shadow-indigo-500/20 scale-[1.02]'
: 'text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5'
}`}
>
<Icon className="w-4 h-4" />
{tab.label}
</button>
);
})}
</nav>
{/* Theme Toggle Button */}
<button
onClick={() => setIsDarkMode(!isDarkMode)}
className="p-2.5 rounded-xl border border-border bg-card hover:bg-muted/50 text-muted-foreground hover:text-foreground transition-all duration-300 shadow-md flex items-center justify-center cursor-pointer"
title={isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
>
{isDarkMode ? (
<Sun className="w-4 h-4 text-amber-400" />
) : (
<Moon className="w-4 h-4 text-indigo-500" />
)}
</button>
</div>
</div>
</div>
</header>
);
}
|