doc: Add RGB demo

packages/docs/src/app/playground/(demos)/basic-counter/client.tsx

@@ -11,16 +11,14 @@ export default function BasicCounterDemoPage() {
   )
   return (
     <>
-      <nav className="my-8 flex flex-wrap gap-4">
-        <Button size="sm" onClick={() => setCounter(x => x - 1)}>
+      <nav className="my-8 flex flex-wrap items-center gap-4">
+        <Button onClick={() => setCounter(x => x - 1)}>
           <Minus />
         </Button>
-        <Button size="sm" onClick={() => setCounter(x => x + 1)}>
+        <Button onClick={() => setCounter(x => x + 1)}>
           <Plus />
         </Button>
-        <Button size="sm" onClick={() => setCounter(null)}>
-          Reset
-        </Button>
+        <Button onClick={() => setCounter(null)}>Reset</Button>
         <span className="text-2xl font-semibold tabular-nums">
           Counter: {counter}
         </span>

packages/docs/src/app/playground/(demos)/demos.ts

@@ -14,6 +14,10 @@ export const demos = {
     title: 'Batching',
     description:
       'State updates are collected and batched into one update on the next tick.'
+  },
+  'hex-colors': {
+    title: 'Hex colors',
+    description: 'Parsing RGB values from a hex color'
   }
 } as const satisfies Record<string, DemoMetadata>
 

packages/docs/src/app/playground/_demos/hex-colors/page.tsx → packages/docs/src/app/playground/(demos)/hex-colors/client.tsx

@@ -33,10 +33,15 @@ export default function HexColorsDemo() {
   )
   const asHex = '#' + hexColorSchema.serialize(color)
   return (
-    <>
-      <h1>Hex colors</h1>
-      <section>
-        <div>
+    <div className="flex flex-wrap-reverse items-center gap-4">
+      <div
+        className="h-64 w-64 rounded border"
+        style={{
+          backgroundColor: `rgb(${color.r} ${color.g} ${color.b})`
+        }}
+      />
+      <section className="space-y-2">
+        <div className="flex items-center">
           <label>Color</label>
           <input
             type="color"
@@ -82,19 +87,7 @@ export default function HexColorsDemo() {
           }
         />
       </section>
-      <div
-        style={{
-          height: '200px',
-          width: '200px',
-          backgroundColor: `rgb(${color.r} ${color.g} ${color.b})`
-        }}
-      ></div>
-      <p>
-        <a href="https://github.com/47ng/nuqs/tree/next/packages/docs/src/app/(pages)/playground/hex-colors/page.tsx">
-          Source on GitHub
-        </a>
-      </p>
-    </>
+    </div>
   )
 }
 
@@ -112,15 +105,7 @@ const ColorSlider = ({
   accentColor
 }: ColorSliderProps) => {
   return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: '4px',
-        // @ts-ignore
-        accentColor
-      }}
-    >
+    <div className="flex items-center gap-4" style={{ accentColor }}>
       <label>{label}</label>
       <input
         type="range"

packages/docs/src/app/playground/(demos)/hex-colors/page.tsx

@@ -0,0 +1,20 @@
+import { Description } from '@/src/components/typography'
+import { Suspense } from 'react'
+import { SourceOnGitHub } from '../_components/source-on-github'
+import { getMetadata } from '../demos'
+import Client from './client'
+
+export const metadata = getMetadata('hex-colors')
+
+export default function HexColorsDemoPage() {
+  return (
+    <>
+      <h1>{metadata.title}</h1>
+      <Description>{metadata.description}</Description>
+      <Suspense>
+        <Client />
+      </Suspense>
+      <SourceOnGitHub path="hex-colors/client.tsx" />
+    </>
+  )
+}

packages/docs/src/app/playground/(demos)/layout.tsx

@@ -12,7 +12,7 @@ export default function PlaygroundDemoLayout({
       <Suspense fallback={<QuerySpySkeleton>&nbsp;</QuerySpySkeleton>}>
         <QuerySpy />
       </Suspense>
-      <main className="py-2 md:py-10">{children}</main>
+      <main className="py-2 md:py-4">{children}</main>
     </>
   )
 }