142 lines
4.4 KiB
TypeScript
142 lines
4.4 KiB
TypeScript
import { Card, CardContent } from '@/components/ui/Card';
|
|
import { TaskStats } from '@/lib/types';
|
|
import Link from 'next/link';
|
|
|
|
interface HeaderProps {
|
|
title: string;
|
|
subtitle: string;
|
|
stats: TaskStats;
|
|
syncing?: boolean;
|
|
}
|
|
|
|
export function Header({ title, subtitle, stats, syncing = false }: HeaderProps) {
|
|
return (
|
|
<header className="bg-slate-900/80 backdrop-blur-sm border-b border-slate-700/50 shadow-lg shadow-slate-900/20">
|
|
<div className="container mx-auto px-6 py-4">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
|
|
{/* Titre tech avec glow */}
|
|
<div className="flex items-center gap-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className={`w-3 h-3 rounded-full shadow-lg ${
|
|
syncing
|
|
? 'bg-yellow-400 animate-spin shadow-yellow-400/50'
|
|
: 'bg-cyan-400 animate-pulse shadow-cyan-400/50'
|
|
}`}></div>
|
|
<div>
|
|
<h1 className="text-2xl font-mono font-bold text-slate-100 tracking-wider">
|
|
{title}
|
|
</h1>
|
|
<p className="text-slate-400 mt-1 font-mono text-sm">
|
|
{subtitle} {syncing && '• Synchronisation...'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="hidden sm:flex items-center gap-4">
|
|
<Link
|
|
href="/"
|
|
className="text-slate-400 hover:text-cyan-400 transition-colors font-mono text-sm uppercase tracking-wider"
|
|
>
|
|
Kanban
|
|
</Link>
|
|
<Link
|
|
href="/tags"
|
|
className="text-slate-400 hover:text-purple-400 transition-colors font-mono text-sm uppercase tracking-wider"
|
|
>
|
|
Tags
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Stats tech dashboard */}
|
|
<div className="flex flex-wrap gap-3">
|
|
<StatCard
|
|
label="TOTAL"
|
|
value={String(stats.total).padStart(2, '0')}
|
|
color="blue"
|
|
/>
|
|
{stats.completed > 0 && (
|
|
<StatCard
|
|
label="DONE"
|
|
value={String(stats.completed).padStart(2, '0')}
|
|
color="green"
|
|
/>
|
|
)}
|
|
{stats.inProgress > 0 && (
|
|
<StatCard
|
|
label="ACTIVE"
|
|
value={String(stats.inProgress).padStart(2, '0')}
|
|
color="yellow"
|
|
/>
|
|
)}
|
|
{stats.todo > 0 && (
|
|
<StatCard
|
|
label="QUEUE"
|
|
value={String(stats.todo).padStart(2, '0')}
|
|
color="gray"
|
|
/>
|
|
)}
|
|
{stats.freeze > 0 && (
|
|
<StatCard
|
|
label="FREEZE"
|
|
value={String(stats.freeze).padStart(2, '0')}
|
|
color="blue"
|
|
/>
|
|
)}
|
|
{stats.cancelled > 0 && (
|
|
<StatCard
|
|
label="CANCEL"
|
|
value={String(stats.cancelled).padStart(2, '0')}
|
|
color="gray"
|
|
/>
|
|
)}
|
|
{stats.archived > 0 && (
|
|
<StatCard
|
|
label="ARCHIVE"
|
|
value={String(stats.archived).padStart(2, '0')}
|
|
color="gray"
|
|
/>
|
|
)}
|
|
<StatCard
|
|
label="RATE"
|
|
value={`${stats.completionRate}%`}
|
|
color="purple"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
interface StatCardProps {
|
|
label: string;
|
|
value: number | string;
|
|
color: 'blue' | 'green' | 'yellow' | 'gray' | 'purple';
|
|
}
|
|
|
|
function StatCard({ label, value, color }: StatCardProps) {
|
|
|
|
const textColors = {
|
|
blue: 'text-cyan-300',
|
|
green: 'text-emerald-300',
|
|
yellow: 'text-yellow-300',
|
|
gray: 'text-slate-300',
|
|
purple: 'text-purple-300'
|
|
};
|
|
|
|
return (
|
|
<Card variant="elevated" className="px-3 py-2 hover:border-opacity-75 transition-all duration-300">
|
|
<CardContent className="p-0">
|
|
<div className={`text-xs font-mono font-bold ${textColors[color]} opacity-75 uppercase tracking-wider`}>
|
|
{label}
|
|
</div>
|
|
<div className={`text-lg font-mono font-bold ${textColors[color]}`}>
|
|
{value}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|