52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
/**
|
|
* @file dashboard/KanbanColumn.tsx
|
|
* @description Client component rendering a single column in the kanban board, containing a status header, count, task list, and fallback empty states.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import { Plus } from "lucide-react";
|
|
import KanbanCard from "./KanbanCard";
|
|
import { KanbanColumnProps } from "@/types/tasks";
|
|
|
|
/**
|
|
* Renders a kanban column with an indicator color, title, task count, quick-add trigger,
|
|
* and a list of rendered task cards or an empty placeholder.
|
|
*
|
|
* @param {KanbanColumnProps} props - The component props defining column metadata and task lists.
|
|
* @returns {JSX.Element} The rendered kanban column component.
|
|
*/
|
|
export default function KanbanColumn(props: KanbanColumnProps) {
|
|
return (
|
|
<div className="flex flex-col p-2 gap-2 w-full bg-background-muted rounded">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-1 py-2">
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={`w-2 h-2 rounded-full ${props.color ?? "bg-gray-400"}`}
|
|
/>
|
|
<h2 className="text-sm font-medium">{props.title}</h2>
|
|
<span className="text-sm">{props.count}</span>
|
|
</div>
|
|
<button className="p-1 hover:bg-gray-100 rounded cursor-pointer">
|
|
<Plus size={14} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Task List */}
|
|
<div className="flex flex-col gap-2">
|
|
{props.tasks.length === 0 ? (
|
|
<div className="p-4 text-sm text-center border border-dashed rounded bg-card">
|
|
No tasks
|
|
</div>
|
|
) : (
|
|
props.tasks.map((task) => (
|
|
<div key={task.id} className="p-3 border rounded shadow-sm bg-card">
|
|
<KanbanCard task={task} />
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|