89 lines
2.9 KiB
Svelte
89 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
interface Event {
|
|
name: string;
|
|
date: string;
|
|
created_at: string;
|
|
sheet_id: string;
|
|
}
|
|
|
|
let { event, loading, error } = $props<{
|
|
event: Event | null;
|
|
loading: boolean;
|
|
error: string;
|
|
}>();
|
|
|
|
function formatDate(dateString: string) {
|
|
return new Date(dateString).toLocaleDateString('en-GB', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric'
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
|
|
{#if loading}
|
|
<!-- Loading placeholder with header -->
|
|
<div>
|
|
<h2 class="mb-4 text-2xl font-semibold text-gray-900">Event Information</h2>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center">
|
|
<span class="w-20 text-sm font-medium text-gray-500">Date:</span>
|
|
<div class="h-4 w-1/4 animate-pulse rounded bg-gray-200"></div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="w-20 text-sm font-medium text-gray-500">Created:</span>
|
|
<div class="h-4 w-1/3 animate-pulse rounded bg-gray-200"></div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
|
|
<div class="h-4 w-1/2 animate-pulse rounded bg-gray-200"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{:else if event}
|
|
<div>
|
|
<h2 class="mb-4 text-2xl font-semibold text-gray-900">{event.name}</h2>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center">
|
|
<span class="w-20 text-sm font-medium text-gray-500">Date:</span>
|
|
<span class="text-sm text-gray-900">{formatDate(event.date)}</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="w-20 text-sm font-medium text-gray-500">Created:</span>
|
|
<span class="text-sm text-gray-900">{formatDate(event.created_at)}</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
|
|
<a
|
|
href={`https://docs.google.com/spreadsheets/d/${event.sheet_id}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-flex items-center rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800 transition hover:bg-green-200"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="mr-1 h-3 w-3"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
|
/>
|
|
</svg>
|
|
Open in Google Sheets
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{:else if error}
|
|
<div class="py-8 text-center">
|
|
<p class="text-red-600">{error}</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|