Animate the Upcoming Event component

astro/src/components/web/UpcomingEvents.astro

@@ -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>
         )) }

astro/src/components/web/subcomponents/UpcomingEvent.tsx

@@ -0,0 +1,52 @@
+import { CalendarIcon } from "@/icons/jsx/calendarIcon";
+import { useEffect, useState } from "preact/hooks"
+
+export function upcomingEvent(props: { event: UpcomingEvent }) {
+    const [ isOpen, setIsOpen ] = useState<boolean>(false);
+    const [ isVisible, setIsVisible ] = useState<boolean>(false);
+
+    const open = () => {
+        setIsOpen(true);
+        setTimeout(() => setIsVisible(true), 10); // allow DOM mount
+    };
+
+    const close = () => {
+        setIsVisible(false);
+        setTimeout(() => setIsOpen(false), 200); // match animation duration
+    };
+
+    return (
+        <div>
+            <div className="hover:cursor-pointer text-indigo-400 underline" onClick={open}>{"Read more >>"}</div>
+
+            { isOpen && (
+                <div
+                    onClick={close}
+                    className={`fixed inset-0 flex items-center justify-center bg-[#000000bb] shadow-md z-999999999999 duration-200 ${isVisible ? "opacity-100" : "opacity-0"}`}
+                >
+                    <div
+                        onClick={(e) => e.stopPropagation()}
+                        className={`relative bg-white rounded-2xl shadow-xl max-w-md w-full p-6 transition-all duration-200 ${isVisible ? "opacity-100 scale-100" : "opacity-0 scale-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>
+    )
+}

astro/src/icons/jsx/calendarIcon.tsx

@@ -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>
+    )
+}