app/components/admin/media-empty-state.tsx

Functions

Imports

It imports app/lib/media/view.mjs. Imported by app/routes/admin.media._index.tsx.

Source

1import { Link } from "react-router";
2import { Empty } from "capsomer/react/empty";
3
4import type { hrefWith } from "~/lib/media/view.mjs";
5
6import type { Route } from "../../routes/+types/admin.media._index";
7
8type Listing = Extract<Route.ComponentProps["loaderData"], { detail: unknown }>;
9
10export function MediaEmptyState({
11  q,
12  lensCounts,
13  linkTo,
14}: {
15  q: Listing["q"];
16  lensCounts: Listing["lensCounts"];
17  linkTo: (over?: Parameters<typeof hrefWith>[1]) => string;
18}) {
19  if (lensCounts.all === 0 && !q) {
20    return (
21      <Empty
22        kind="nothing-yet"
23        title="Nothing here yet"
24        action={
25          /* A button, not a label: a label cannot take focus, so the keyboard could not reach it. */
26          <button
27            type="button"
28            className="cap-btn"
29            data-variant="primary"
30            onClick={() => document.getElementById("media-file")?.click()}
31          >
32            Upload the first file
33          </button>
34        }
35      >
36        Files you upload get a content-hashed address you can paste into any post. Anything committed
37        to the repository shows up automatically after a deploy.
38      </Empty>
39    );
40  }
41  if (q) {
42    return (
43      <Empty kind="no-match" title={<>Nothing matches &ldquo;{q}&rdquo;</>}>
44        Searched paths, names, alt text and tags.{" "}
45        <Link to={linkTo({ q: "", page: 1 })}>Clear the search</Link>, or look in{" "}
46        <Link to={linkTo({ q: "", role: "all", lens: "", page: 1 })}>every group</Link>.
47      </Empty>
48    );
49  }
50  return (
51    <Empty kind="all-clear" title="Nothing in this view">
52      Every file passes this check.{" "}
53      <Link to={linkTo({ lens: "", role: "all", page: 1 })}>Show everything</Link>.
54    </Empty>
55  );
56}