67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
import React from 'react';
|
||
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.',
|
||
};
|
||
|
||
|
||
|
||
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>
|
||
|
||
{/* Map placeholder — interactive Leaflet map requires client component */}
|
||
<div className="relative rounded-3xl overflow-hidden bg-surfaceGreen border border-white/5 shadow-2xl" style={{ height: 600 }}>
|
||
<div className="absolute inset-0 flex flex-col items-center justify-center gap-6 text-stone-500">
|
||
<div className="text-8xl">🗺️</div>
|
||
<div className="text-center space-y-2">
|
||
<p className="text-xl font-bold text-stone-300">Interactive Burrow Map</p>
|
||
<p className="text-sm">
|
||
Leaflet map with burrow markers loading from{' '}
|
||
<code className="text-teal text-xs bg-black/30 px-2 py-0.5 rounded">/api/burrows</code>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
{/* Decorative grid pattern */}
|
||
<div
|
||
className="absolute inset-0 opacity-5"
|
||
style={{
|
||
backgroundImage:
|
||
'linear-gradient(rgba(0,130,167,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(0,130,167,0.5) 1px, transparent 1px)',
|
||
backgroundSize: '40px 40px',
|
||
}}
|
||
/>
|
||
</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>
|
||
);
|
||
}
|