61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
/**
|
|
* @file app/(app)/dashboard/column/ColumnHeader.tsx
|
|
* @description Component rendering the column header with title, color indicator, item count, and add button with pre-filled status.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import { Plus } from "lucide-react";
|
|
import { useRouter } from "next/navigation";
|
|
import { TaskStatus } from "@/lib/types/task";
|
|
|
|
/**
|
|
* Properties for the ColumnHeader component.
|
|
*
|
|
* @interface ColumnHeaderProps
|
|
* @property {TaskStatus} id - The unique identifier/status of the column.
|
|
* @property {string} title - The title of the column.
|
|
* @property {string} [color] - Tailwind CSS color class for the status indicator dot.
|
|
* @property {number} count - The number of tasks currently inside this column.
|
|
*/
|
|
interface ColumnHeaderProps {
|
|
id: TaskStatus;
|
|
title: string;
|
|
color?: string;
|
|
count: number;
|
|
}
|
|
|
|
/**
|
|
* Renders the header section of a column, displaying a color-coded status indicator,
|
|
* the column name, the total task count badge, and a button to add new tasks pre-filled with the column status.
|
|
*
|
|
* @param {ColumnHeaderProps} props - The component props.
|
|
* @returns {JSX.Element} The rendered column header component.
|
|
*/
|
|
export default function ColumnHeader({
|
|
id,
|
|
title,
|
|
color = "bg-primary",
|
|
count,
|
|
}: ColumnHeaderProps) {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<div className="flex items-center justify-between mb-4 pb-2 border-b border-border/40">
|
|
<div className="flex items-center gap-2.5">
|
|
<span className={`w-2.5 h-2.5 rounded-full shadow-sm ${color}`} />
|
|
<h2 className="font-bold text-xs uppercase tracking-wider">{title}</h2>
|
|
<span className="text-xs bg-card text-foreground-muted px-2 py-0.5 rounded-full font-semibold border border-border/60">
|
|
{count}
|
|
</span>
|
|
</div>
|
|
<button
|
|
onClick={() => router.push(`/tasks?task=new&status=${id}`)}
|
|
className="text-black hover:text-foreground p-1 rounded-lg border border-black hover:border-foreground bg-primary hover:bg-primary-hover transition-all duration-200 cursor-pointer shadow-sm active:scale-90"
|
|
aria-label={`Add task to ${title}`}
|
|
>
|
|
<Plus size={16} />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|