46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
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>
|
|
)
|
|
}
|