[WIP] book tracker on the atmosphere~
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: use svelte 5 props

willow 056fc9d0 744a6e50

+13 -19
+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
··· 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}
+1 -2
src/routes/login/+page.svelte
··· 1 1 <script lang="ts"> 2 2 import { enhance } from '$app/forms'; 3 - import type { PageData, ActionData } from './$types'; 4 3 5 - export let form: ActionData; 4 + let { form } = $props(); 6 5 </script> 7 6 8 7 <svelte:head>