A client-side React component that renders a single sortable column item, cycling through ascending, descending, and cleared sort states on click. ## Key Components ### Interfaces & Types - **`SortableColumn`** — Defines a column with `key`, `label`, and optional `sortKey` - **`SortDirection`** — Union type `"asc" | "desc"` - **`SortConfig`** — Configuration shape for a full sort UI (columns list, active sort state, title) - **`SortColumnItemProps`** — Props for the `SortColumnItem` component ### Component: `SortColumnItem` Renders a clickable row displaying a column label and a directional sort icon. Click behavior cycles through states: 1. No sort → `"asc"` 2. `"asc"` → `"desc"` 3. `"desc"` → calls `onClear()` (if provided) or resets to `"asc"` Icons used per state: - `Arrow01UpIcon` — ascending (accent color) - `Arrow01DownIcon` — descending (accent color) - `SwitchVrIcon` — unsorted (secondary color) ## Usage Example ```typescript import { SortColumnItem, SortableColumn, SortDirection } from "./sort-column-item" const column: SortableColumn = { key: "name", label: "Name", sortKey: "name" } function MyTable() { const [direction, setDirection] = useState() return ( setDirection(dir)} onClear={() => setDirection(undefined)} /> ) } ```