fix: example convert space- to flex and gap-

PatrickJS · PatrickJS · commit ad6683da5f6c · 2024-11-04T21:14:27.000-08:00
diff --git a/packages/examples/jsx-client/App.tsx b/packages/examples/jsx-client/App.tsx
@@ -16,7 +16,7 @@ export function App() {
       class="min-h-screen bg-gray-100 py-8 px-4"
       on:update="App.tsx, Counter.tsx"
     >
-      <div class="max-w-3xl mx-auto space-y-8">
+      <div class="max-w-3xl mx-auto flex flex-col gap-8">
         <div class="bg-white rounded-lg shadow-md p-6">
           <h1 class="text-3xl font-bold text-gray-800 mb-4">Hello {nameSig}</h1>
           <input
diff --git a/packages/examples/jsx-client/Counter.tsx b/packages/examples/jsx-client/Counter.tsx
@@ -37,15 +37,12 @@ export function Counter() {
           )}
         >
           <div>
-            <div>
-              <span class="text-red-500">WIP</span> Render Problem
-            </div>
+            <div>Rendering edge cases</div>
           </div>
           <div class="text-red-500">
             Count: {count} Doubled: {doubled} Tripled: {tripled}
           </div>
           <div>
-            <div>Fake Fixed Render Problem</div>
             Count: <span>{count}</span> Doubled: <span>{doubled}</span> Tripled:
             {" "}
             <span>{tripled}</span>
@@ -61,7 +58,7 @@ export function Counter() {
         </button>
       </div>
 
-      <div class="space-x-4">
+      <div class="flex gap-4">
         <button
           class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
           onClick={() => count.value++}

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export function App() {`
`16`	`16`	`class="min-h-screen bg-gray-100 py-8 px-4"`
`17`	`17`	`on:update="App.tsx, Counter.tsx"`
`18`	`18`	`>`
`19`		`- <div class="max-w-3xl mx-auto space-y-8">`
	`19`	`+ <div class="max-w-3xl mx-auto flex flex-col gap-8">`
`20`	`20`	`<div class="bg-white rounded-lg shadow-md p-6">`
`21`	`21`	`<h1 class="text-3xl font-bold text-gray-800 mb-4">Hello {nameSig}</h1>`
`22`	`22`	`<input`