import { ResourceIndexPage } from "@/components/ds/recipes";
import { DataGrid, FilterBar } from "@/components/ds/grid";
import { Pagination } from "@savethemarshalldogs/design-system";

<ResourceIndexPage
  title="Rescuers"
  primaryAction={{ key: "new", label: "New rescuer", href: "/admin/rescuers/new" }}
  toolbar={<FilterBar fields={fields} value={filter} onChange={setFilter} search={search} />}
  table={<DataGrid<Rescuer> rows={rows} columns={columns} getRowId={(r) => r.id} selectable density="compact" stickyHeader />}
  footer={<Pagination page={page} pageCount={pageCount} hrefFor={(p) => `?page=${p}`} />}
/>

import { ResourceIndexPage } from "@/components/ds/recipes";
import { CommandBar } from "@/components/ds/surface";
import { FacetRail } from "@/components/ds/grid";
import { Pagination } from "@savethemarshalldogs/design-system";

<ResourceIndexPage
  title={`Results for "${q}"`}
  toolbar={<CommandBar search={<Input type="search" defaultValue={q} />} controls={scopeChips} />}
  facets={<FacetRail>{facetGroups}</FacetRail>}
  table={<SearchResultList items={results} />}
  footer={<Pagination page={page} pageCount={pageCount} hrefFor={hrefFor} />}
/>

import { ResourceIndexPage } from "@/components/ds/recipes";
import { FilterBar } from "@/components/ds/grid";
import { AuditEntry, Pagination } from "@savethemarshalldogs/design-system";

<ResourceIndexPage
  title="Audit log"
  toolbar={<FilterBar fields={auditFields} value={filter} onChange={setFilter} />}
  table={
    <ol className="space-y-2">
      {entries.map((e) => (
        <li key={e.id}>
          <AuditEntry actor={e.actor} action={e.action} time={e.time} />
        </li>
      ))}
    </ol>
  }
  footer={<Pagination page={page} pageCount={pageCount} hrefFor={hrefFor} />}
/>

import { ResourceIndexPage } from "@/components/ds/recipes";
import { Gallery, CommandBar } from "@/components/ds/surface";
import { Pagination } from "@savethemarshalldogs/design-system";

<ResourceIndexPage
  title="Foster spaces"
  toolbar={<CommandBar search={searchInput} controls={tagChips} />}
  table={<Gallery items={photos} minColumnWidth="14rem" ratio="4 / 3" />}
  footer={<Pagination page={page} pageCount={pageCount} hrefFor={hrefFor} />}
/>

import { ResourceEditPage } from "@/components/ds/recipes";

<ResourceEditPage
  title="New rescuer"
  form={<RescuerForm value={draft} onChange={setDraft} />}
  aside={<CreateHelp />}
  dirty={dirty}
  saving={saving}
  onSave={create}
  onDiscard={() => router.back()}
  saveLabel="Create"
  discardLabel="Cancel"
/>