Split event view into components

This commit is contained in:
Roman Krček
2025-07-12 14:40:46 +02:00
parent d6eee9c498
commit d945209465
8 changed files with 575 additions and 405 deletions

View File

@@ -0,0 +1,47 @@
<script lang="ts">
interface Event {
email_subject: string;
email_body: string;
}
let { event, loading } = $props<{
event: Event | null;
loading: boolean;
}>();
</script>
<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
<div class="mb-4">
<h2 class="text-xl font-semibold text-gray-900">Email Template</h2>
</div>
{#if loading}
<!-- Loading placeholder for email template content -->
<div class="space-y-4">
<div>
<span class="block mb-1 text-sm font-medium text-gray-700">Subject:</span>
<div class="h-10 w-full animate-pulse rounded bg-gray-200"></div>
</div>
<div>
<span class="block mb-1 text-sm font-medium text-gray-700">Body:</span>
<div class="h-28 w-full animate-pulse rounded bg-gray-200"></div>
</div>
</div>
{:else if event}
<div class="space-y-4">
<div>
<span class="block mb-1 text-sm font-medium text-gray-700">Subject:</span>
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
<p class="text-sm text-gray-900">{event.email_subject}</p>
</div>
</div>
<div>
<span class="block mb-1 text-sm font-medium text-gray-700">Body:</span>
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200 max-h-48 overflow-y-auto">
<p class="text-sm whitespace-pre-wrap text-gray-900">{event.email_body}</p>
</div>
</div>
</div>
{/if}
</div>