chore: Demos layout

47ng · Sep 12, 2023 · 6c59d9c · 6c59d9c
1 parent 3b22db1
commit 6c59d9c
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 13 deletions.
diff --git a/src/app/demos/batching/page.tsx b/src/app/demos/batching/page.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import Link from 'next/link'
 import { useQueryState } from '../../../../dist'
 import { parseAsFloat } from '../../../lib'
 
@@ -14,8 +13,7 @@ export default function BuilderPatternDemoPage() {
   const lngStr = lng.toString().split('.')
 
   return (
-    <main>
-      <Link href="/">⬅️ Home</Link>
+    <>
       <h1>Batching</h1>
       <button
         onClick={async () => {
@@ -38,6 +36,6 @@ export default function BuilderPatternDemoPage() {
           Lng {lngStr[0].padStart(4) + '.' + (lngStr[1] ?? '00')}
         </code>
       </pre>
-    </main>
+    </>
   )
 }
diff --git a/src/app/demos/builder-pattern/page.tsx b/src/app/demos/builder-pattern/page.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import Link from 'next/link'
 import { parseAsInteger, useQueryState } from '../../../../dist'
 
 export default function BuilderPatternDemoPage() {
@@ -16,8 +15,7 @@ export default function BuilderPatternDemoPage() {
   )
 
   return (
-    <main>
-      <Link href="/">⬅️ Home</Link>
+    <>
       <h1>Builder pattern</h1>
       <button onClick={() => setCounter(x => x - 1)}>-</button>
       <button onClick={() => setCounter(x => x + 1)}>+</button>
@@ -29,6 +27,6 @@ export default function BuilderPatternDemoPage() {
           enabled.
         </em>
       </p>
-    </main>
+    </>
   )
 }
diff --git a/src/app/demos/hex-colors/page.tsx b/src/app/demos/hex-colors/page.tsx
@@ -34,6 +34,7 @@ export default function HexColorsDemo() {
   const asHex = '#' + hexColorSchema.serialize(color)
   return (
     <>
+      <h1>Hex colors</h1>
       <section>
         <div>
           <label>Color</label>

diff --git a/src/app/demos/layout.tsx b/src/app/demos/layout.tsx
@@ -0,0 +1,18 @@
+import Link from 'next/link'
+
+export const metadata = {
+  title: 'next-usequerystate demos'
+}
+
+export default function DemoLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <main>
+      <Link href="/">⬅️ Home</Link>
+      {children}
+    </main>
+  )
+}
diff --git a/src/app/demos/server-side-parsing/page.tsx b/src/app/demos/server-side-parsing/page.tsx
@@ -13,6 +13,7 @@ export default function ServerSideParsingDemo({ searchParams }: PageProps) {
   console.log('Server side counter: %d', counter)
   return (
     <>
+      <h1>Server-side parsing</h1>
       <Suspense>
         <ServerSideParsingDemoClient serverSideCounter={counter}>
           <p>Server rendered counter: {counter}</p>

diff --git a/src/app/demos/subscribeToQueryUpdates/page.tsx b/src/app/demos/subscribeToQueryUpdates/page.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import Link from 'next/link'
 import React from 'react'
 import {
   parseAsInteger,
@@ -22,16 +21,15 @@ export default function BuilderPatternDemoPage() {
   }, [])
 
   return (
-    <main>
-      <Link href="/">⬅️ Home</Link>
-      <h1>subscribeToQueryUpdates</h1>
+    <>
+      <h1>Subscribing to query updates</h1>
       <button onClick={() => setCounter(x => x - 1)}>-</button>
       <button onClick={() => setCounter(x => x + 1)}>+</button>
       <button onClick={() => setCounter(null)}>Reset</button>
       <p>{counter}</p>
       <p>
         <em>Check the console</em>
       </p>
-    </main>
+    </>
   )
 }