itsfinniii/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Upcoming Event

Browse Source
This commit is contained in:
itsfinniii
2026-03-20 22:29:21 +01:00
parent fac720c4a1
commit eb5f4efd40
3 changed files with 55 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
astro/src/components/web/UpcomingEvents.astro
View File

@@ -1,6 +1,7 @@
---
import CalendarIcon from '@/icons/CalendarIcon.astro';
import { Image } from 'astro:assets';
import { upcomingEvent as UpcomingEvent } from './subcomponents/UpcomingEvent';
interface Props {
upcomingEvents: UpcomingEventsComponent;
@@ -24,7 +25,7 @@ const upcomingEvents = Astro.props.upcomingEvents;
alt=""
/>
</div>
<div class="flex flex-col gap-1.5 lg:w-[40%] w-full">
<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} />
@@ -34,6 +35,9 @@ const upcomingEvents = Astro.props.upcomingEvents;
<p>{event.startDate}</p>
) }
</div>
<div class="mt-3.5">
<UpcomingEvent event={event} client:load />
</div>
</div>
</div>
)) }

45
astro/src/components/web/subcomponents/UpcomingEvent.tsx Normal file
View File

@@ -0,0 +1,45 @@
import { CalendarIcon } from "@/icons/jsx/calendarIcon";
import { useEffect, useState } from "preact/hooks"
export function upcomingEvent(props: { event: UpcomingEvent }) {
const [ isOpen, setIsOpen ] = useState<boolean>(false);
useEffect(() => {
console.log(isOpen);
}, [ isOpen ])
return (
<div>
<div className="hover:cursor-pointer text-indigo-400 underline" onClick={() => setIsOpen(true)}>{"Read more >>"}</div>
{ isOpen && (
<div
onClick={() => setIsOpen(false)}
className="fixed inset-0 flex items-center justify-center bg-[#000000bb] shadow-md z-999999999999"
>
<div
onClick={(e) => e.stopPropagation()}
className="relative bg-white rounded-2xl shadow-xl max-w-md w-full p-6 animate-in fade-in zoom-in-95"
>
<div className="flex flex-col gap-1.5">
<h4 className="text-2xl font-semibold">{props.event.title}</h4>
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
<CalendarIcon width={24} height={24} />
{ props.event.endDate !== null ? (
<p>{props.event.startDate} - {props.event.endDate}</p>
) : (
<p>{props.event.startDate}</p>
) }
</div>
<div className="mt-3">
{ props.event.description }
</div>
</div>
</div>
</div>
) }
</div>
)
}

5
astro/src/icons/jsx/calendarIcon.tsx Normal file
View File

@@ -0,0 +1,5 @@
export function CalendarIcon(props: { width?: number, height?: number }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={props.width ?? "24"} height={props.height ?? "24"} viewBox="0 0 512 512"><rect width="416" height="384" x="48" y="80" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" rx="48"/><circle cx="296" cy="232" r="24" fill="currentColor"/><circle cx="376" cy="232" r="24" fill="currentColor"/><circle cx="296" cy="312" r="24" fill="currentColor"/><circle cx="376" cy="312" r="24" fill="currentColor"/><circle cx="136" cy="312" r="24" fill="currentColor"/><circle cx="216" cy="312" r="24" fill="currentColor"/><circle cx="136" cy="392" r="24" fill="currentColor"/><circle cx="216" cy="392" r="24" fill="currentColor"/><circle cx="296" cy="392" r="24" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M128 48v32m256-32v32"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M464 160H48"/></svg>
)
}