| 1 | import { useEffect, useState } from "octane"; |
| 2 | import "./app.css"; |
| 3 | |
| 4 | export function App() { |
| 5 | const [count, setCount] = useState(0); |
| 6 | const [visits, setVisits] = useState<number | null>(null); |
| 7 | useEffect(() => { |
| 8 | fetch("/api/visits") |
| 9 | .then((response) => response.json()) |
| 10 | .then((body: { visits: number | null }) => setVisits(body.visits)) |
| 11 | .catch(() => setVisits(null)); |
| 12 | }, []); |
| 13 | return ( |
| 14 | <main class="mx-auto flex max-w-xl flex-col gap-4 p-8 text-center"> |
| 15 | <h1 class="text-3xl font-bold tracking-tight"> |
| 16 | Octane on Cloudflare Workers |
| 17 | </h1> |
| 18 | <p class="text-slate-600"> |
| 19 | Server-rendered by Octane, deployed by Alchemy. |
| 20 | </p> |
| 21 | <button |
| 22 | class="mx-auto rounded-lg bg-slate-900 px-4 py-2 font-medium text-white" |
| 23 | onClick={() => setCount(count + 1)} |
| 24 | > |
| 25 | count is {count} |
| 26 | </button> |
| 27 | <p class="text-sm text-slate-500"> |
| 28 | {visits === null |
| 29 | ? "visit count needs a deployed KV binding" |
| 30 | : `visits: ${visits}`} |
| 31 | </p> |
| 32 | </main> |
| 33 | ); |
| 34 | } |