Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | 1069x 1069x 12x | import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
interface SortableHeaderProps {
label: string;
sortKey: string;
currentSortKey: string;
sortOrder: "asc" | "desc";
onSort: (key: string) => void;
className?: string;
}
export function SortableHeader({
label,
sortKey,
currentSortKey,
sortOrder,
onSort,
className = "",
}: SortableHeaderProps) {
const isActive = sortKey === currentSortKey;
return (
<th
className={`pb-3 font-medium cursor-pointer select-none hover:text-foreground-default transition-colors ${className}`}
onClick={() => onSort(sortKey)}
>
<span className="inline-flex items-center gap-1">
{label}
{isActive ? (
sortOrder === "asc" ? (
<ArrowUp className="h-3.5 w-3.5" />
) : (
<ArrowDown className="h-3.5 w-3.5" />
)
) : (
<ArrowUpDown className="h-3.5 w-3.5 text-foreground-subtle" />
)}
</span>
</th>
);
}
|