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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 1099x 1099x 9x | import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
import { TableHead } from "../ui/table";
/**
* A sortable column head for the Job Book's ruled admin tables.
*
* WHY THIS EXISTS alongside `components/ui/sortable-header.tsx`
* The older `SortableHeader` renders its own bare `<th className="pb-3">`. Drop
* it into the `Table` primitive and the column head loses the family's
* horizontal padding (`px-3`), so its label no longer lines up with the cells
* underneath it — the one thing a ruled, dense, tabular surface may not get
* wrong. This composes `TableHead` instead, so padding, caps, the strong
* header rule and the numeric alignment all come from the single place that
* decides them.
*
* It also fixes two accessibility defects the old component has:
*
* - the click target was the `<th>` itself, which is not focusable and has no
* keyboard path (WCAG 2.1.1). The target here is a real `<button>`.
* - no `aria-sort`, so a screen reader could not tell which column was sorted
* or in which direction (WCAG 1.3.1). It is set on the `<th>`, which is
* where the attribute belongs.
*
* `onSort` keeps the old string signature so the admin call sites can hand it
* the same `toggleSort` from `useSortable` they already use.
*/
export interface SortableTableHeadProps {
label: string;
sortKey: string;
currentSortKey: string;
sortOrder: "asc" | "desc";
onSort: (key: string) => void;
/** Right-align the label and the figures under it. */
numeric?: boolean;
className?: string;
}
export function SortableTableHead({
label,
sortKey,
currentSortKey,
sortOrder,
onSort,
numeric,
className,
}: SortableTableHeadProps) {
const isActive = sortKey === currentSortKey;
return (
<TableHead
numeric={numeric}
className={className}
aria-sort={
isActive
? sortOrder === "asc"
? "ascending"
: "descending"
: "none"
}
>
<button
type="button"
onClick={() => onSort(sortKey)}
className="inline-flex items-center gap-1 uppercase tracking-wider transition-colors hover:text-foreground-default focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground-default"
>
{label}
{isActive ? (
sortOrder === "asc" ? (
<ArrowUp aria-hidden="true" className="h-3.5 w-3.5" />
) : (
<ArrowDown aria-hidden="true" className="h-3.5 w-3.5" />
)
) : (
<ArrowUpDown
aria-hidden="true"
className="h-3.5 w-3.5 text-foreground-subtle"
/>
)}
</button>
</TableHead>
);
}
|