import { Head } from '@inertiajs/react'; import { Calendar, MapPin } from 'lucide-react'; import PortalLayout from '@/layouts/portal-layout'; interface Event { id: number; title: string; starts_at: string; ends_at: string | null; location: string | null; cover_url: string | null; } interface Registration { id: number; attended: boolean; event: Event; } function fmt(date: string) { return new Date(date).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }); } function EventCard({ event }: { event: Event }) { return (
{event.cover_url && (
{event.title}
)}

{event.title}

{fmt(event.starts_at)}{event.ends_at && event.ends_at !== event.starts_at ? ` – ${fmt(event.ends_at)}` : ''}
{event.location && (
{event.location}
)}
); } export default function Events({ registered, upcoming }: { registered: Registration[]; upcoming: Event[] }) { return ( <>

Events

Your registrations and upcoming ABEC events

{registered.length > 0 && (

My Registrations

{registered.map((r) => ( ))}
Event Date Attended
{r.event.title} {fmt(r.event.starts_at)} {r.attended ? Yes : —}
)}

Upcoming Events

{upcoming.length === 0 ? (

No upcoming events scheduled. Check back soon.

) : (
{upcoming.map((event) => )}
)}
); } Events.layout = (page: React.ReactNode) => {page};