46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { TableHead } from "@/components/ui/table";
|
|
import { cn } from "@/lib/utils";
|
|
import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
|
|
import type { SortState } from "@/hooks/use-table-sort";
|
|
|
|
interface SortableTableHeadProps {
|
|
column: string;
|
|
label: string;
|
|
sort: SortState;
|
|
onToggle: (column: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function SortableTableHead({
|
|
column,
|
|
label,
|
|
sort,
|
|
onToggle,
|
|
className = "",
|
|
}: SortableTableHeadProps) {
|
|
const isActive = sort.column === column;
|
|
|
|
return (
|
|
<TableHead
|
|
className={cn("cursor-pointer select-none hover:text-foreground transition-colors", className)}
|
|
onClick={() => onToggle(column)}
|
|
>
|
|
<span className={cn(
|
|
"inline-flex items-center gap-1",
|
|
className?.includes("text-right") ? "ml-auto" : ""
|
|
)}>
|
|
{label}
|
|
{isActive && sort.direction === "asc" ? (
|
|
<ArrowUp className="h-3 w-3 text-primary" />
|
|
) : isActive && sort.direction === "desc" ? (
|
|
<ArrowDown className="h-3 w-3 text-primary" />
|
|
) : (
|
|
<ArrowUpDown className="h-3 w-3 opacity-30" />
|
|
)}
|
|
</span>
|
|
</TableHead>
|
|
);
|
|
}
|