33 lines
988 B
Svelte
33 lines
988 B
Svelte
<script lang="ts">
|
|
import { base } from '$app/paths';
|
|
import type { Trip } from '$lib/server/trips.js';
|
|
|
|
interface Props {
|
|
trip: Trip;
|
|
}
|
|
let { trip }: Props = $props();
|
|
|
|
function formatDate(d: string | null) {
|
|
if (!d) return 'TBD';
|
|
return new Date(d + 'T00:00:00').toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
|
|
}
|
|
</script>
|
|
|
|
<a
|
|
href="{base}/trips/{trip.id}"
|
|
class="flex flex-col rounded-xl border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md overflow-hidden"
|
|
>
|
|
<!-- Placeholder artwork area -->
|
|
<div class="h-32 w-full bg-gradient-to-br from-blue-100 to-blue-200"></div>
|
|
|
|
<div class="flex flex-col gap-1 p-4">
|
|
<h2 class="font-semibold text-gray-900 truncate">{trip.name}</h2>
|
|
<p class="text-xs text-gray-500">
|
|
{formatDate(trip.start_date)} — {formatDate(trip.end_date)}
|
|
</p>
|
|
{#if trip.description}
|
|
<p class="mt-1 text-sm text-gray-600 line-clamp-2">{trip.description}</p>
|
|
{/if}
|
|
</div>
|
|
</a>
|