Add Upcoming Event

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

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