79f8035d18
- Added `clsx` and `tailwind-merge` to `package.json` and `package-lock.json` for improved class management and utility merging. - Updated `Column` and `TaskCard` components to utilize new UI components (`Card`, `Badge`) for a more cohesive design. - Refactored styles in `Header` and Kanban components to align with the new design system. - Marked several tasks as completed in `TODO.md` reflecting progress on UI enhancements.
94 lines
3.2 KiB
TypeScript
94 lines
3.2 KiB
TypeScript
import { Task, TaskStatus } from '@/lib/types';
|
|
import { TaskCard } from './TaskCard';
|
|
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
|
import { Badge } from '@/components/ui/Badge';
|
|
|
|
interface KanbanColumnProps {
|
|
id: TaskStatus;
|
|
title: string;
|
|
color: string;
|
|
tasks: Task[];
|
|
}
|
|
|
|
export function KanbanColumn({ id, title, color, tasks }: KanbanColumnProps) {
|
|
// Couleurs tech/cyberpunk
|
|
const techStyles = {
|
|
gray: {
|
|
border: 'border-slate-700',
|
|
glow: 'shadow-slate-500/20',
|
|
accent: 'text-slate-400',
|
|
badge: 'bg-slate-800 text-slate-300 border border-slate-600'
|
|
},
|
|
blue: {
|
|
border: 'border-cyan-500/30',
|
|
glow: 'shadow-cyan-500/20',
|
|
accent: 'text-cyan-400',
|
|
badge: 'bg-cyan-950 text-cyan-300 border border-cyan-500/30'
|
|
},
|
|
green: {
|
|
border: 'border-emerald-500/30',
|
|
glow: 'shadow-emerald-500/20',
|
|
accent: 'text-emerald-400',
|
|
badge: 'bg-emerald-950 text-emerald-300 border border-emerald-500/30'
|
|
},
|
|
red: {
|
|
border: 'border-red-500/30',
|
|
glow: 'shadow-red-500/20',
|
|
accent: 'text-red-400',
|
|
badge: 'bg-red-950 text-red-300 border border-red-500/30'
|
|
}
|
|
};
|
|
|
|
const style = techStyles[color as keyof typeof techStyles];
|
|
|
|
// Icônes tech
|
|
const techIcons = {
|
|
todo: '⚡',
|
|
in_progress: '🔄',
|
|
done: '✓',
|
|
cancelled: '✕'
|
|
};
|
|
|
|
const badgeVariant = color === 'green' ? 'success' : color === 'blue' ? 'primary' : color === 'red' ? 'danger' : 'default';
|
|
|
|
return (
|
|
<div className="flex-shrink-0 w-80 h-full">
|
|
<Card variant="elevated" className="h-full flex flex-col">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-2 h-2 rounded-full ${style.accent.replace('text-', 'bg-')} animate-pulse`}></div>
|
|
<h3 className={`font-mono text-sm font-bold ${style.accent} uppercase tracking-wider`}>
|
|
{title}
|
|
</h3>
|
|
</div>
|
|
<Badge variant={badgeVariant} size="sm">
|
|
{String(tasks.length).padStart(2, '0')}
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent className="flex-1 p-4 h-[calc(100vh-220px)] overflow-y-auto">
|
|
<div className="space-y-3">
|
|
{tasks.length === 0 ? (
|
|
<div className="text-center py-20">
|
|
<div className={`w-16 h-16 mx-auto mb-4 rounded-full bg-slate-800 border-2 border-dashed ${style.border} flex items-center justify-center`}>
|
|
<span className={`text-2xl ${style.accent} opacity-50`}>{techIcons[id]}</span>
|
|
</div>
|
|
<p className="text-xs font-mono text-slate-500 uppercase tracking-wide">NO DATA</p>
|
|
<div className="mt-2 flex justify-center">
|
|
<div className={`w-8 h-0.5 ${style.accent.replace('text-', 'bg-')} opacity-30`}></div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
tasks.map((task) => (
|
|
<TaskCard key={task.id} task={task} />
|
|
))
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|