Split event view into components

src/routes/private/events/event/view/components/EventInformation.svelte

@@ -0,0 +1,88 @@
+<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>