components/tabs/examples.tsx

Functions

Imports

It imports components/tabs/tabs.react.tsx. No module of this repo imports it.

Source

1// Mounts the tabs specimens that need React: the links form with an app's router link. Every
2// element with data-mount="<state>" gets that state.
3import { StrictMode, useState, type ComponentProps } from "react";
4import { createRoot } from "react-dom/client";
5import { TabLink, TabsNav, type RenderTabLink } from "./tabs.react.tsx";
6
7// A stand-in for a router's link: it keeps the tab's class and aria-current it is given, and
8// navigates without a page load (a click is handed to the router, which says where it went).
9function RouterLink({ to, onNavigate, ...rest }: ComponentProps<"a"> & { to: string; onNavigate: (to: string) => void }) {
10  return (
11    <a
12      {...rest}
13      href={to}
14      data-router-link=""
15      onClick={(e) => {
16        if (e.ctrlKey || e.metaKey || e.shiftKey || e.button !== 0) return;
17        e.preventDefault();
18        onNavigate(to);
19      }}
20    />
21  );
22}
23
24const STATUSES = [
25  { id: "all", label: "All", count: 24 },
26  { id: "waiting", label: "Waiting", count: 5 },
27  { id: "approved", label: "Approved", count: 17 },
28  { id: "spam", label: "Spam", count: 2 },
29];
30
31// The app's router owns the location: here a state, and the page's own line says where it is.
32function RouterTabs({ perLink }: { perLink?: boolean }) {
33  const [path, setPath] = useState("/mentions/waiting");
34  const current = path.split("/").pop();
35  const render: RenderTabLink = ({ href, ...props }) => <RouterLink to={href} onNavigate={setPath} {...props} />;
36  return (
37    <>
38      <TabsNav aria-label="Filter mentions by status" renderLink={perLink ? undefined : render}>
39        {STATUSES.map((s) => (
40          <TabLink key={s.id} href={`/mentions/${s.id}`} current={current === s.id} count={s.count} renderLink={perLink ? render : undefined}>
41            {s.label}
42          </TabLink>
43        ))}
44      </TabsNav>
45      <p className="cap-muted" data-router-path={path}>
46        Router location: {path}
47      </p>
48    </>
49  );
50}
51
52const SPECIMENS: Record<string, () => React.ReactNode> = {
53  router: () => <RouterTabs />,
54  "router-per-link": () => <RouterTabs perLink />,
55};
56
57for (const el of Array.from(document.querySelectorAll<HTMLElement>("[data-mount]"))) {
58  const render = SPECIMENS[el.dataset.mount ?? ""];
59  if (render) createRoot(el).render(<StrictMode>{render()}</StrictMode>);
60}