| 1 | import { useState } from "octane"; |
| 2 | import "./app.css"; |
| 3 | |
| 4 | export function App() { |
| 5 | const [count, setCount] = useState(0); |
| 6 | const [greeting, setGreeting] = useState(""); |
| 7 | |
| 8 | async function loadGreeting() { |
| 9 | try { |
| 10 | const response = await fetch("/api/hello?name=browser"); |
| 11 | if (!response.ok) throw new Error(`HTTP ${response.status}`); |
| 12 | const body = (await response.json()) as { greeting: string }; |
| 13 | setGreeting(body.greeting); |
| 14 | } catch { |
| 15 | setGreeting("Could not load the greeting. Try again."); |
| 16 | } |
| 17 | } |
| 18 | |
| 19 | return ( |
| 20 | <main class="mx-auto flex max-w-xl flex-col gap-4 p-8 text-center"> |
| 21 | <h1 class="text-3xl font-bold">Octane on Neon</h1> |
| 22 | <p>Server-rendered by Octane, deployed by Alchemy.</p> |
| 23 | <button type="button" onClick={() => setCount(count + 1)}> |
| 24 | count: {count} |
| 25 | </button> |
| 26 | <button type="button" onClick={loadGreeting}> |
| 27 | Load greeting |
| 28 | </button> |
| 29 | <p role="status">{greeting}</p> |
| 30 | </main> |
| 31 | ); |
| 32 | } |