Events

1// Events listing page — category menu + grid + empty state + load more. Thin view over
2// useEventsList (all logic lives in the hook). Styled with base44 design tokens (shadcn Tailwind classes).
3import { useEventsList } from "@/hooks/useEventsList";
4import CategoryFilter from "@/components/CategoryFilter";
5import EventGrid from "@/components/EventGrid";
6
7export default function Events() {
8  const { events, categories, active, setActive, total, loading, hasMore, loadMore } = useEventsList();
9
10  return (
11    <main className="max-w-[1200px] mx-auto p-4">
12      <h1 className="font-display mb-4">Events</h1>
13
14      {total === 0 ? (
15        <p className="text-muted-foreground p-4 text-center">
16          No events published yet — add and publish events from your Wix dashboard.
17        </p>
18      ) : (
19        <>
20          <CategoryFilter categories={categories} active={active} onSelect={setActive} />
21          {loading
22            ? <p className="text-muted-foreground">Loading…</p>
23            : <EventGrid events={events} empty="No events in this category yet." />}
24          {hasMore && (
25            <div className="text-center mt-6">
26              <button onClick={loadMore}
27                className="py-2.5 px-6 cursor-pointer text-[15px] font-semibold bg-card text-foreground border border-border rounded-sm">
28                Load more
29              </button>
30            </div>
31          )}
32        </>
33      )}
34    </main>
35  );
36}