57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import dynamic from 'next/dynamic';
|
|
import { Map } from 'lucide-react';
|
|
|
|
import type { Metadata } from 'next';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Burrow Map',
|
|
description: 'Interactive map of burrowing owl burrows in Cape Coral, Florida.',
|
|
};
|
|
|
|
const BurrowMap = dynamic(() => import('./BurrowMap'), {
|
|
ssr: false,
|
|
loading: () => (
|
|
<div className="w-full h-full flex items-center justify-center text-stone-500">
|
|
<div className="animate-spin w-8 h-8 border-2 border-teal border-t-transparent rounded-full" />
|
|
</div>
|
|
),
|
|
});
|
|
|
|
export default function MapPage() {
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-6 py-16 space-y-10">
|
|
<header className="space-y-4">
|
|
<div className="flex items-center gap-2 text-teal text-sm font-bold uppercase tracking-widest">
|
|
<Map size={16} /> Burrow Map
|
|
</div>
|
|
<h1 className="text-4xl font-black text-white">Burrowing Owl Locations</h1>
|
|
<p className="text-stone-400 text-lg max-w-2xl leading-relaxed">
|
|
An interactive map of active burrowing owl burrows monitored by CCFW volunteers across Cape Coral.
|
|
</p>
|
|
</header>
|
|
|
|
{/* Interactive Leaflet Map */}
|
|
<div className="relative rounded-3xl overflow-hidden bg-surfaceGreen border border-white/5 shadow-2xl" style={{ height: 600 }}>
|
|
<BurrowMap />
|
|
</div>
|
|
|
|
{/* Legend */}
|
|
<div className="flex flex-wrap gap-6 px-4 text-sm text-stone-400">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-teal shadow-[0_0_8px_rgba(0,130,167,0.8)]" />
|
|
Active burrow
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-stone-600" />
|
|
Inactive burrow
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-gold" />
|
|
Camera location
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|