@xenide-io/the-old-ui-theme 0.2.6 → 0.3.0

package/src/components/sections/IconShowcase.tsx

@@ -0,0 +1,127 @@
+import type { ComponentType, CSSProperties } from "react";
+import {
+  CANONICAL_ICONS,
+  OLD_UI_ICONS,
+  IconAreaChart,
+  IconDatabase,
+  IconFlag,
+  IconFlask,
+  IconGridView,
+  IconRecording,
+  IconSurveys,
+  type CanonicalIconName,
+  type IconProps,
+} from "@/components/icons";
+import { Kbd, ShowcaseWrapper } from "@/components/ui";
+
+const iconCells = Object.entries(CANONICAL_ICONS) as Array<[
+  CanonicalIconName,
+  ComponentType<IconProps>,
+]>;
+
+const originalIcons = Object.entries(OLD_UI_ICONS) as Array<[
+  keyof typeof OLD_UI_ICONS,
+  ComponentType<IconProps>,
+]>;
+
+const productTiles = [
+  { label: "Session replay", Icon: IconRecording, color: "--ph-product-session-replay" },
+  { label: "Product analytics", Icon: IconAreaChart, color: "--ph-product-product-analytics" },
+  { label: "Data pipeline", Icon: IconGridView, color: "--ph-product-data-pipeline" },
+  { label: "Feature flags", Icon: IconFlag, color: "--ph-product-feature-flags" },
+  { label: "Experiments", Icon: IconFlask, color: "--ph-product-experiments" },
+  { label: "Data warehouse", Icon: IconDatabase, color: "--ph-product-data-warehouse" },
+  { label: "Surveys", Icon: IconSurveys, color: "--ph-product-surveys" },
+];
+
+export default function IconShowcase() {
+  const code = `import {
+  IconCommandCursor,
+  IconDataReel,
+  IconInsightBoard,
+  IconOldWindow,
+} from "@xenide-io/the-old-ui-theme";
+
+<div className="flex items-center gap-4 text-ph-ink">
+  <IconOldWindow size={16} />
+  <IconCommandCursor size={20} />
+  <IconDataReel size={24} />
+  <IconInsightBoard size={24} aria-label="Insights" />
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Icons"
+      description="A canonical filled SVG registry with PostHog/Material foundations and clearly identified Old UI originals."
+      code={code}
+      filename="IconExample.tsx"
+    >
+      <div className="space-y-8">
+        <section className="ph-panel space-y-4">
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Old UI originals</h3>
+            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-ph-subtle">
+              Authored 24px glyphs for retro interface and analytics concepts. Each uses <Kbd variant="token">currentColor</Kbd>, a filled silhouette, and enough negative space to survive at 16px.
+            </p>
+          </div>
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-6">
+            {originalIcons.map(([name, Icon]) => (
+              <div key={name} className="flex flex-col items-center gap-3 rounded-lg border border-ph-border-subtle bg-ph-raised p-4 text-center">
+                <div className="flex h-9 items-center gap-2 text-ph-ink">
+                  <Icon size={16} />
+                  <Icon size={24} />
+                </div>
+                <span className="max-w-full break-words text-xs font-medium text-ph-subtle">{formatName(name)}</span>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="ph-panel space-y-4">
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Canonical registry</h3>
+            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-ph-subtle">
+              Documentation is generated from <Kbd variant="token">CANONICAL_ICONS</Kbd>. Compatibility aliases remain available through <Kbd variant="token">PH_ICONS</Kbd> without duplicating this inventory.
+            </p>
+          </div>
+          <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8">
+            {iconCells.map(([name, Icon]) => (
+              <div key={name} className="flex min-w-0 flex-col items-center gap-2 rounded-lg border border-ph-border-subtle bg-ph-raised p-3 text-center">
+                <div className="flex h-8 items-center gap-2 text-ph-ink">
+                  <Icon size={16} />
+                  <Icon size={24} />
+                </div>
+                <span className="max-w-full break-words text-[10px] font-medium tracking-wide text-ph-mutedtext">{name}</span>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="ph-panel space-y-4">
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Product hues</h3>
+            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-ph-subtle">
+              Product color is used as a subtle tint and icon accent instead of assuming white foregrounds on every theme.
+            </p>
+          </div>
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7">
+            {productTiles.map(({ label, Icon, color }) => (
+              <div
+                key={label}
+                className="ph-icon-tile ph-product-icon-tile"
+                style={{ "--ph-icon-tile-color": `var(${color})` } as CSSProperties}
+              >
+                <Icon className="mb-1" size={28} />
+                <span className="max-w-full px-1 text-center normal-case tracking-normal">{label}</span>
+              </div>
+            ))}
+          </div>
+        </section>
+      </div>
+    </ShowcaseWrapper>
+  );
+}
+
+function formatName(name: string) {
+  return name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (letter) => letter.toUpperCase());
+}

package/src/components/sections/IndicatorShowcase.tsx

@@ -0,0 +1,52 @@
+import { IconBell, IconMail, IconShoppingCart, IconSurveys } from "@/components/icons";
+import { ComponentDocs, Indicator, ShowcaseWrapper } from "@/components/ui";
+
+const indicators = [
+  { icon: IconBell, label: "Notifications", count: "8", hue: "bg-ph-brand" },
+  { icon: IconMail, label: "Messages", count: "99+", hue: "bg-ph-blue" },
+  { icon: IconSurveys, label: "Comments", count: "3", hue: "bg-emerald-600" },
+  { icon: IconShoppingCart, label: "Cart", count: "!", hue: "bg-ph-danger" },
+] as const;
+
+export default function IndicatorShowcase() {
+  const code = `import { Indicator } from "the-old-ui";
+
+<Indicator badge="8" color="bg-ph-brand">
+  <Button variant="ghost" shape="circle">
+    <IconBell className="h-6 w-6" />
+  </Button>
+</Indicator>
+
+<Indicator dot color="bg-ph-brand">
+  <Avatar label="JD" />
+</Indicator>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Badge hotspots"
+      description="Indicator badges and dots for notifications, status, and counts."
+      code={code}
+      filename="IndicatorExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "badge", type: "ReactNode", description: "Badge content (number, text, !)." },
+            { name: "color", type: "string", defaultValue: "bg-ph-brand", description: "Tailwind colour class." },
+            { name: "position", type: "top-right | top-left | bottom-right | bottom-left", defaultValue: "top-right", description: "Indicator position." },
+            { name: "dot", type: "boolean", defaultValue: "false", description: "Show a simple dot instead of badge." },
+          ]}
+        />
+      }
+    >
+      <div className="flex flex-wrap gap-10 rounded-xl border border-ph-border bg-ph-muted px-10 py-8">
+        {indicators.map(({ icon: Icon, label, count, hue }) => (
+          <Indicator key={label} badge={count} color={hue}>
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-ph-surface shadow-ph">
+              <Icon className="h-6 w-6 text-ph-mutedtext" />
+            </div>
+          </Indicator>
+        ))}
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/KbdShowcase.tsx

