From da1a53ba29e9587802ef37bf4b41a95aae4ee8d8 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sun, 4 Aug 2024 14:58:42 +0900
Subject: [PATCH] feat: update playground components to support number prop

---
 src/components/LoadedCode.tsx | 2 +-
 src/components/PgHooks.tsx    | 2 +-
 src/components/Playground.tsx | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/LoadedCode.tsx b/src/components/LoadedCode.tsx
index 22ce50e..914563b 100644
--- a/src/components/LoadedCode.tsx
+++ b/src/components/LoadedCode.tsx
@@ -31,7 +31,7 @@ export const GITHUB_STORY = (componentName: string, storyName: string) =>
 
 export type TEMPLATE = Record<
   string,
-  Record<string, string | boolean | undefined>
+  Record<string, string | boolean | number | undefined>
 >;
 
 const TEMPLATE_REMOVE_REGEX = /\/\*\s*remove\s*\*\/(.|\n)*?\/\*\s*end\s*\*\//g;
diff --git a/src/components/PgHooks.tsx b/src/components/PgHooks.tsx
index 01577ad..41faa9a 100644
--- a/src/components/PgHooks.tsx
+++ b/src/components/PgHooks.tsx
@@ -19,7 +19,7 @@ export function usePgProps<T extends TEMPLATE>(
       for (const [propKey, propMeta] of Object.entries(prop)) {
         pre[propKey] = {
           ...propMeta,
-          onChange(value: string | boolean) {
+          onChange(value: string | number | boolean) {
             console.log(`mutating ${componentName}/${propKey}`);
             mutate((state) => {
               state[componentName][propKey].value = value;
diff --git a/src/components/Playground.tsx b/src/components/Playground.tsx
index c2d4bc2..19df256 100644
--- a/src/components/Playground.tsx
+++ b/src/components/Playground.tsx
@@ -15,6 +15,7 @@ export type Template = Record<
     | { type: "boolean"; value: boolean; disabled?: boolean }
     | { type: "select"; options: string[]; value: string; disabled?: boolean }
     | { type: "string"; value: string; disabled?: boolean }
+    | { type: "number"; value: number; disabled?: boolean }
   >
 >;
 
@@ -76,7 +77,7 @@ export function PlaygroundControl<T extends ControlTemplate>(props: {
             {Object.entries(propEntries).map(([propName, propMeta]) => (
               <div
                 key={componentName + propName}
-                className="flex flex-row justify-between items-center w-full gap-2"
+                className="flex flex-col md:flex-row justify-between md:items-center w-full *:w-full md:*:w-auto gap-2"
               >
                 <Label
                   direction="horizontal"