app/components/admin/media-list-header.tsx

Functions

Imports

It imports app/lib/media/view.mjs. Imported by app/components/admin/media-grid.tsx.

Source

1import { Link } from "react-router";
2
3import { sortHref } from "~/lib/media/view.mjs";
4
5const LIST_COLUMNS: Array<[sortKey: string | null, label: string, num: boolean]> = [
6  ["name", "Name", false],
7  ["usage", "Usage", false],
8  [null, "Dims", true],
9  ["size", "Size", true],
10  ["added", "Added", true],
11];
12
13// Dims is not sortable: half the library has no dimensions, which would collapse into one block.
14export function MediaListHeader({
15  view,
16}: {
17  view: Parameters<typeof sortHref>[0];
18}) {
19  const arrow = view.dir === "asc" ? "↑" : "↓";
20
21  return (
22    <tr>
23      <th scope="col">
24        <span className="cap-sr-only">Select</span>
25      </th>
26      {LIST_COLUMNS.map(([key, label, num]) =>
27        key === null ? (
28          <th key={label} scope="col" data-num={num || undefined}>
29            {label}
30          </th>
31        ) : (
32          <th
33            key={key}
34            scope="col"
35            data-num={num || undefined}
36            aria-sort={view.sort === key ? (view.dir === "asc" ? "ascending" : "descending") : undefined}
37          >
38            <Link to={sortHref(view, key, { toggle: true })} className="cap-table-sort" data-sort={key}>
39              {label}
40              <span aria-hidden="true">{view.sort === key ? ` ${arrow}` : ""}</span>
41              {/* The sorted column says so in words inside its link. */}
42              {view.sort === key ? (
43                <span className="cap-sr-only">
44                  , sorted {view.dir === "asc" ? "ascending" : "descending"}
45                </span>
46              ) : null}
47            </Link>
48          </th>
49        ),
50      )}
51      <th scope="col">
52        <span className="cap-sr-only">Copy the address</span>
53      </th>
54    </tr>
55  );
56}