justinandClaude Opus 4.6
602f36d558
Replace teal-brand→primary, teal-dark→primary-dark, teal-light→primary-light, gray-soft→gray-200, gray-brand→gray-900 across 53 files. Fixes theming not applying — colors now use CSS custom properties from org_config. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
156 lines
6.4 KiB
Svelte
156 lines
6.4 KiB
Svelte
<script lang="ts">
|
|
let { data } = $props();
|
|
|
|
const orgName = $derived(data.orgConfig.orgInfo.name);
|
|
const facebookUrl = $derived(data.orgConfig.orgInfo.facebookUrl);
|
|
|
|
function formatDate(dateStr: string | Date): string {
|
|
const d = new Date(dateStr);
|
|
return d.toLocaleDateString('en-US', {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
}
|
|
|
|
function formatTime(dateStr: string | Date): string {
|
|
const d = new Date(dateStr);
|
|
return d.toLocaleTimeString('en-US', {
|
|
hour: 'numeric',
|
|
minute: '2-digit'
|
|
});
|
|
}
|
|
|
|
function formatShortDate(dateStr: string | Date): string {
|
|
const d = new Date(dateStr);
|
|
return d.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric'
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Events | {orgName}</title>
|
|
<meta name="description" content="Upcoming adoption events, fundraisers, and community gatherings hosted by {orgName}." />
|
|
</svelte:head>
|
|
|
|
<!-- Hero -->
|
|
<section class="bg-primary py-16 text-center text-white">
|
|
<div class="mx-auto max-w-4xl px-4">
|
|
<h1 class="text-4xl font-bold sm:text-5xl">Events</h1>
|
|
<p class="mt-4 text-lg text-primary-light/90">
|
|
Join us at adoption events, fundraisers, and community gatherings.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Upcoming Events -->
|
|
<section class="bg-warm-bg py-16">
|
|
<div class="mx-auto max-w-6xl px-4">
|
|
<h2 class="text-center text-3xl font-bold text-gray-900">Upcoming Events</h2>
|
|
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
|
|
|
{#if data.upcomingEvents.length > 0}
|
|
<div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
|
{#each data.upcomingEvents as event}
|
|
<article class="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md">
|
|
{#if event.imageUrl}
|
|
<div class="aspect-video overflow-hidden bg-primary-light">
|
|
<img src={event.imageUrl} alt={event.title} class="h-full w-full object-cover" />
|
|
</div>
|
|
{:else}
|
|
<div class="flex aspect-video items-center justify-center bg-primary-light">
|
|
<svg class="h-16 w-16 text-primary/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
{/if}
|
|
<div class="flex flex-1 flex-col p-6">
|
|
<div class="flex items-center gap-2 text-sm text-primary">
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
<span class="font-medium">{formatDate(event.startDate)}</span>
|
|
</div>
|
|
<div class="mt-1 flex items-center gap-2 text-sm text-gray-mid">
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span>{formatTime(event.startDate)}</span>
|
|
</div>
|
|
<h3 class="mt-3 text-xl font-bold text-gray-900">{event.title}</h3>
|
|
{#if event.location}
|
|
<div class="mt-2 flex items-start gap-2 text-sm text-gray-mid">
|
|
<svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
<span>{event.location}</span>
|
|
</div>
|
|
{/if}
|
|
{#if event.description}
|
|
<p class="mt-3 flex-1 text-gray-mid">{event.description}</p>
|
|
{/if}
|
|
</div>
|
|
</article>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<div class="mt-12 rounded-xl border border-gray-200 bg-white p-12 text-center">
|
|
<div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-primary-light">
|
|
<svg class="h-10 w-10 text-primary/50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-4 text-xl font-semibold text-gray-900">No Upcoming Events</h3>
|
|
<p class="mt-2 text-gray-mid">
|
|
Check back soon! {#if facebookUrl}Follow us on Facebook for the latest updates.{/if}
|
|
</p>
|
|
{#if facebookUrl}
|
|
<a href={facebookUrl} target="_blank" rel="noopener noreferrer" class="mt-6 inline-block rounded-lg bg-primary px-6 py-2.5 font-semibold text-white transition hover:bg-primary-dark">
|
|
Follow Us on Facebook
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Past Events -->
|
|
{#if data.pastEvents.length > 0}
|
|
<section class="bg-white py-16">
|
|
<div class="mx-auto max-w-6xl px-4">
|
|
<h2 class="text-center text-2xl font-bold text-gray-900">Past Events</h2>
|
|
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
|
|
|
<div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{#each data.pastEvents as event}
|
|
<div class="flex items-start gap-4 rounded-lg border border-gray-200 bg-warm-bg p-4">
|
|
{#if event.imageUrl}
|
|
<div class="h-16 w-16 shrink-0 overflow-hidden rounded-lg">
|
|
<img src={event.imageUrl} alt={event.title} class="h-full w-full object-cover" />
|
|
</div>
|
|
{:else}
|
|
<div class="flex h-16 w-16 shrink-0 items-center justify-center rounded-lg bg-primary-light">
|
|
<svg class="h-6 w-6 text-primary/40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
{/if}
|
|
<div class="min-w-0 flex-1">
|
|
<p class="text-xs font-medium text-primary">{formatShortDate(event.startDate)}</p>
|
|
<h3 class="mt-0.5 truncate font-semibold text-gray-900">{event.title}</h3>
|
|
{#if event.location}
|
|
<p class="mt-0.5 truncate text-sm text-gray-mid">{event.location}</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/if}
|