68 lines
2.6 KiB
JavaScript
68 lines
2.6 KiB
JavaScript
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { KanbanCard } from './KanbanCard';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
|
|
/**
|
|
* Premium Kanban Board
|
|
* Production version - Clean and functional.
|
|
*/
|
|
export const KanbanBoard = ({
|
|
columns = [],
|
|
className
|
|
}) => {
|
|
return (
|
|
<div className={cn("flex gap-4 h-full w-full overflow-x-auto pb-4 custom-scrollbar", className)}>
|
|
{columns.map((column) => (
|
|
<div
|
|
key={column.id}
|
|
className="flex-shrink-0 w-80 flex flex-col bg-[#f4f7f9] dark:bg-[#0d0d0d] rounded-2xl border border-slate-200/50 dark:border-white/5"
|
|
>
|
|
{/* Column Header */}
|
|
<div className="p-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className={cn(
|
|
"w-2 h-2 rounded-full",
|
|
column.color === 'blue' && "bg-blue-500",
|
|
column.color === 'emerald' && "bg-emerald-500",
|
|
column.color === 'orange' && "bg-orange-500",
|
|
column.color === 'red' && "bg-red-500",
|
|
column.color === 'slate' && "bg-slate-400"
|
|
)} />
|
|
<h2 className="text-[11px] font-black uppercase text-slate-700 dark:text-slate-300 tracking-[0.05em]">
|
|
{column.title}
|
|
</h2>
|
|
<span className="ml-2 px-2 py-0.5 rounded-full bg-slate-200 dark:bg-white/10 text-[10px] font-bold text-slate-500 dark:text-slate-400">
|
|
{column.cards?.length || 0}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Cards Area */}
|
|
<ScrollArea className="flex-1 px-3">
|
|
<div className="flex flex-col gap-3 pb-4">
|
|
{column.cards?.map((card) => (
|
|
<KanbanCard
|
|
key={card.id}
|
|
title={card.title}
|
|
subtitle={card.subtitle}
|
|
date={card.date}
|
|
details={card.details}
|
|
statusColor={column.color}
|
|
/>
|
|
))}
|
|
|
|
{(!column.cards || column.cards.length === 0) && (
|
|
<div className="mt-8 flex flex-col items-center justify-center opacity-20 italic">
|
|
<div className="w-12 h-12 border-2 border-dashed border-slate-400 rounded-xl mb-2" />
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-slate-500">Sem Itens</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|