From 3d2257ae3cbd6acc071be57c96d4b01bfd0a992b Mon Sep 17 00:00:00 2001
From: Mats Bosson <mats.bosson@gmail.com>
Date: Mon, 30 Mar 2026 03:15:24 +0700
Subject: [PATCH] Showcase layout and navigation

---
 packages/showcase/src/app.tsx            | 87 +++++++++++++++++++++++-
 packages/showcase/src/component-demo.tsx | 21 ++++++
 2 files changed, 105 insertions(+), 3 deletions(-)
 create mode 100644 packages/showcase/src/component-demo.tsx

diff --git a/packages/showcase/src/app.tsx b/packages/showcase/src/app.tsx
index e178981..0e0bc80 100644
--- a/packages/showcase/src/app.tsx
+++ b/packages/showcase/src/app.tsx
@@ -1,4 +1,85 @@
-/** Root application component for the PettyUI kitchen-sink showcase. */
-export function App() {
-  return <div>PettyUI Showcase</div>;
+import type { JSX } from "solid-js";
+
+const categories = [
+  { id: "layout-display", label: "Layout & Display" },
+  { id: "inputs-basic", label: "Inputs: Basic" },
+  { id: "inputs-selection", label: "Inputs: Selection" },
+  { id: "inputs-advanced", label: "Inputs: Advanced" },
+  { id: "navigation", label: "Navigation" },
+  { id: "overlays", label: "Overlays" },
+  { id: "feedback-status", label: "Feedback & Status" },
+  { id: "data", label: "Data" },
+] as const;
+
+type Category = (typeof categories)[number];
+
+/** Renders a single nav anchor link for a category. */
+function NavLink(props: { cat: Category }) {
+  const link = (
+    <a href={`#${props.cat.id}`} class="text-gray-500 hover:text-gray-900 transition-colors">
+      {props.cat.label}
+    </a>
+  );
+  return link;
+}
+
+/** Section wrapper with category heading and anchor target. */
+function Section(props: { id: string; title: string; children: JSX.Element }) {
+  const content = (
+    <section id={props.id} class="scroll-mt-20 mb-16">
+      <div class="border-b border-gray-300 pb-2 mb-8">
+        <h2 class="text-2xl font-bold text-gray-800">{props.title}</h2>
+      </div>
+      {props.children}
+    </section>
+  );
+  return content;
+}
+
+const navLinks = categories.map((cat) => <NavLink cat={cat} />);
+
+/** Kitchen sink showcase page with all PettyUI components. */
+export function App() {
+  const page = (
+    <div class="min-h-screen bg-gray-50">
+      <header class="sticky top-0 z-50 bg-white border-b border-gray-200 shadow-sm">
+        <div class="max-w-5xl mx-auto px-6 py-3 flex items-center justify-between">
+          <h1 class="text-lg font-bold text-gray-900">
+            PettyUI <span class="font-normal text-gray-400">Kitchen Sink</span>
+          </h1>
+          <nav class="flex gap-3 text-sm">
+            {navLinks}
+          </nav>
+        </div>
+      </header>
+
+      <main class="max-w-5xl mx-auto px-6 py-12">
+        <Section id="layout-display" title="Layout & Display">
+          <p class="text-gray-400 italic">Coming soon...</p>
+        </Section>
+        <Section id="inputs-basic" title="Inputs: Basic">
+          <p class="text-gray-400 italic">Coming soon...</p>
+        </Section>
+        <Section id="inputs-selection" title="Inputs: Selection">
+          <p class="text-gray-400 italic">Coming soon...</p>
+        </Section>
+        <Section id="inputs-advanced" title="Inputs: Advanced">
+          <p class="text-gray-400 italic">Coming soon...</p>
+        </Section>
+        <Section id="navigation" title="Navigation">
+          <p class="text-gray-400 italic">Coming soon...</p>
+        </Section>
+        <Section id="overlays" title="Overlays">
+          <p class="text-gray-400 italic">Coming soon...</p>
+        </Section>
+        <Section id="feedback-status" title="Feedback & Status">
+          <p class="text-gray-400 italic">Coming soon...</p>
+        </Section>
+        <Section id="data" title="Data">
+          <p class="text-gray-400 italic">Coming soon...</p>
+        </Section>
+      </main>
+    </div>
+  );
+  return page;
 }
diff --git a/packages/showcase/src/component-demo.tsx b/packages/showcase/src/component-demo.tsx
new file mode 100644
index 0000000..2a338e3
--- /dev/null
+++ b/packages/showcase/src/component-demo.tsx
@@ -0,0 +1,21 @@
+import type { JSX } from "solid-js";
+
+interface ComponentDemoProps {
+  name: string;
+  description: string;
+  children: JSX.Element;
+}
+
+/** Renders a titled component demo block with description and bordered demo area. */
+export function ComponentDemo(props: ComponentDemoProps) {
+  const wrapper = (
+    <div class="mb-12">
+      <h3 class="text-xl font-semibold text-gray-900 mb-1">{props.name}</h3>
+      <p class="text-sm text-gray-500 mb-4">{props.description}</p>
+      <div class="border border-gray-200 rounded-lg p-6 bg-white">
+        {props.children}
+      </div>
+    </div>
+  );
+  return wrapper;
+}