added solid.js as front end

2026-02-14 16:23:55 -06:00
parent 4970133b83
commit d645bda942
11 changed files with 430 additions and 5 deletions
@@ -0,0 +1,47 @@
+import { createSignal } from "solid-js";
+
+export function SolidApp(props) {
+    // Local state for optimistic updates or other UI-only logic
+    const [isUpdating, setIsUpdating] = createSignal(false);
+
+    const increment = () => {
+        setIsUpdating(true);
+        props.push("increment", {});
+    };
+
+    const decrement = () => {
+        setIsUpdating(true);
+        props.push("decrement", {});
+    };
+
+    // Reset updating flag when state changes from server
+    // (In a real app, you might use a more sophisticated approach)
+
+    return (
+        <div class="p-6 border-2 border-blue-500 rounded-lg bg-white shadow-md">
+            <h2 class="text-xl font-semibold text-blue-700 mb-4">Solid.js Component</h2>
+
+            <div class="flex items-center space-x-4 mb-6">
+                <span class="text-4xl font-bold">{props.state.count}</span>
+                <div class="flex flex-col space-y-2">
+                    <button
+                        onClick={increment}
+                        class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
+                    >
+                        Increment
+                    </button>
+                    <button
+                        onClick={decrement}
+                        class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors"
+                    >
+                        Decrement
+                    </button>
+                </div>
+            </div>
+
+            <p class="text-sm text-gray-500 italic">
+                This UI is rendered by Solid.js. Changes are synced back to Elixir via push_event.
+            </p>
+        </div>
+    );
+}