[WIP] book tracker on the atmosphere~
42willow.github.io
1<script lang="ts">
2 import type { Book } from '$lib/server/db/schema';
3
4 interface Props {
5 book: Book;
6 authorHandle?: string;
7 }
8 let { book, authorHandle }: Props = $props();
9
10 function formatDate(dateString: string) {
11 return new Date(dateString).toLocaleDateString();
12 }
13</script>
14
15<div
16 class="rounded-lg border border-ctp-surface2 bg-ctp-surface1 p-4 transition-colors hover:bg-ctp-surface2"
17>
18 <h4 class="mb-1 font-semibold text-ctp-text">{book.title}</h4>
19 <p class="mb-2 text-sm text-ctp-subtext1">by {book.authors.join(', ')}</p>
20
21 <div class="space-y-1">
22 <p class="text-xs text-ctp-overlay1">Added: {formatDate(book.createdAt)}</p>
23 {#if authorHandle !== undefined}
24 <p class="truncate text-xs text-ctp-overlay0">
25 By: {authorHandle || book.authorDid}
26 </p>
27 {/if}
28 </div>
29</div>