app/components/admin/posts-filters.tsx

Functions

Imports

It imports app/components/admin/tab-link.tsx, app/lib/admin/posts-filters.ts. Imported by app/routes/admin.posts._index.tsx.

Source

1import { Form, Link } from "react-router";
2import { Select } from "capsomer/react/select";
3import { TabsNav } from "capsomer/react/tabs";
4
5import { TabLink } from "~/components/admin/tab-link";
6
7import { FILTER_KEYS, postsHref } from "~/lib/admin/posts-filters";
8
9import type { Route } from "../../routes/+types/admin.posts._index";
10
11type Listing = Route.ComponentProps["loaderData"];
12
13const STATUS_TABS = [
14  { key: "all", value: "", label: "All" },
15  { key: "published", value: "published", label: "Published" },
16  { key: "draft", value: "draft", label: "Drafts" },
17  { key: "scheduled", value: "scheduled", label: "Scheduled" },
18] as const;
19
20/** The status tabs, then the search box and the tag facet as one GET form. */
21export function PostsFilters({
22  filters,
23  filtered,
24  statusCounts,
25  tagOptions,
26}: {
27  filters: Listing["filters"];
28  filtered: boolean;
29  statusCounts: Listing["statusCounts"];
30  tagOptions: string[];
31}) {
32  return (
33    <>
34      <TabsNav aria-label="Filter by status" variant="line">
35        {STATUS_TABS.map((tab) => (
36          <TabLink
37            key={tab.label}
38            to={postsHref({ ...filters, status: tab.value })}
39            current={filters.status === tab.value}
40            count={statusCounts[tab.key]}
41            // The count in words: a bare numeral names no unit.
42            aria-label={`${tab.label}, ${statusCounts[tab.key]} post${statusCounts[tab.key] === 1 ? "" : "s"}`}
43          >
44            {tab.label}
45          </TabLink>
46        ))}
47      </TabsNav>
48
49      {/* The submit button keeps the tag facet usable with scripting off. */}
50      <Form method="get" action="/admin/posts" role="search" className="app-filters">
51        <div className="cap-field">
52          <label className="cap-field-label" htmlFor="posts-q">
53            Search titles and slugs
54          </label>
55          <input
56            id="posts-q"
57            className="cap-input"
58            type="search"
59            name={FILTER_KEYS.q}
60            defaultValue={filters.q}
61            placeholder="Search titles and slugs"
62          />
63        </div>
64        <div className="cap-field">
65          <label className="cap-field-label" htmlFor="posts-tag">
66            Tag
67          </label>
68          <Select
69            id="posts-tag"
70            name={FILTER_KEYS.tag}
71            native
72            defaultValue={filters.tag}
73            options={[{ value: "", label: "Any tag" }, ...tagOptions.map((tag) => ({ value: tag, label: tag }))]}
74          />
75        </div>
76        {/* Shown, never hidden: a focusable control nobody can see fails 2.4.7, and a select that
77            submitted on change would move the page under a keyboard user (3.2.2). */}
78        <button type="submit" className="cap-btn">
79          Apply
80        </button>
81        {/* A link, not a reset button: `reset` restores the form's defaults, which are the current filters. */}
82        {filtered ? (
83          <Link to="/admin/posts" className="cap-btn" data-variant="quiet">
84            Clear
85          </Link>
86        ) : null}
87      </Form>
88    </>
89  );
90}