app/components/admin/media-search.tsx

Functions

Imports

It imports app/components/admin/media-palette.tsx, app/lib/media/view.mjs. Imported by app/routes/admin.media._index.tsx.

Source

1import { Form, Link } from "react-router";
2
3import { MediaPalette } from "~/components/admin/media-palette";
4import type { hrefWith, sortHref } from "~/lib/media/view.mjs";
5
6/** The library search, which carries every other view axis along, and its palette. */
7export function MediaSearch({
8  q,
9  total,
10  view,
11  linkTo,
12}: {
13  q: string;
14  total: number;
15  view: Parameters<typeof sortHref>[0];
16  linkTo: (over?: Parameters<typeof hrefWith>[1]) => string;
17}) {
18  return (
19    <>
20      <Form method="get" action="/admin/media" role="search" className="app-filters">
21        <div className="cap-field">
22          {/* A visible label, not the placeholder alone, which disappears once anything is typed. The
23              input's fuller aria-label starts with the same word. */}
24          <label htmlFor="media-q" className="cap-field-label">
25            Search
26          </label>
27          <input
28            id="media-q"
29            className="cap-input"
30            type="search"
31            name="q"
32            defaultValue={q}
33            placeholder={`Search ${total} files`}
34            aria-label={`Search ${total} files by name, address, alt text or caption`}
35          />
36        </div>
37        {/* Other axes ride as hidden fields, or searching would drop the lens and folder. */}
38        <input type="hidden" name="lens" value={view.lens} />
39        <input type="hidden" name="group" value={view.group} />
40        <input type="hidden" name="view" value={view.view} />
41        <input type="hidden" name="sort" value={view.sort} />
42        <input type="hidden" name="dir" value={view.dir} />
43        <input type="hidden" name="size" value={view.size} />
44        <input type="hidden" name="role" value={view.role} />
45        <input type="hidden" name="tag" value={view.tag} />
46        <input type="hidden" name="trash" value={view.trash ? "1" : ""} />
47        <button type="submit" className="cap-btn">
48          Search
49        </button>
50        {q ? (
51          <Link to={linkTo({ q: "", page: 1 })} className="cap-btn" data-variant="quiet">
52            Clear
53          </Link>
54        ) : null}
55        <span aria-hidden="true">
56          <kbd>{"⌘K"}</kbd>
57        </span>
58      </Form>
59      <MediaPalette inputId="media-q" />
60    </>
61  );
62}