73 lines
2.8 KiB
TypeScript
73 lines
2.8 KiB
TypeScript
"use client";
|
||
|
||
import dynamic from 'next/dynamic';
|
||
|
||
// Import dynamique pour éviter les erreurs SSR avec Leaflet
|
||
const PortRouteMap = dynamic(() => import('@/components/PortRouteMap'), {
|
||
ssr: false,
|
||
loading: () => (
|
||
<div className="h-96 bg-gray-100 rounded-lg flex items-center justify-center">
|
||
<div className="text-center">
|
||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
||
<p className="text-gray-600">Chargement de la carte...</p>
|
||
</div>
|
||
</div>
|
||
),
|
||
});
|
||
|
||
export default function DemoPage() {
|
||
const portA = { lat: 43.2965, lng: 5.3698 }; // Marseille
|
||
const portB = { lat: 41.3851, lng: 2.1734 }; // Barcelone
|
||
|
||
return (
|
||
<div className="w-full min-h-screen p-8 bg-gray-50">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="mb-8">
|
||
<h1 className="text-3xl font-bold text-gray-900 mb-2">Démo Carte Maritime</h1>
|
||
<p className="text-gray-600">
|
||
Visualisation de la route entre Marseille et Barcelone
|
||
</p>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
|
||
<div className="bg-blue-600 px-6 py-4">
|
||
<h2 className="text-white text-lg font-semibold">
|
||
Route: Port de Marseille → Port de Barcelone
|
||
</h2>
|
||
<p className="text-blue-100 text-sm mt-1">
|
||
Distance approximative: ~350 km par la mer
|
||
</p>
|
||
</div>
|
||
|
||
<PortRouteMap portA={portA} portB={portB} height="600px" />
|
||
|
||
<div className="px-6 py-4 bg-gray-50 border-t">
|
||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||
<div>
|
||
<h3 className="font-semibold text-gray-900 mb-2">📍 Port d'origine</h3>
|
||
<p className="text-gray-600">Marseille, France</p>
|
||
<p className="text-gray-500 text-xs">Lat: {portA.lat}, Lng: {portA.lng}</p>
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-gray-900 mb-2">📍 Port de destination</h3>
|
||
<p className="text-gray-600">Barcelone, Espagne</p>
|
||
<p className="text-gray-500 text-xs">Lat: {portB.lat}, Lng: {portB.lng}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||
<h3 className="text-blue-900 font-semibold mb-2">ℹ️ Informations</h3>
|
||
<ul className="text-blue-800 text-sm space-y-1">
|
||
<li>• Carte interactive OpenStreetMap</li>
|
||
<li>• Marqueurs positionnés sur les ports</li>
|
||
<li>• Ligne bleue représentant la route maritime</li>
|
||
<li>• Zoom et navigation disponibles</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|