From 6c59d9ca64190655aaa7869daa5a306b932ac39a Mon Sep 17 00:00:00 2001
From: Francois Best <github@francoisbest.com>
Date: Tue, 12 Sep 2023 22:12:24 +0200
Subject: [PATCH] chore: Demos layout

---
 src/app/demos/batching/page.tsx                |  6 ++----
 src/app/demos/builder-pattern/page.tsx         |  6 ++----
 src/app/demos/hex-colors/page.tsx              |  1 +
 src/app/demos/layout.tsx                       | 18 ++++++++++++++++++
 src/app/demos/server-side-parsing/page.tsx     |  1 +
 src/app/demos/subscribeToQueryUpdates/page.tsx |  8 +++-----
 6 files changed, 27 insertions(+), 13 deletions(-)
 create mode 100644 src/app/demos/layout.tsx

diff --git a/src/app/demos/batching/page.tsx b/src/app/demos/batching/page.tsx
index 4a3f830c..c8f6b88e 100644
--- 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
index 9f2a8776..3ecbde61 100644
--- 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
index 0be2b218..600c232e 100644
--- 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
new file mode 100644
index 00000000..e2b3a9ff
--- /dev/null
+++ 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
index 4f4f7113..b73a5a3e 100644
--- 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
index fab08d86..fc6f215d 100644
--- 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,9 +21,8 @@ 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>
@@ -32,6 +30,6 @@ export default function BuilderPatternDemoPage() {
       <p>
         <em>Check the console</em>
       </p>
-    </main>
+    </>
   )
 }