components/site-header/examples.tsx

Functions

Imports

It imports components/admin-shell/admin-shell.react.tsx, components/site-header/site-header.react.tsx. No module of this repo imports it.

Source

1// Mounts the site header specimens. Every element with data-mount="<surface>" gets that surface:
2// a teal site with a dark band (Foxhound's look) and a fox site with a translucent band (Foxing's),
3// each as a public page, a signed-in page or a user's dashboard, and your admin. The phone
4// specimens mount the same surfaces in a 390px frame. Names, numbers and accounts are samples.
5import { StrictMode, useEffect, type ReactNode } from "react";
6import { createRoot } from "react-dom/client";
7import { AdminShell, FAMILY_APPS, FIRST_PAGE, type AdminEntry, type AdminShellProps } from "../admin-shell/admin-shell.react.tsx";
8import { SiteHeader, SiteTabs, type HeaderAccount, type HeaderSection, type SiteHeaderProps } from "./site-header.react.tsx";
9
10const icon = (d: string, cls = "cap-admin-icon") => (
11  <svg className={cls} viewBox="0 0 24 24" aria-hidden="true" focusable="false">
12    <path d={d} />
13  </svg>
14);
15const hd = (d: string) => (
16  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
17    <path d={d} />
18  </svg>
19);
20const D = {
21  grid: "M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z",
22  list: "M8 6h12M8 12h12M8 18h12M4 6h.5M4 12h.5M4 18h.5",
23  stack: "M12 4 3 9l9 5 9-5zM3 14l9 5 9-5",
24  share: "M8 12h8M14 7l5 5-5 5M5 5v14",
25  clock: "M12 4a8 8 0 1 0 0 16a8 8 0 1 0 0-16zM12 8v4l3 2",
26  gauge: "M4 17a8 8 0 1 1 16 0M12 17l4-5",
27  store: "M4 9h16l-1-4H5zM5 9v11h14V9M9 20v-6h6v6",
28  people: "M9 4.8a3.2 3.2 0 1 0 0 6.4a3.2 3.2 0 1 0 0-6.4zM3 20c.8-3.4 3.2-5 6-5s5.2 1.6 6 5M16 5.2a3 3 0 0 1 0 5.6M18 15c1.6.6 2.6 2.2 3 5",
29  hook: "M9 4v7a3 3 0 0 0 6 0M15 11V9M6 20h12M12 14v6",
30  brake: "M12 4a8 8 0 1 0 0 16a8 8 0 1 0 0-16zM12 8v5M12 16v.5",
31  book: "M4 5c3-1 6-1 8 1 2-2 5-2 8-1v14c-3-1-6-1-8 1-2-2-5-2-8-1zM12 6v14",
32  star: "m12 4 2.4 5 5.6.6-4.2 3.8 1.2 5.6L12 16.2 7 19l1.2-5.6L4 9.6 9.6 9z",
33  pen: "M4 20h4L19 9l-4-4L4 16zM13 7l4 4",
34  bell: "M6 8a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6M10 19a2 2 0 0 0 4 0",
35  search: "M11 4a7 7 0 1 0 0 14a7 7 0 1 0 0-14zM20 20l-3.2-3.2",
36  home: "M4 11 12 4l8 7v9h-5v-6H9v6H4z",
37};
38
39// The page under each header: a hero for a public page, tiles and rows for a signed-in one.
40const Hero = ({ eyebrow, title, lead }: { eyebrow: string; title: string; lead: string }) => (
41  <main className="sh-hero" id="main" tabIndex={-1}>
42    <p className="sh-eyebrow">{eyebrow}</p>
43    <h1>{title}</h1>
44    <p className="sh-lead">{lead}</p>
45    <div className="sh-filler" aria-hidden="true" />
46  </main>
47);
48const Tiles = ({ tiles, rows }: { tiles: Array<[string, string, string]>; rows: Array<[string, string]> }) => (
49  <div className="cap-admin-page">
50    <h1>{FIRST_PAGE}</h1>
51    <ul className="sh-tiles">
52      {tiles.map(([label, value, note]) => (
53        <li key={label}>
54          <span>{label}</span>
55          <b>{value}</b>
56          <span>{note}</span>
57        </li>
58      ))}
59    </ul>
60    <ul className="sh-rows">
61      {rows.map(([what, when]) => (
62        <li key={what}>
63          <span>{what}</span>
64          <span>{when}</span>
65        </li>
66      ))}
67    </ul>
68  </div>
69);
70
71// The teal site: Foxhound's look, its wordmark in the mono face with the x in the accent, on a band
72// that is dark in both themes, its section links on the right before a thin divider.
73const FH_LOGO = { href: "#home", label: "Foxhound", wordmark: <span className="sh-fh-wordmark" aria-hidden="true">fo<em>x</em>hound</span> };
74const fhSections: HeaderSection[] = ["Products", "Pricing", "Demos", "Features", "Docs", "Blog"].map((label) => ({ id: label.toLowerCase(), label, href: `#${label.toLowerCase()}`, current: label === "Pricing" }));
75const fhPublic: SiteHeaderProps = {
76  logo: FH_LOGO,
77  band: "dark",
78  links: "right",
79  sections: fhSections,
80  extras: [{ id: "audit", label: "Free audit", kind: "button", href: "#audit" }],
81  signIn: { href: "#sign-in" },
82  skipTo: "#main",
83};
84
85// A merchant's dashboard: the business as a square tile, then the product; the gear is gone and
86// its rows are in the avatar's menu, under the business's name.
87const fhAccount: Required<AdminShellProps>["account"] = {
88  name: "Sam Rivera",
89  initials: "SR",
90  email: "sam@example.com",
91  appLabel: "Acme Supply Co.",
92  appLinks: ["Settings", "Billing", "Team", "Audit settings", "Audit history", "Email settings", "Alerts", "API keys", "Brand voice"].map((l) => ({ label: l, href: `#${l.toLowerCase().replace(/ /g, "-")}` })),
93  onSignOut: () => undefined,
94};
95const fhDashboard: AdminShellProps = {
96  variant: "user",
97  title: "Foxhound",
98  logo: FH_LOGO,
99  band: "dark",
100  switchers: [
101    { id: "business", label: "Acme Supply Co.", name: "Business: Acme Supply Co.", tile: "A", sheetLabel: "Businesses", groups: [{ label: "Businesses", links: [{ label: "Acme Supply Co.", href: "#acme", current: true }, { label: "Northwind Goods", href: "#northwind" }] }] },
102    { id: "product", label: "Recovery", name: "Product: Recovery", sheetLabel: "Products", groups: [{ label: "Products", links: ["Console", "Audit", "Recovery", "Disputes", "Intelligence"].map((p) => ({ label: p, href: `#${p.toLowerCase()}`, current: p === "Recovery" })) }] },
103  ],
104  account: fhAccount,
105  onHelp: () => undefined,
106  nav: [
107    { id: "overview", label: FIRST_PAGE, href: "#overview", icon: icon(D.grid), current: true },
108    { id: "payments", label: "Payments", href: "#payments", icon: icon(D.list), count: 12 },
109    { id: "sequences", label: "Sequences", href: "#sequences", icon: icon(D.stack) },
110    { id: "winback", label: "Win-back", href: "#win-back", icon: icon(D.share) },
111    { id: "expiring", label: "Expiring cards", href: "#expiring", icon: icon(D.clock), count: 23 },
112    { id: "settings", label: "Settings", href: "#settings", icon: icon(D.gauge), group: "Account" },
113    { id: "billing", label: "Billing", href: "#billing", icon: icon(D.store), group: "Account" },
114    { id: "team", label: "Team", href: "#team", icon: icon(D.people), group: "Account" },
115  ],
116  page: FIRST_PAGE,
117  updated: { at: Date.now() - 2 * 60_000 },
118  onRefresh: () => undefined,
119  children: null,
120};
121const ownerBase = (app: "foxhound" | "foxing", nav: AdminEntry[]): AdminShellProps => ({
122  app,
123  variant: "owner",
124  badges: { portal: { count: 2 }, carrel: { count: 3, countNote: "AI drafts waiting" }, info: { count: 1 }, ...(app === "foxhound" ? { foxing: { count: 1 } } : { foxhound: { count: 1 } }) },
125  onSearch: () => undefined,
126  inbox: { count: 4, href: "#inbox" },
127  onHelp: () => undefined,
128  viewSite: "#site",
129  account: { role: "Owner", email: "owner@example.com", onSignOut: () => undefined },
130  nav,
131  page: FIRST_PAGE,
132  updated: { at: Date.now() - 6 * 60_000 },
133  onRefresh: () => undefined,
134  children: null,
135});
136const fhAdmin: AdminShellProps = {
137  ...ownerBase("foxhound", [
138    { id: "overview", label: FIRST_PAGE, href: "#overview", icon: icon(D.grid), current: true },
139    { id: "merchants", label: "Merchants", href: "#merchants", icon: icon(D.store), group: "Customers" },
140    { id: "users", label: "Users", href: "#users", icon: icon(D.people), group: "Customers" },
141    { id: "operations", label: "Operations", href: "#operations", icon: icon(D.gauge), group: "Platform" },
142    { id: "crons", label: "Crons", href: "#crons", icon: icon(D.clock), count: 1, countNote: "failing", tone: "need", group: "Platform" },
143    { id: "webhooks", label: "Webhooks", href: "#webhooks", icon: icon(D.hook), group: "Platform" },
144    { id: "brake", label: "Emergency brake", href: "#brake", icon: icon(D.brake), group: "Controls" },
145    { id: "staged", label: "Staged changes", href: "#staged", icon: icon(D.stack), count: 2, group: "Controls" },
146  ]),
147  logo: FH_LOGO,
148  band: "dark",
149};
150
151// The fox site: Foxing's look, its placeholder mark and its name in the serif, a translucent band
152// in the page's ground, its section links centred. Books and Celebrity Picks open Foxing's own
153// panels, laid out as Foxing draws them.
154const FOX_MARK = FAMILY_APPS.find((a) => a.id === "foxing")?.logo;
155const FX_LOGO = { href: "#home", label: "Foxing", mark: FOX_MARK, wordmark: <span className="sh-fx-wordmark" aria-hidden="true">Foxing</span> };
156const booksPanel = (
157  <div className="sh-mega">
158    <div>
159      <p className="sh-mega-label">Browse</p>
160      <ul>
161        <li>
162          <a href="#books">All books</a>
163        </li>
164        <li>
165          <a href="#awards">Award winners</a>
166        </li>
167      </ul>
168    </div>
169    <div>
170      <p className="sh-mega-label">By era</p>
171      <ul className="sh-chips">
172        {["Before 1800", "1800 to 1899", "1900 to 1949", "1950 and later"].map((e) => (
173          <li key={e}>
174            <a href={`#era-${e.slice(0, 4)}`}>{e}</a>
175          </li>
176        ))}
177      </ul>
178    </div>
179  </div>
180);
181const picksPanel = (
182  <div className="sh-mega" data-cols="1">
183    <a className="sh-pick" href="#pick">
184      <span className="sh-mega-label">Foxing pick</span>
185      <b>The Lantern Keeper</b>
186      <span>A. N. Sample</span>
187    </a>
188    <p className="sh-mega-label">Featured clubs</p>
189    <ul data-cols="2">
190      {["Morning Readers", "The Long Shelf", "Second Chapter", "Night Owls"].map((c) => (
191        <li key={c}>
192          <a href={`#club-${c.length}`}>{c}</a>
193        </li>
194      ))}
195    </ul>
196  </div>
197);
198const fxSections: HeaderSection[] = [
199  { id: "books", label: "Books", current: true, panel: booksPanel, groups: [{ links: [{ label: "All books", href: "#books" }, { label: "Award winners", href: "#awards" }] }] },
200  { id: "picks", label: "Celebrity Picks", panel: picksPanel, groups: [{ links: [{ label: "This month's pick", href: "#pick" }, { label: "All picks", href: "#picks" }] }] },
201  { id: "clubs", label: "Clubs", href: "#clubs" },
202  { id: "people", label: "People", href: "#people" },
203  { id: "journal", label: "Journal", href: "#journal" },
204];
205const fxSearch = { id: "search", label: "Search", icon: hd(D.search), onClick: () => undefined, keys: "/" };
206const fxPublic: SiteHeaderProps = {
207  logo: FX_LOGO,
208  translucent: true,
209  links: "center",
210  sections: fxSections,
211  extras: [fxSearch, { id: "join", label: "Join free", kind: "button", href: "#join" }],
212  signIn: { href: "#sign-in" },
213  skipTo: "#main",
214  // The site binds single keys, so T switches the theme.
215  themeKey: "t",
216};
217// Signed in: the bell joins Search, the avatar is the reader's picture, and its menu is Foxing's own panel.
218const fxAccount: HeaderAccount = {
219  name: "Sam Rivera",
220  initials: "SR",
221  // A picture, drawn over the initials (a sample: a fox-orange head and shoulders).
222  avatar: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Crect width='8' height='8' fill='%23f5c9a8'/%3E%3Ccircle cx='4' cy='3' r='1.6' fill='%23b64404'/%3E%3Cpath d='M1 8a3 3 0 0 1 6 0z' fill='%23b64404'/%3E%3C/svg%3E",
223  groups: [{ links: ["Reading stats", "Library", "Diary", "Profile", "Settings"].map((l) => ({ label: l, href: `#${l.toLowerCase().replace(/ /g, "-")}` })) }],
224  onSignOut: () => undefined,
225  panel: (
226    <div className="sh-fx-account">
227      <div className="sh-fx-id">
228        <b>Sam Rivera</b>
229        <span>@samreads</span>
230      </div>
231      <dl>
232        <div>
233          <dd>14</dd>
234          <dt>books this year</dt>
235        </div>
236        <div>
237          <dd>6</dd>
238          <dt>day streak</dt>
239        </div>
240        <div>
241          <dd>212</dd>
242          <dt>highlights</dt>
243        </div>
244      </dl>
245      <ul>
246        {["Reading stats", "Library", "Diary", "Profile", "Settings"].map((l) => (
247          <li key={l}>
248            <a href={`#${l.toLowerCase().replace(/ /g, "-")}`}>{l}</a>
249          </li>
250        ))}
251        <li>
252          <button type="button" data-panel-close="">
253            Sign out
254          </button>
255        </li>
256      </ul>
257    </div>
258  ),
259};
260const fxReader: SiteHeaderProps = {
261  ...fxPublic,
262  sections: fxSections.map((s) => ({ ...s, current: false })),
263  extras: [fxSearch, { id: "bell", label: "Notifications", icon: hd(D.bell), href: "#notifications", count: 3, countNote: "new" }],
264  signIn: undefined,
265  account: fxAccount,
266};
267const fxTabs = [
268  { label: "Home", href: "#home", icon: hd(D.home), current: true },
269  { label: "Library", href: "#library", icon: hd(D.book) },
270  { label: "Diary", href: "#diary", icon: hd(D.pen) },
271  { label: "Feed", href: "#feed", icon: hd(D.list) },
272  { label: "People", href: "#people", icon: hd(D.people) },
273];
274const fxAdmin: AdminShellProps = {
275  ...ownerBase("foxing", [
276    { id: "overview", label: FIRST_PAGE, href: "#overview", icon: icon(D.grid), current: true },
277    { id: "books", label: "Books", href: "#books", icon: icon(D.book), group: "Catalog" },
278    { id: "picks", label: "Picks", href: "#picks", icon: icon(D.star), group: "Catalog" },
279    { id: "clubs", label: "Clubs", href: "#clubs", icon: icon(D.people), group: "Catalog" },
280    { id: "journal", label: "Journal", href: "#journal", icon: icon(D.pen), count: 2, countNote: "drafts", group: "Content" },
281    { id: "notifications", label: "Notifications", href: "#notifications", icon: icon(D.bell), group: "Content" },
282    { id: "users", label: "Users", href: "#users", icon: icon(D.people), count: 1, countNote: "reported", tone: "need", group: "People" },
283  ]),
284  logo: FX_LOGO,
285  translucent: true,
286};
287
288const FH_TILES: Array<[string, string, string]> = [
289  ["Recovered this month", "$8,214", "62 payments"],
290  ["Recovery rate", "41%", "of failed charges"],
291  ["In sequence", "118", "retrying now"],
292  ["Cards expiring", "23", "next 30 days"],
293];
294const FH_ROWS: Array<[string, string]> = [
295  ["Payment from j.ortiz@example.com failed its third retry", "12 minutes ago"],
296  ["Win-back email opened by 14 customers", "today"],
297  ["Sequence Card declined sent 31 emails", "yesterday"],
298];
299const FX_TILES: Array<[string, string, string]> = [
300  ["Readers", "1,284", "38 new this week"],
301  ["Books", "9,402", "in the catalog"],
302  ["Clubs", "57", "12 meeting this week"],
303  ["Journal", "2", "drafts waiting"],
304];
305const FX_ROWS: Array<[string, string]> = [
306  ["A reader reported a review", "40 minutes ago"],
307  ["Book of the Month for November not set", "today"],
308  ["Journal draft: Ten books for long nights", "yesterday"],
309];
310
311// Holds a panel or the sheet open for the picture; the spec checks the real hover, click and keys.
312function Hold({ press, children }: { press?: string; children: ReactNode }) {
313  useEffect(() => {
314    if (!press) return;
315    // A pointer's click (detail 1), so the picture shows the panel without a keyboard's focus ring.
316    const frame = requestAnimationFrame(() => document.querySelector<HTMLElement>(press)?.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, detail: 1 })));
317    return () => cancelAnimationFrame(frame);
318  }, [press]);
319  return <>{children}</>;
320}
321
322const Site = ({ family, children }: { family: "teal" | "fox"; children: ReactNode }) => (
323  <div className="sh-site" data-family={family}>
324    {children}
325  </div>
326);
327
328const admin = (p: AdminShellProps, key: string, tiles: Array<[string, string, string]>, rows: Array<[string, string]>) => (
329  <AdminShell {...p} prefKey={`cap-site-header-specimen-${key}`}>
330    <Tiles tiles={tiles} rows={rows} />
331  </AdminShell>
332);
333
334const SURFACES: Record<string, () => ReactNode> = {
335  "fh-public": () => (
336    <Site family="teal">
337      <SiteHeader {...fhPublic} />
338      <Hero eyebrow="Revenue recovery for Stripe" title="Get back the payments your customers meant to make." lead="Foxhound retries failed charges at the right moment and writes the emails that bring card holders back." />
339    </Site>
340  ),
341  "fh-dashboard": () => <Site family="teal">{admin(fhDashboard, "fh-dashboard", FH_TILES, FH_ROWS)}</Site>,
342  "fh-dashboard-account": () => (
343    <Site family="teal">
344      <Hold press=".cap-site-header-avatar">{admin(fhDashboard, "fh-dashboard-account", FH_TILES, FH_ROWS)}</Hold>
345    </Site>
346  ),
347  "fh-dashboard-switcher": () => (
348    <Site family="teal">
349      <Hold press=".cap-site-header-switch">{admin(fhDashboard, "fh-dashboard-switcher", FH_TILES, FH_ROWS)}</Hold>
350    </Site>
351  ),
352  "fh-admin": () => <Site family="teal">{admin(fhAdmin, "fh-admin", FH_TILES, FH_ROWS)}</Site>,
353  "fx-public": () => (
354    <Site family="fox">
355      <SiteHeader {...fxPublic} />
356      <Hero eyebrow="Book of the month" title="Find the next book you cannot put down." lead="Picks from readers you trust, clubs that actually meet, and a diary that remembers every page." />
357    </Site>
358  ),
359  "fx-books": () => (
360    <Site family="fox">
361      <Hold press=".cap-site-header-sections .cap-site-header-link">
362        <SiteHeader {...fxPublic} />
363        <Hero eyebrow="Book of the month" title="Find the next book you cannot put down." lead="Picks from readers you trust, clubs that actually meet, and a diary that remembers every page." />
364      </Hold>
365    </Site>
366  ),
367  "fx-reader": () => (
368    <Site family="fox">
369      <SiteHeader {...fxReader} />
370      <main className="sh-hero" id="main" tabIndex={-1}>
371        <h1>Good evening, Sam</h1>
372        <ul className="sh-tiles">
373          {[
374            ["Reading now", "2", "books"],
375            ["This year", "14", "of 30 goal"],
376            ["Streak", "6", "days"],
377            ["Club meets", "Thu", "7:00 pm"],
378          ].map(([a, b, c]) => (
379            <li key={a}>
380              <span>{a}</span>
381              <b>{b}</b>
382              <span>{c}</span>
383            </li>
384          ))}
385        </ul>
386        <div className="sh-filler" aria-hidden="true" />
387      </main>
388      <SiteTabs tabs={fxTabs} label="Your reading" />
389    </Site>
390  ),
391  "fx-reader-account": () => (
392    <Site family="fox">
393      <Hold press=".cap-site-header-avatar">
394        <SiteHeader {...fxReader} />
395        <main className="sh-hero" id="main" tabIndex={-1}>
396          <h1>Good evening, Sam</h1>
397          <div className="sh-filler" aria-hidden="true" />
398        </main>
399      </Hold>
400    </Site>
401  ),
402  "fx-admin": () => <Site family="fox">{admin(fxAdmin, "fx-admin", FX_TILES, FX_ROWS)}</Site>,
403  "fx-sheet": () => (
404    <Site family="fox">
405      <Hold press=".cap-site-header-menu">
406        <SiteHeader {...fxPublic} />
407        <Hero eyebrow="Book of the month" title="Find the next book you cannot put down." lead="Picks from readers you trust, clubs that actually meet, and a diary that remembers every page." />
408      </Hold>
409    </Site>
410  ),
411  "fh-sheet": () => (
412    <Site family="teal">
413      <Hold press=".cap-site-header-menu">{admin(fhDashboard, "fh-sheet", FH_TILES, FH_ROWS)}</Hold>
414    </Site>
415  ),
416};
417
418for (const el of Array.from(document.querySelectorAll<HTMLElement>("[data-mount]"))) {
419  const render = SURFACES[el.dataset.mount ?? ""];
420  if (render) createRoot(el).render(<StrictMode>{render()}</StrictMode>);
421}