feat: add db, form actions, load data

src/routes/+page.server.ts

@@ -0,0 +1,31 @@
+import { db } from "$lib/server/db";
+import { cards } from "$lib/server/db/schema";
+import type { Actions, PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ params }) => {
+	return {
+		cards: await db.query.cards.findMany({
+			with: {
+				images: true,
+			},
+		})
+	}
+}
+
+export const actions = {
+	createCard: async ({ request }) => {
+		const data = await request.formData();
+
+		const name = data.get('name');
+		const link = data.get('link');
+		const image = data.get('image')
+
+		console.log(image)
+
+		await db.insert(cards).values({
+			link: link,
+			name: name,
+		})
+
+	}
+} satisfies Actions;

src/routes/+page.svelte

@@ -1,2 +1,32 @@
+<script lang="ts">
+	import { enhance } from "$app/forms";
+	import Card from "$lib/components/Card.svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
+	import Input from "$lib/components/ui/input/input.svelte";
+	import Label from "$lib/components/ui/label/label.svelte";
+	import type { PageData } from "./$types";
+
+	let { data }: { data: PageData } = $props();
+
+	console.log("cards", data.cards);
+</script>
+
 <h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<p>
+	Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the
+	documentation
+</p>
+
+{#each data.cards as card}
+	<Card {...card} />
+{/each}
+
+<form method="POST" action="?/createCard" enctype="multipart/form-data" use:enhance>
+	<Label for="image">Card image</Label>
+	<Input id="image" name="image" type="file" />
+	<Label for="name">The name of the card</Label>
+	<Input id="name" name="name" />
+	<Label for="link">where to go</Label>
+	<Input id="link" name="link" />
+	<Button type="submit">Create</Button>
+</form>