1<script lang="ts">
2 import Card from "$lib/Card.svelte";
3
4 let { data } = $props();
5 let count = $state(0);
6 let greeting = $state("");
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 greeting = body.greeting;
14 } catch {
15 greeting = "Could not load the greeting. Try again.";
16 }
17 }
18</script>
19
20<svelte:head>
21 <title>SvelteKit on Neon</title>
22</svelte:head>
23
24<main>
25 <h1 class="text-3xl font-bold">{data.greeting}</h1>
26 <Card
27 title="Styled with Tailwind CSS"
28 body="This card is a Svelte component styled with Tailwind utilities."
29 />
30 <button type="button" onclick={() => count++}>count: {count}</button>
31 <button type="button" onclick={loadGreeting}>Load greeting</button>
32 <p role="status">{greeting}</p>
33 <a class="mt-4 inline-block underline" href="/about">about (prerendered)</a>
34</main>