[WIP] book tracker on the atmosphere~
fix: use svelte 5 props
+13
-19
+7
-8
src/lib/components/BookCard.svelte
+7
-8
src/lib/components/BookCard.svelte
···
1
1
<script lang="ts">
2
2
import type { Book } from '$lib/server/db/schema';
3
3
4
-
export let book: Book;
5
-
export let authorHandle: string | undefined = undefined;
4
+
interface Props {
5
+
book: Book;
6
+
authorHandle?: string;
7
+
}
8
+
let { book, authorHandle }: Props = $props();
6
9
7
10
function formatDate(dateString: string) {
8
11
return new Date(dateString).toLocaleDateString();
···
13
16
class="rounded-lg border border-ctp-surface2 bg-ctp-surface1 p-4 transition-colors hover:bg-ctp-surface2"
14
17
>
15
18
<h4 class="mb-1 font-semibold text-ctp-text">{book.title}</h4>
16
-
<p class="mb-2 text-sm text-ctp-subtext1">by {book.author}</p>
17
-
18
-
{#if book.publishedYear}
19
-
<p class="mb-1 text-xs text-ctp-subtext0">Published: {book.publishedYear}</p>
20
-
{/if}
21
-
19
+
<p class="mb-2 text-sm text-ctp-subtext1">by {book.authors.join(', ')}</p>
20
+
22
21
<div class="space-y-1">
23
22
<p class="text-xs text-ctp-overlay1">Added: {formatDate(book.createdAt)}</p>
24
23
{#if authorHandle !== undefined}
+5
-9
src/routes/+page.svelte
+5
-9
src/routes/+page.svelte
···
1
1
<script lang="ts">
2
2
import { enhance } from '$app/forms';
3
-
import type { PageData, ActionData } from './$types';
4
3
import Card from '$lib/components/Card.svelte';
5
4
import BookCard from '$lib/components/BookCard.svelte';
6
5
7
-
export let data: PageData;
8
-
export let form: ActionData;
6
+
let { data, form } = $props();
7
+
let searchTerm = $state('');
9
8
</script>
10
9
11
10
<svelte:head>
···
57
56
{/if}
58
57
59
58
{#if data.user}
60
-
<Card title="Search for books">
61
-
<input
62
-
type="text"
63
-
placeholder="Enter search term"
64
-
/>
65
-
</Card>
59
+
<Card title="Search for books">
60
+
<input type="text" placeholder="Enter search term" bind:value={searchTerm} />
61
+
</Card>
66
62
<Card title="Add a Book">
67
63
<form method="POST" action="?/addBook" use:enhance class="space-y-4">
68
64
{#if form?.error}