93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
import { Briefcase, Bot, Crown, FileText, Gamepad2, LayoutGrid, MessageCircle, Radar, Sparkles } from 'lucide-react';
|
|
import type { ComponentType } from 'react';
|
|
|
|
interface DashboardSidebarProps {
|
|
active?: DashboardNavKey;
|
|
onNavigate?: (target: DashboardNavKey) => void;
|
|
}
|
|
|
|
export type DashboardNavKey = 'dashboard' | 'jobs' | 'cv' | 'messages' | 'agents' | 'ai-agent' | 'simulator' | 'subscription';
|
|
|
|
interface NavItem {
|
|
accent?: boolean;
|
|
badge?: string;
|
|
dot?: boolean;
|
|
icon: ComponentType<{ size?: number; strokeWidth?: number }>;
|
|
key: DashboardNavKey;
|
|
label: string;
|
|
}
|
|
|
|
const primaryItems: NavItem[] = [
|
|
{ key: 'dashboard', label: 'Dashboard', icon: LayoutGrid },
|
|
{ key: 'jobs', label: 'Jobs', icon: Briefcase },
|
|
{ key: 'cv', label: 'CV', icon: FileText },
|
|
{ key: 'messages', label: 'Beskeder', icon: MessageCircle, badge: '3' },
|
|
];
|
|
|
|
const secondaryItems: NavItem[] = [
|
|
{ key: 'agents', label: 'Jobagenter', icon: Radar, dot: true },
|
|
{ key: 'ai-agent', label: 'AI-agent', icon: Bot, accent: true },
|
|
{ key: 'simulator', label: 'Simulator', icon: Gamepad2 },
|
|
{ key: 'subscription', label: 'Abonnement', icon: Crown },
|
|
];
|
|
|
|
export function DashboardSidebar({ active = 'dashboard', onNavigate }: DashboardSidebarProps) {
|
|
return (
|
|
<aside className="dash-sidebar">
|
|
<div className="dash-logo-row">
|
|
<div className="dash-logo-dot">A</div>
|
|
<span className="dash-logo-text">ARBEJD</span>
|
|
</div>
|
|
|
|
<nav className="dash-nav">
|
|
{primaryItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = item.key === active;
|
|
return (
|
|
<button
|
|
key={item.key}
|
|
type="button"
|
|
className={isActive ? 'dash-nav-item active' : 'dash-nav-item'}
|
|
onClick={() => onNavigate?.(item.key)}
|
|
>
|
|
<span className={item.accent ? 'dash-nav-icon accent' : 'dash-nav-icon'}>
|
|
<Icon size={19} strokeWidth={1.7} />
|
|
</span>
|
|
<span className="dash-nav-label">{item.label}</span>
|
|
{item.badge ? <span className="dash-nav-badge">{item.badge}</span> : null}
|
|
</button>
|
|
);
|
|
})}
|
|
|
|
<div className="dash-nav-divider" />
|
|
|
|
{secondaryItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = item.key === active;
|
|
return (
|
|
<button
|
|
key={item.key}
|
|
type="button"
|
|
className={isActive ? 'dash-nav-item active' : 'dash-nav-item'}
|
|
onClick={() => onNavigate?.(item.key)}
|
|
>
|
|
<span className={item.accent ? 'dash-nav-icon accent' : 'dash-nav-icon'}>
|
|
<Icon size={19} strokeWidth={1.7} />
|
|
</span>
|
|
<span className="dash-nav-label">{item.label}</span>
|
|
{item.dot ? <span className="dash-nav-dot" /> : null}
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="dash-sidebar-pro">
|
|
<div className="dash-sidebar-pro-glow" />
|
|
<Sparkles size={19} strokeWidth={1.8} />
|
|
<h4>Pro-medlemskab</h4>
|
|
<p>Faa ubegrænsede simuleringer</p>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|