48 lines
1.6 KiB
React
48 lines
1.6 KiB
React
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>
|
|
);
|
|
}
|