99 lines
3.9 KiB
TypeScript
99 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import { Eye, MapPin, CheckCircle, Clock } from 'lucide-react';
|
|
import { api, Sighting } from '@/lib/api';
|
|
import { format } from 'date-fns';
|
|
import type { Metadata } from 'next';
|
|
import ReportForm from './ReportForm';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Wildlife Sightings',
|
|
description: 'Browse recent wildlife sightings and report your own in Cape Coral.',
|
|
};
|
|
|
|
const SPECIES_EMOJI: Record<string, string> = {
|
|
'Burrowing Owl': '🦉',
|
|
'Gopher Tortoise': '🐢',
|
|
'Roseate Spoonbill': '🦩',
|
|
'Scrub-Jay': '🐦',
|
|
'Manatee': '🐋',
|
|
};
|
|
|
|
async function getSightings(): Promise<Sighting[]> {
|
|
try { return await api.getSightings(); }
|
|
catch { return []; }
|
|
}
|
|
|
|
export default async function SightingsPage() {
|
|
const sightings = await getSightings();
|
|
|
|
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">
|
|
<Eye size={16} /> Community Science
|
|
</div>
|
|
<h1 className="text-4xl font-black text-white">Wildlife Sightings</h1>
|
|
<p className="text-stone-400 text-lg max-w-2xl leading-relaxed">
|
|
Help us track Cape Coral's wildlife. Report what you see — every sighting helps conservation efforts.
|
|
</p>
|
|
</header>
|
|
|
|
{/* Report Form */}
|
|
<ReportForm />
|
|
|
|
{/* Recent Sightings */}
|
|
<section className="space-y-6">
|
|
<h2 className="text-2xl font-bold text-white">Recent Sightings</h2>
|
|
{sightings.length === 0 ? (
|
|
<div className="flex flex-col items-center py-16 gap-4 text-stone-500">
|
|
<Eye size={48} className="text-stone-600" />
|
|
<p className="text-lg font-semibold">No sightings yet</p>
|
|
<p className="text-sm">Be the first to report a wildlife sighting!</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-4">
|
|
{sightings.map((s) => (
|
|
<div key={s.id} className="bg-surfaceGreen border border-white/5 rounded-2xl p-5 hover:border-teal/20 transition-all flex gap-5">
|
|
{/* Species icon */}
|
|
<div className="shrink-0 w-14 h-14 rounded-xl bg-teal/10 border border-teal/20 flex items-center justify-center text-2xl">
|
|
{SPECIES_EMOJI[s.species] || '🦎'}
|
|
</div>
|
|
|
|
<div className="flex-1 space-y-2">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h3 className="font-bold text-white text-lg">{s.species}</h3>
|
|
<p className="text-sm text-stone-400 flex items-center gap-1.5">
|
|
<MapPin size={12} />
|
|
{s.gps_lat.toFixed(4)}°N, {Math.abs(s.gps_lng).toFixed(4)}°W
|
|
</p>
|
|
</div>
|
|
{s.verified ? (
|
|
<span className="flex items-center gap-1 text-xs font-bold text-emerald-400 bg-emerald-500/10 px-2.5 py-1 rounded-full">
|
|
<CheckCircle size={12} /> Verified
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center gap-1 text-xs font-bold text-amber-400 bg-amber-500/10 px-2.5 py-1 rounded-full">
|
|
<Clock size={12} /> Pending
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{s.description && (
|
|
<p className="text-sm text-stone-400 leading-relaxed">{s.description}</p>
|
|
)}
|
|
|
|
<div className="flex items-center gap-4 text-xs text-stone-500">
|
|
{s.reporter && <span>Reported by {s.reporter.name}</span>}
|
|
<span>{format(new Date(s.created_at), 'MMM d, yyyy')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|