@@ -0,0 +1,57 @@
+import { ComponentDocs, Kbd, Panel, ShowcaseWrapper } from "@/components/ui";
+
+export default function KbdShowcase() {
+  const code = `import { Kbd, Panel } from "@xenide-io/the-old-ui-theme";
+
+<Panel className="space-y-5">
+  <div className="flex flex-wrap items-center gap-4">
+    <Kbd keys={["Command", "K"]} platform="mac" />
+    <Kbd keys={["Control", "K"]} platform="windows" />
+    <Kbd keys={["Control", "K"]} />
+  </div>
+  <div className="flex flex-wrap items-center gap-3">
+    <Kbd variant="key">Escape</Kbd>
+    <Kbd variant="key">↵</Kbd>
+    <Kbd variant="token">HogQL</Kbd>
+  </div>
+</Panel>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Keyboard glyphs"
+      description="PostHog-style joined shortcut caps with crisp lower borders, monospace type, and separate inline code tokens."
+      code={code}
+      filename="KbdExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "variant", type: "shortcut | key | token", defaultValue: "shortcut", description: "Chooses a shortcut group, single physical key, or inline code token." },
+            { name: "keys", type: "readonly ReactNode[]", description: "Joins a shortcut chord inside one compact cap without stringifying React nodes." },
+            { name: "platform", type: "text | mac | windows", defaultValue: "text", description: "Converts named modifier keys only when explicitly requested." },
+            { name: "separator", type: "ReactNode", description: "Optional visual separator inside the joined shortcut cap." },
+            { name: "aria-label", type: "string", description: "Optional spoken shortcut override; textual keys generate one automatically." },
+          ]}
+        />
+      }
+    >
+      <Panel className="space-y-5">
+        <div>
+          <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Platform shortcuts</h3>
+          <div className="flex flex-wrap items-center gap-4">
+            <Kbd keys={["Command", "K"]} platform="mac" />
+            <Kbd keys={["Control", "K"]} platform="windows" />
+            <Kbd keys={["Control", "K"]} />
+          </div>
+        </div>
+        <div>
+          <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Keys and tokens</h3>
+          <div className="flex flex-wrap items-center gap-3">
+            <Kbd variant="key">Escape</Kbd>
+            <Kbd variant="key">↵</Kbd>
+            <Kbd variant="token">HogQL</Kbd>
+          </div>
+        </div>
+      </Panel>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/ModalShowcase.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { useState } from "react";
+import { IconCheck, IconClose, IconPlus } from "@/components/icons";
+import { Button, ComponentDocs, Input, Modal, Select, ShowcaseWrapper, Textarea } from "@/components/ui";
+
+export default function ModalShowcase() {
+  const [openModal, setOpenModal] = useState<string | null>(null);
+
+  const close = () => setOpenModal(null);
+
+  const code = `import { Button, IconCheck, IconClose, IconPlus, Input, Modal, Select, Textarea } from "@xenide-io/the-old-ui-theme";
+
+<div className="ph-panel space-y-4">
+  <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Patterns</h3>
+
+  <div className="flex flex-wrap gap-3">
+    <Button variant="secondary" onClick={() => setOpenModal("info")}>
+      Info
+    </Button>
+    <Button variant="success" onClick={() => setOpenModal("success")}>
+      Success
+    </Button>
+    <Button variant="danger" onClick={() => setOpenModal("error")}>
+      Error
+    </Button>
+    <Button variant="primary" icon={<IconPlus className="h-4 w-4" aria-hidden />} onClick={() => setOpenModal("form")}>
+      Form modal
+    </Button>
+  </div>
+
+  <Modal
+    open={openModal === "info"}
+    onClose={close}
+    title="Configure capture"
+    description="Lightweight overlay + white sheet — Lemon modals skew toward tight copy and decisive buttons."
+    footer={<Button variant="secondary" onClick={close}>Close</Button>}
+  />
+
+  <Modal
+    open={openModal === "success"}
+    onClose={close}
+    showCloseButton={false}
+    footer={<Button variant="success" onClick={close}>Continue</Button>}
+  >
+    <div className="flex items-start gap-3">
+      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[var(--ph-success-bg)] text-[var(--ph-success-text)]">
+        <IconCheck className="h-5 w-5" />
+      </div>
+      <div>
+        <h3 className="text-lg font-bold text-ph-success">Saved</h3>
+        <p className="mt-1 text-sm text-ph-subtle">Your dashboard layout synced to the team.</p>
+      </div>
+    </div>
+  </Modal>
+
+  <Modal
+    open={openModal === "error"}
+    onClose={close}
+    showCloseButton={false}
+    footer={
+      <>
+        <Button variant="ghost" onClick={close}>Cancel</Button>
+        <Button variant="danger" onClick={close}>View logs</Button>
+      </>
+    }
+  >
+    <div className="flex items-start gap-3">
+      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[var(--ph-danger-bg)] text-[var(--ph-danger-text)]">
+        <IconClose className="h-5 w-5" />
+      </div>
+      <div>
+        <h3 className="text-lg font-bold text-ph-danger">Query failed</h3>
+        <p className="mt-1 text-sm text-ph-subtle">ClickHouse returned a timeout — retry or narrow the date range.</p>
+      </div>
+    </div>
+  </Modal>
+
+  <Modal
+    open={openModal === "form"}
+    onClose={close}
+    size="lg"
+    title="Create feature flag"
+    footer={
+      <>
+        <Button variant="ghost" onClick={close}>Cancel</Button>
+        <Button variant="primary" onClick={close}>Create</Button>
+      </>
+    }
+  >
+    <div className="space-y-4">
+      <Input label="Key" placeholder="billing-ui-v3" />
+      <Textarea label="Description" placeholder="Expose the rewritten billing funnel" className="h-28" />
+      <Select label="Rollout">
+        <option>10% staged</option>
+        <option>Everyone</option>
+      </Select>
+    </div>
+  </Modal>
+</div>`;
+
+  return (
+    <ShowcaseWrapper
+      title="Modals"
+      description="Accessible modal shell with open state, title, description, size, close button, and footer props."
+      code={code}
+      filename="ModalExample.tsx"
+      docs={
+        <ComponentDocs
+          rows={[
+            { name: "open", type: "boolean", defaultValue: "false", description: "Controls modal visibility." },
+            { name: "onClose", type: "() => void", description: "Called by overlay and close button." },
+            { name: "size", type: "sm | md | lg | xl | full", defaultValue: "md", description: "Controls panel max width." },
+            { name: "title", type: "string", description: "Accessible dialog heading." },
+            { name: "footer", type: "ReactNode", description: "Renders action row with consistent spacing." },
+            { name: "closeOnOutsideClick", type: "boolean", defaultValue: "true", description: "Controls pointer dismissal outside the dialog." },
+            { name: "closeOnEscape", type: "boolean", defaultValue: "true", description: "Controls Escape-key dismissal." },
+          ]}
+        />
+      }
+    >
+      <div className="ph-panel space-y-4">
+        <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Patterns</h3>
+
+        <div className="flex flex-wrap gap-3">
+          <Button variant="secondary" onClick={() => setOpenModal("info")}>
+            Info
+          </Button>
+          <Button variant="success" onClick={() => setOpenModal("success")}>
+            Success
+          </Button>
+          <Button variant="danger" onClick={() => setOpenModal("error")}>
+            Error
+          </Button>
+          <Button variant="primary" icon={<IconPlus className="h-4 w-4" aria-hidden />} onClick={() => setOpenModal("form")}>
+            Form modal
+          </Button>
+        </div>
+
+        <Modal
+          open={openModal === "info"}
+          onClose={close}
+          title="Configure capture"
+          description="Lightweight overlay + white sheet — Lemon modals skew toward tight copy and decisive buttons."
+          footer={<Button variant="secondary" onClick={close}>Close</Button>}
+        />
+
+        <Modal
+          open={openModal === "success"}
+          onClose={close}
+          showCloseButton={false}
+          footer={<Button variant="success" onClick={close}>Continue</Button>}
+        >
+          <div className="flex items-start gap-3">
+            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[var(--ph-success-bg)] text-[var(--ph-success-text)]">
+              <IconCheck className="h-5 w-5" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-ph-success">Saved</h3>
+              <p className="mt-1 text-sm text-ph-subtle">Your dashboard layout synced to the team.</p>
+            </div>
+          </div>
+        </Modal>
+
+        <Modal
+          open={openModal === "error"}
+          onClose={close}
+          showCloseButton={false}
+          footer={
+            <>
+              <Button variant="ghost" onClick={close}>Cancel</Button>
+              <Button variant="danger" onClick={close}>View logs</Button>
+            </>
+          }
+        >
+          <div className="flex items-start gap-3">
+            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[var(--ph-danger-bg)] text-[var(--ph-danger-text)]">
+              <IconClose className="h-5 w-5" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-ph-danger">Query failed</h3>
+              <p className="mt-1 text-sm text-ph-subtle">ClickHouse returned a timeout — retry or narrow the date range.</p>
+            </div>
+          </div>
+        </Modal>
+
+        <Modal
+          open={openModal === "form"}
+          onClose={close}
+          size="lg"
+          title="Create feature flag"
+          footer={
+            <>
+              <Button variant="ghost" onClick={close}>Cancel</Button>
+              <Button variant="primary" onClick={close}>Create</Button>
+            </>
+          }
+        >
+          <div className="space-y-4">
+            <Input label="Key" placeholder="billing-ui-v3" />
+            <Textarea label="Description" placeholder="Expose the rewritten billing funnel" className="h-28" />
+            <Select label="Rollout">
+              <option>10% staged</option>
+              <option>Everyone</option>
+            </Select>
+          </div>
+        </Modal>
+      </div>
+    </ShowcaseWrapper>
+  );
+}

package/src/components/sections/NavigationShowcase.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { IconBell, IconPerson } from "@/components/icons";
+import { Button, DropdownItem, DropdownMenu, SearchInput, ShowcaseWrapper } from "@/components/ui";
+
+export default function NavigationShowcase() {
+  const code = `import { IconBell, IconPerson } from "the-old-ui";
+import { Button, DropdownItem, DropdownMenu, SearchInput } from "the-old-ui";
+
+<div className="space-y-8">
+  <div className="ph-panel">
+    <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Top bar density</h3>
+    <div className="ph-navbar-demo justify-between gap-4">
+      <span className="text-lg font-bold text-ph-brand">posthog</span>
+      <div className="flex flex-1 flex-wrap items-center justify-end gap-2">
+        <SearchInput
+          label="Jump to"
+          hideLabel
+          shortcut="Cmd K"
+          placeholder="Jump to…"
+          density="compact"
+        />
+        <Button type="button" variant="ghost" shape="circle" className="relative" aria-label="Notifications">
+          <IconBell className="h-5 w-5 text-ph-mutedtext" />
+          <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-ph-brand ring-2 ring-ph-surface" />
+        </Button>
+        <DropdownMenu
+          align="end"
+          aria-label="Account menu"
+          trigger={
+            <span className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-ph-muted text-ph-ink">
+              <IconPerson className="h-5 w-5" aria-hidden />
+            </span>
+          }
+        >
+          <DropdownItem>Personal API keys</DropdownItem>
+          <DropdownItem>Organisation settings</DropdownItem>
+        </DropdownMenu>
+      </div>
+    </div>
+  </div>
+
+  <div className="ph-panel flex gap-10">
+    <div>
+      <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Side navigation</h3>
+      <ul className="w-52 space-y-1 text-sm font-medium">
+        <li>
+          <a href="#" className="block rounded-md bg-ph-muted px-3 py-2 text-ph-ink">
+            Home
+          </a>
+        </li>
+        <li>
+          <a href="#" className="block rounded-md px-3 py-2 text-ph-subtle hover:bg-ph-muted/70">
+            Data pipeline
+          </a>
+        </li>
+        <li>
+          <details open className="ph-details [&>summary::-webkit-details-marker]:hidden">
+            <summary className="cursor-pointer list-none px-3 py-2 text-ph-mutedtext">Warehouse</summary>
+            <ul className="mt-1 space-y-1 border-l border-ph-border pl-5">
+              <li>
+                <a href="#" className="block py-1 text-ph-subtle hover:text-ph-ink">
+                  Sources
+                </a>
+              </li>
+              <li>
+                <a href="#" className="block py-1 text-ph-subtle hover:text-ph-ink">
+                  Views
+                </a>
+              </li>
+            </ul>
+          </details>
+        </li>
+      </ul>
+    </div>
+
+    <div className="flex-1">
+      <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Timeline steps</h3>
+      <ol className="ph-steps">
+        <li className="flex flex-col items-center gap-2">
+          <span className="flex h-8 w-8 items-center justify-center rounded-full bg-ph-brand text-xs font-bold text-white">
+            1
+          </span>
+          <span>Install snippet</span>
+        </li>
+        <li className="flex flex-col items-center gap-2 opacity-60">
+          <span className="flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-ph-border text-xs">
+            2
+          </span>
+          <span>Send test event</span>
+        </li>
+        <li className="flex flex-col items-center gap-2 opacity-60">
+          <span className="flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-ph-border text-xs">
+            3
+          </span>
+          <span>Invite team</span>
+        </li>
+      </ol>
+    </div>
+  </div>
+</div>`;
+
+  return (
+    <ShowcaseWrapper title="Navigation chrome" code={code} filename="NavigationExample.tsx">
+      <div className="space-y-8">
+        <div className="ph-panel">
+          <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Top bar density</h3>
+          <div className="ph-navbar-demo justify-between gap-4">
+            <span className="text-lg font-bold text-ph-brand">posthog</span>
+            <div className="flex flex-1 flex-wrap items-center justify-end gap-2">
+              <SearchInput
+                label="Jump to"
+                hideLabel
+                shortcut="Cmd K"
+                placeholder="Jump to…"
+                density="compact"
+              />
+              <Button type="button" variant="ghost" shape="circle" className="relative" aria-label="Notifications">
+                <IconBell className="h-5 w-5 text-ph-mutedtext" />
+                <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-ph-brand ring-2 ring-ph-surface" />
+              </Button>
+              <DropdownMenu
+                align="end"
+                aria-label="Account menu"
+                trigger={
+                  <span className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-ph-muted text-ph-ink">
+                    <IconPerson className="h-5 w-5" aria-hidden />
+                  </span>
+                }
+              >
+                <DropdownItem>Personal API keys</DropdownItem>
+                <DropdownItem>Organisation settings</DropdownItem>
+              </DropdownMenu>
+            </div>
+          </div>
+        </div>
+
+        <div className="ph-panel flex gap-10">
+          <div>
+            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Side navigation</h3>
+            <ul className="w-52 space-y-1 text-sm font-medium">
+              <li>
+                <a href="#" className="block rounded-md bg-ph-muted px-3 py-2 text-ph-ink">
+                  Home
+                </a>
+              </li>
+              <li>
+                <a href="#" className="block rounded-md px-3 py-2 text-ph-subtle hover:bg-ph-muted/70">
+                  Data pipeline
+                </a>
+              </li>
+              <li>
+                <details open className="ph-details [&>summary::-webkit-details-marker]:hidden">
+                  <summary className="cursor-pointer list-none px-3 py-2 text-ph-mutedtext">Warehouse</summary>
+                  <ul className="mt-1 space-y-1 border-l border-ph-border pl-5">
+                    <li>
+                      <a href="#" className="block py-1 text-ph-subtle hover:text-ph-ink">
+                        Sources
+                      </a>
+                    </li>
+                    <li>
+                      <a href="#" className="block py-1 text-ph-subtle hover:text-ph-ink">
+                        Views
+                      </a>
+                    </li>
+                  </ul>
+                </details>
+              </li>
+            </ul>
+          </div>
+
+          <div className="flex-1">
+            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Timeline steps</h3>
+            <ol className="ph-steps">
+              <li className="flex flex-col items-center gap-2">
+                <span className="flex h-8 w-8 items-center justify-center rounded-full bg-ph-brand text-xs font-bold text-white">
+                  1
+                </span>
+                <span>Install snippet</span>
+              </li>
+              <li className="flex flex-col items-center gap-2 opacity-60">
+                <span className="flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-ph-border text-xs">
+                  2
+                </span>
+                <span>Send test event</span>
+              </li>
+              <li className="flex flex-col items-center gap-2 opacity-60">
+                <span className="flex h-8 w-8 items-center justify-center rounded-full border border-dashed border-ph-border text-xs">
+                  3
+                </span>
+                <span>Invite team</span>
+              </li>
+            </ol>
+          </div>
+        </div>
+      </div>
+    </ShowcaseWrapper>
+  );
+}