55 lines
2.2 KiB
Plaintext
55 lines
2.2 KiB
Plaintext
---
|
|
import CalendarIcon from '@/icons/CalendarIcon.astro';
|
|
import { Image } from 'astro:assets';
|
|
import { upcomingEvent as UpcomingEvent } from './subcomponents/UpcomingEvent';
|
|
import { markdownToHtml } from '@/lib/markdown';
|
|
|
|
interface Props {
|
|
upcomingEvents: UpcomingEventsComponent;
|
|
}
|
|
|
|
const upcomingEvents = Astro.props.upcomingEvents;
|
|
---
|
|
|
|
<div id={`upcomingevents-${upcomingEvents.id}`} class="flex flex-col justify-between items-center py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18">
|
|
<h1 class="text-5xl font-bold">Upcoming Events</h1>
|
|
|
|
<div class="flex flex-col items-start gap-7 w-full">
|
|
{ upcomingEvents.events.map((event) => (
|
|
<div id={event.id} class="flex lg:flex-row flex-col items-center justify-center lg:gap-y-8 gap-y-5 gap-x-18">
|
|
<div class="lg:w-[50%] w-full">
|
|
<Image
|
|
src={event.thumbnail.url}
|
|
width={event.thumbnail.width}
|
|
height={event.thumbnail.height}
|
|
class={`aspect-15/9 rounded-2xl shadow-md object-cover`}
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="flex flex-col gap-2.5 lg:w-[40%] w-full">
|
|
<h3 class="text-3xl font-semibold">{event.title}</h3>
|
|
<div class="flex flex-row items-center gap-1.5 text-neutral-900">
|
|
<CalendarIcon width={24} height={24} />
|
|
{ event.endDate !== null ? (
|
|
<p>{event.startDate} - {event.endDate}</p>
|
|
) : (
|
|
<p>{event.startDate}</p>
|
|
) }
|
|
</div>
|
|
<div class="mt-3.5">
|
|
<UpcomingEvent
|
|
client:load
|
|
event={{
|
|
title: event.title,
|
|
description: markdownToHtml(event.description),
|
|
startDate: event.startDate,
|
|
endDate: event.endDate
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)) }
|
|
</div>
|
|
</div>
|