Navigation

import { Breadcrumbs } from "@bosunkit/components/breadcrumbs";
import { Button } from "@bosunkit/components/button";
import { CommandPalette, type CommandGroup, type CommandItem } from "@bosunkit/components/command-palette";
import { Pagination, type PaginationLabels } from "@bosunkit/components/pagination";
import { Tabs } from "@bosunkit/components/tabs";
import { Search } from "lucide-react";
import { useId, useState, type Dispatch, type ReactElement, type SetStateAction } from "react";
export const description: string =
  "A report-library composition: breadcrumbs identify location, tabs change the collection, pagination changes the visible page, and the command menu offers a direct route. All results are illustrative.";
const labels: PaginationLabels = {
  previous: "Previous library page",
  next: "Next library page",
  first: "First library page",
  last: "Last library page",
  page: (page: number): string => `Library page ${String(page)}`,
  summary: (page: number, total: number): string => `Page ${String(page)} of ${String(total)}`,
};
const groups: readonly CommandGroup[] = [
  {
    id: "library",
    label: "Report library",
    items: [
      { id: "all", label: "Show all reports" },
      { id: "saved", label: "Show saved reports" },
    ],
  },
];
export default function Showcase(): ReactElement {
  const [tab, setTab]: [string, Dispatch<SetStateAction<string>>] = useState("all");
  const [page, setPage]: [number, Dispatch<SetStateAction<number>>] = useState(1);
  const [open, setOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false);
  const resultId: string = useId();
  function choose(value: string): void {
    setTab(value);
    setPage(1);
  }
  return (
    <div style={{ display: "grid", gap: "var(--space-lg)", width: "100%" }}>
      <Breadcrumbs
        label="Library hierarchy"
        expandLabel="Show library ancestors"
        collapseLabel="Hide library ancestors"
        items={[
          { id: "design", label: "Design", href: "/" },
          { id: "components", label: "Components", href: "/docs/components" },
          { id: "library", label: "Report library example" },
        ]}
      />
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          justifyContent: "space-between",
          alignItems: "center",
          gap: "var(--space-md)",
        }}
      >
        <strong>Report library</strong>
        <Button
          variant="ghost"
          onClick={(): void => {
            setOpen(true);
          }}
        >
          <Search size="1em" aria-hidden="true" />
          Find a collection
        </Button>
      </div>
      <Tabs
        tabs={[
          { id: "all", label: "All reports" },
          { id: "saved", label: "Saved reports" },
        ]}
        value={tab}
        onValueChange={choose}
      >
        <Tabs.Panel value="all">
          <p>Engineering reviews, daily updates and feature reports.</p>
        </Tabs.Panel>
        <Tabs.Panel value="saved">
          <p>Your selected reading list in this local example.</p>
        </Tabs.Panel>
      </Tabs>
      <div id={resultId} style={{ display: "grid", gap: "var(--space-sm)" }}>
        {["Engineering review", "Daily update", "Feature report"].map((label: string): ReactElement => (
          <div
            key={label}
            style={{ padding: "var(--space-md)", background: "var(--surface2)", borderRadius: "var(--radius-md)" }}
          >
            <strong>{label}</strong>
            <p style={{ margin: 0, color: "var(--text-dim)" }}>
              Illustrative {tab === "saved" ? "saved " : ""}entry from page {String(page)}
            </p>
          </div>
        ))}
      </div>
      <Pagination
        label="Library results"
        pageCount={tab === "all" ? 12 : 3}
        value={page}
        onValueChange={setPage}
        labels={labels}
        controls={resultId}
      />
      <p role="status">
        {tab === "all" ? "All reports" : "Saved reports"}, page {String(page)}.
      </p>
      <CommandPalette
        open={open}
        onOpenChange={setOpen}
        title="Find a collection"
        closeLabel="Close collection finder"
        searchLabel="Search collections"
        clearLabel="Clear collection search"
        emptyText="No matching collections."
        loadingText="Loading collections…"
        groups={groups}
        onSelect={(item: CommandItem): void => {
          choose(item.id);
        }}
      />
    </div>
  );
}