70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { Calendar } from 'lucide-react';
|
|
import { api, Event } from '@/lib/api';
|
|
import EventCard from '../components/EventCard';
|
|
|
|
const FALLBACK_EVENTS: Event[] = [
|
|
{
|
|
id: '1',
|
|
title: 'Burrowing Owl Survey Walk',
|
|
date: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toISOString(),
|
|
location: 'Rotary Park, Cape Coral',
|
|
description: 'Join CCFW volunteers for our monthly owl survey. Learn to identify burrows and record sighting data. All skill levels welcome.',
|
|
rsvpCount: 14,
|
|
capacity: 25,
|
|
},
|
|
{
|
|
id: '2',
|
|
title: 'Habitat Restoration Day',
|
|
date: new Date(Date.now() + 10 * 24 * 60 * 60 * 1000).toISOString(),
|
|
location: 'Four Mile Cove, Cape Coral',
|
|
description: 'Help us plant native vegetation to restore burrowing owl habitat. Gloves and tools provided. Bring water and sunscreen.',
|
|
rsvpCount: 8,
|
|
capacity: 20,
|
|
},
|
|
{
|
|
id: '3',
|
|
title: 'Community Wildlife Photography Workshop',
|
|
date: new Date(Date.now() + 17 * 24 * 60 * 60 * 1000).toISOString(),
|
|
location: 'CCFW Conservation Center',
|
|
description: 'Professional wildlife photographer workshop covering camera settings, ethics of wildlife photography, and best spots in Cape Coral.',
|
|
rsvpCount: 22,
|
|
capacity: 30,
|
|
},
|
|
];
|
|
|
|
async function getEvents(): Promise<Event[]> {
|
|
try { return await api.getEvents(); }
|
|
catch { return FALLBACK_EVENTS; }
|
|
}
|
|
|
|
export default async function EventsPage() {
|
|
const events = await getEvents();
|
|
|
|
return (
|
|
<div className="max-w-5xl mx-auto px-6 py-16 space-y-14">
|
|
<header className="space-y-4">
|
|
<div className="flex items-center gap-2 text-teal text-sm font-bold uppercase tracking-widest">
|
|
<Calendar size={16} /> Upcoming
|
|
</div>
|
|
<h1 className="text-4xl font-black text-white">CCFW Events</h1>
|
|
<p className="text-stone-400 text-lg max-w-2xl leading-relaxed">
|
|
Get involved! CCFW hosts regular surveys, restoration days, and educational events for the Cape Coral community.
|
|
</p>
|
|
</header>
|
|
|
|
<div className="space-y-5">
|
|
{events.length === 0 ? (
|
|
<div className="flex flex-col items-center py-24 gap-4 text-stone-500">
|
|
<Calendar size={48} className="text-stone-600" />
|
|
<p className="text-lg font-semibold">No upcoming events</p>
|
|
<p className="text-sm">Check back soon or follow us on social media.</p>
|
|
</div>
|
|
) : (
|
|
events.map((e) => <EventCard key={e.id} event={e} />)
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|