From ca9036c1ad52eb8f7ec1a335b54f70104af3a367 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sun, 4 Aug 2024 14:35:09 +0900
Subject: [PATCH] feat: improve playground control style

---
 src/components/Playground.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Playground.tsx b/src/components/Playground.tsx
index 8e9b1a4..a0cd069 100644
--- a/src/components/Playground.tsx
+++ b/src/components/Playground.tsx
@@ -63,7 +63,9 @@ export function PlaygroundControl<T extends ControlTemplate>(props: {
             key={componentName}
             className="w-full flex flex-col justify-center items-start gap-4"
           >
-            <b>&lt;{componentName.slice(0, componentName.length - 5)}&gt;</b>
+            <span className="font-thin opacity-50 w-full border-b border-b-current pb-2">
+              &lt;{componentName.slice(0, componentName.length - 5)}&gt;
+            </span>
             {Object.entries(propEntries).map(([propName, propMeta]) => (
               <div
                 key={componentName + propName}
@@ -75,9 +77,9 @@ export function PlaygroundControl<T extends ControlTemplate>(props: {
                 >
                   <Checkbox
                     onChange={(e) => {
-                      propMeta.onToggle(e.currentTarget.checked);
+                      propMeta.onToggle(!e.currentTarget.checked);
                     }}
-                    checked={propMeta.disabled}
+                    checked={!propMeta.disabled}
                   />
                   {propMeta.disabled ? (
                     <s className="opacity-50">{propName}</s>