Task Column

1"use client";
2 
3import { Status } from "@/mock-data/statuses";
4import { Task } from "@/mock-data/tasks";
5import { TaskCard } from "./task-card";
6import { Plus, MoreHorizontal } from "lucide-react";
7import { Button } from "@/components/ui/button";
8import { cn } from "@/lib/utils";
9 
10interface TaskColumnProps {
11  status: Status;
12  tasks: Task[];
13}
14 
15export function TaskColumn({ status, tasks }: TaskColumnProps) {
16  const StatusIcon = status.icon;
17 
18  return (
19    <div className="shrink-0 w-[300px] lg:w-[360px] flex flex-col h-full flex-1">
20      <div className="rounded-lg border border-border p-3 bg-muted/70 dark:bg-muted/50 flex flex-col max-h-full">
21        <div className="flex items-center justify-between mb-2 rounded-lg">
22          <div className="flex items-center gap-2">
23            <div className="size-4 flex items-center justify-center">
24              <StatusIcon />
25            </div>
26            <span className="text-sm font-medium">{status.name}</span>
27          </div>
28          <div className="flex items-center gap-1">
29            <Button variant="ghost" size="icon" className="h-6 w-6">
30              <Plus className="size-4" />
31            </Button>
32            <Button variant="ghost" size="icon" className="h-6 w-6">
33              <MoreHorizontal className="size-4" />
34            </Button>
35          </div>
36        </div>
37 
38        <div className="flex flex-col gap-3 overflow-y-auto h-full">
39          {tasks.map((task) => (
40            <TaskCard key={task.id} task={task} />
41          ))}
42 
43          <Button
44            variant="ghost"
45            size="sm"
46            className="gap-2 text-xs h-auto py-1 px-0 self-start hover:bg-background"
47          >
48            <Plus className="size-4" />
49            <span>Add task</span>
50          </Button>
51        </div>
52      </div>
53    </div>
54  );
55}
56