NGU-Web/src/pages/sections/home/CalendarBand.tsx
Zaldimmar 2e125b4629 Add a reusable event calendar and put it on the front page
EventCalendar shows events on a month grid or as a list of the
month. Multi-day events are lane-packed bars that break at week
edges, series events appear on every meeting with their time, and
clicking a day lists everything on it. Phones get the list. Visitors
can narrow by scope, type, online only and search, all starting at
"all"; a page can pin section, host or type through props, which
hides that control.

Migration 019 rebuilds front_page_sections to allow a 'calendar'
band and slots it in after the retreats carousel, so it can be
reordered, retitled or hidden from the Front page editor.

useEvents drops its empty fallback so a failed request surfaces as
an error rather than an empty list, and returns the scope list
alongside the events for the calendar's scope filter.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-25 06:28:42 -05:00

28 lines
1.3 KiB
TypeScript

/* ═══════════════════════════════════════════════════════════════
CALENDAR BAND
EventCalendar on the front page: every scope and every type, all
four visitor filters, starting on this month. The same component
can go on any page with a narrower filter — a region's page would
pass host, a classes page would pass type — and this file only
adds the front page's heading around it.
═══════════════════════════════════════════════════════════════ */
import EventCalendar from '../EventCalendar.tsx'
type CalendarBandProps = { id: string; title: string; blurb?: string | null }
export default function CalendarBand({ id, title, blurb }: CalendarBandProps) {
return (
<section id={id} className="py-24" style={{ background: '#f6fbfc' }}>
<div className="mx-auto mb-10 max-w-6xl px-6">
<h2 className="font-display text-4xl font-extrabold text-[#073d4a] md:text-5xl">
{title}
</h2>
{blurb && <p className="mt-3 max-w-xl text-lg text-[#4a6b72]">{blurb}</p>}
</div>
<EventCalendar />
</section>
)
}