57 lines
2.2 KiB
Plaintext
57 lines
2.2 KiB
Plaintext
---
|
|
import SectionHeading from './SectionHeading.astro';
|
|
import type { EventItem } from '../lib/fallback-data';
|
|
import { formatDate, formatTime, formatWeekday } from '../lib/format';
|
|
import { normalizeSlug } from '../lib/slug';
|
|
|
|
type Props = {
|
|
events: EventItem[];
|
|
title?: string;
|
|
description?: string;
|
|
};
|
|
|
|
const { events, title = 'Upcoming events', description = 'A quick scan list for pilots, visitors, and local supporters.' } = Astro.props as Props;
|
|
---
|
|
|
|
<section>
|
|
<SectionHeading eyebrow="Events" title={title} description={description} />
|
|
<div class="stack">
|
|
{events.length > 0 ? (
|
|
events.map((event) => {
|
|
const normalizedSlug = normalizeSlug(event.slug);
|
|
const detailHref = normalizedSlug ? `/events/${normalizedSlug}/` : undefined;
|
|
const summary = event.summary?.trim() || event.description;
|
|
const time = formatTime(event.start_datetime);
|
|
const logoSrc = typeof event.logo === 'string' ? event.logo : event.logo?.id;
|
|
|
|
return (
|
|
<article class="card event-card">
|
|
{detailHref && <a class="stretched-link" href={detailHref} aria-label={`View ${event.title}`} />}
|
|
<div class="event-layout">
|
|
<div class="event-date-block">
|
|
<p class="event-weekday">{formatWeekday(event.start_datetime)}</p>
|
|
<p class="event-date">{formatDate(event.start_datetime)}</p>
|
|
{time && <p class="event-time">{time}</p>}
|
|
{logoSrc && <img class="event-logo" src={logoSrc} alt={`${event.title} logo`} loading="lazy" />}
|
|
</div>
|
|
<div>
|
|
<h3>{event.title}</h3>
|
|
<p>{summary}</p>
|
|
{event.location_text && <p>{event.location_text}</p>}
|
|
{event.registration_link && (
|
|
<p class="event-card-actions"><a class="button secondary" href={event.registration_link}>Register</a></p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
})
|
|
) : (
|
|
<article class="card">
|
|
<h3>No events published</h3>
|
|
<p>Directus events will render here when content is available.</p>
|
|
</article>
|
|
)}
|
|
</div>
|
|
</section>
|