123 lines
6.7 KiB
Svelte
123 lines
6.7 KiB
Svelte
<script lang="ts">
|
|
import type { ExtendedEvent } from "../types/event";
|
|
import dayjs from "dayjs";
|
|
import * as Card from "../ui/card";
|
|
|
|
const { events }: { events: { slug: string; data: { event: ExtendedEvent } }[] } = $props();
|
|
// Categorize events into current, upcoming and past.
|
|
const now = dayjs();
|
|
const sorted = [...events].sort((a, b) => a.data.event.event.start - b.data.event.event.start);
|
|
|
|
const currentEvents = sorted
|
|
.filter((e) => {
|
|
const start = dayjs(e.data.event.event.start);
|
|
const end = dayjs(e.data.event.event.end);
|
|
return start.isBefore(now) && end.isAfter(now);
|
|
})
|
|
.sort((a, b) => a.data.event.event.end - b.data.event.event.end);
|
|
|
|
const currentEvent = currentEvents[0];
|
|
const upcomingEvents = sorted.filter((e) => dayjs(e.data.event.event.start).isAfter(now));
|
|
const pastEvents = sorted.filter((e) => dayjs(e.data.event.event.end).isBefore(now)).sort((a, b) => b.data.event.event.end - a.data.event.event.end);
|
|
</script>
|
|
|
|
{#if currentEvent}
|
|
<div class="mb-8">
|
|
<h2 class="text-xl font-semibold text-white mb-4">Aktuelles Event</h2>
|
|
<div class="grid grid-cols-1">
|
|
<a href={`/events/${currentEvent.slug}/`} class="group block h-full">
|
|
<Card.Root class="h-full overflow-hidden border-slate-700 bg-slate-800 transition-all hover:-translate-y-1 hover:shadow-xl">
|
|
<div class="h-32 bg-gradient-to-br from-blue-600 to-purple-700 relative">
|
|
<div class="absolute bottom-0 left-0 p-4 bg-gradient-to-t from-slate-900 to-transparent w-full">
|
|
<div class="inline-block bg-slate-900/80 backdrop-blur text-white text-xs font-bold px-2 py-1 rounded mb-1 border border-slate-600">
|
|
{dayjs(currentEvent.data.event.event.start).format("DD.MM.YYYY")}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Card.Header>
|
|
<Card.Title class="text-white group-hover:text-blue-400 transition-colors">
|
|
{currentEvent.data.event.event.name}
|
|
</Card.Title>
|
|
</Card.Header>
|
|
<Card.Content>
|
|
<p class="text-gray-400 text-sm line-clamp-2">
|
|
Läuft seit {dayjs(currentEvent.data.event.event.start).format("HH:mm")}
|
|
</p>
|
|
<div class="mt-4 flex items-center text-sm text-blue-400 font-medium">
|
|
Details <span class="ml-1 transition-transform group-hover:translate-x-1">→</span>
|
|
</div>
|
|
</Card.Content>
|
|
</Card.Root>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if upcomingEvents.length}
|
|
<div class="mb-8">
|
|
<h2 class="text-xl font-semibold text-white mb-4">Bevorstehende Events</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{#each upcomingEvents as event}
|
|
<a href={`/events/${event.slug}/`} class="group block h-full">
|
|
<Card.Root class="h-full overflow-hidden border-slate-700 bg-slate-800 transition-all hover:-translate-y-1 hover:shadow-xl">
|
|
<div class="h-32 bg-gradient-to-br from-blue-600 to-purple-700 relative">
|
|
<div class="absolute bottom-0 left-0 p-4 bg-gradient-to-t from-slate-900 to-transparent w-full">
|
|
<div class="inline-block bg-slate-900/80 backdrop-blur text-white text-xs font-bold px-2 py-1 rounded mb-1 border border-slate-600">
|
|
{dayjs(event.data.event.event.start).format("DD.MM.YYYY")}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Card.Header>
|
|
<Card.Title class="text-white group-hover:text-blue-400 transition-colors">
|
|
{event.data.event.event.name}
|
|
</Card.Title>
|
|
</Card.Header>
|
|
<Card.Content>
|
|
<p class="text-gray-400 text-sm line-clamp-2">
|
|
Startet um {dayjs(event.data.event.event.start).format("HH:mm")}
|
|
</p>
|
|
<div class="mt-4 flex items-center text-sm text-blue-400 font-medium">
|
|
Details <span class="ml-1 transition-transform group-hover:translate-x-1">→</span>
|
|
</div>
|
|
</Card.Content>
|
|
</Card.Root>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if pastEvents.length}
|
|
<div class="mb-4">
|
|
<h2 class="text-xl font-semibold text-white mb-4">Vergangene Events</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 opacity-70">
|
|
{#each pastEvents as event}
|
|
<a href={`/events/${event.slug}/`} class="group block h-full">
|
|
<Card.Root class="h-full overflow-hidden border-slate-700 bg-slate-800 transition-all hover:-translate-y-1 hover:shadow-xl">
|
|
<div class="h-32 bg-gradient-to-br from-blue-600 to-purple-700 relative">
|
|
<div class="absolute bottom-0 left-0 p-4 bg-gradient-to-t from-slate-900 to-transparent w-full">
|
|
<div class="inline-block bg-slate-900/80 backdrop-blur text-white text-xs font-bold px-2 py-1 rounded mb-1 border border-slate-600">
|
|
{dayjs(event.data.event.event.start).format("DD.MM.YYYY")}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Card.Header>
|
|
<Card.Title class="text-white group-hover:text-blue-400 transition-colors">
|
|
{event.data.event.event.name}
|
|
</Card.Title>
|
|
</Card.Header>
|
|
<Card.Content>
|
|
<p class="text-gray-400 text-sm line-clamp-2">
|
|
Stattgefunden um {dayjs(event.data.event.event.start).format("HH:mm")}
|
|
</p>
|
|
<div class="mt-4 flex items-center text-sm text-blue-400 font-medium">
|
|
Details <span class="ml-1 transition-transform group-hover:translate-x-1">→</span>
|
|
</div>
|
|
</Card.Content>
|
|
</Card.Root>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|