Merge pull request 'feat: carte catalogue + À propos' (#63) from feat/catalog-map-and-about into main

src/app/carbets/_components/catalog-map-inner.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useMemo } from "react";
+import Link from "next/link";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import L, { LatLngBoundsExpression } from "leaflet";
+
+import "leaflet/dist/leaflet.css";
+
+import type { CatalogMapPoint } from "./catalog-map";
+
+const ICON = L.divIcon({
+  className: "karbe-catalog-marker",
+  html: `
+    <div style="
+      width:28px;height:36px;
+      transform:translate(-50%,-100%);
+      display:flex;align-items:center;justify-content:center;
+    ">
+      <svg viewBox="0 0 32 40" width="28" height="36" xmlns="http://www.w3.org/2000/svg">
+        <path d="M16 0 C7 0 0 7 0 16 C0 26 16 40 16 40 C16 40 32 26 32 16 C32 7 25 0 16 0 Z"
+              fill="#059669" stroke="#064e3b" stroke-width="1.5"/>
+        <circle cx="16" cy="15" r="5" fill="white"/>
+      </svg>
+    </div>
+  `,
+  iconSize: [28, 36],
+  iconAnchor: [14, 36],
+  popupAnchor: [0, -32],
+});
+
+export function CatalogMapInner({ points }: { points: CatalogMapPoint[] }) {
+  const bounds = useMemo<LatLngBoundsExpression>(() => {
+    if (points.length === 0) {
+      // Centre par défaut sur la Guyane (Cayenne).
+      return [
+        [3.5, -54.5],
+        [5.5, -52.0],
+      ];
+    }
+    const lats = points.map((p) => p.latitude);
+    const lngs = points.map((p) => p.longitude);
+    const minLat = Math.min(...lats);
+    const maxLat = Math.max(...lats);
+    const minLng = Math.min(...lngs);
+    const maxLng = Math.max(...lngs);
+    // Padding 0.1°
+    return [
+      [minLat - 0.1, minLng - 0.1],
+      [maxLat + 0.1, maxLng + 0.1],
+    ];
+  }, [points]);
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-zinc-200">
+      <MapContainer
+        bounds={bounds}
+        scrollWheelZoom={false}
+        style={{ height: 360, width: "100%" }}
+      >
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        {points.map((p) => (
+          <Marker key={p.id} position={[p.latitude, p.longitude]} icon={ICON}>
+            <Popup>
+              <div style={{ minWidth: 180 }}>
+                {p.coverUrl ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={p.coverUrl}
+                    alt={p.title}
+                    style={{
+                      width: "100%",
+                      height: 110,
+                      objectFit: "cover",
+                      borderRadius: 4,
+                      marginBottom: 6,
+                    }}
+                  />
+                ) : null}
+                <strong>{p.title}</strong>
+                <br />
+                <span style={{ fontSize: 11, color: "#71717a" }}>
+                  Fleuve {p.river}
+                </span>
+                <br />
+                <span style={{ fontSize: 13, fontWeight: 600 }}>
+                  {Number(p.nightlyPrice).toFixed(0)} €
+                </span>
+                <span style={{ fontSize: 11, color: "#71717a" }}> / nuit</span>
+                <br />
+                <Link
+                  href={`/carbets/${p.slug}`}
+                  style={{
+                    display: "inline-block",
+                    marginTop: 6,
+                    color: "#059669",
+                    fontWeight: 600,
+                    textDecoration: "underline",
+                  }}
+                >
+                  Voir la fiche →
+                </Link>
+              </div>
+            </Popup>
+          </Marker>
+        ))}
+      </MapContainer>
+    </div>
+  );
+}

src/app/carbets/_components/catalog-map.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const CatalogMapInner = dynamic(
+  () => import("./catalog-map-inner").then((m) => m.CatalogMapInner),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="h-[360px] w-full animate-pulse rounded-lg bg-zinc-100" />
+    ),
+  },
+);
+
+export type CatalogMapPoint = {
+  id: string;
+  slug: string;
+  title: string;
+  river: string;
+  nightlyPrice: string;
+  latitude: number;
+  longitude: number;
+  coverUrl: string | null;
+};
+
+export function CatalogMap({ points }: { points: CatalogMapPoint[] }) {
+  if (points.length === 0) return null;
+  return <CatalogMapInner points={points} />;
+}

src/app/carbets/page.tsx

@@ -8,6 +8,7 @@ import {
 } from "@/lib/carbet-search";
 
 import { CarbetCard } from "./_components/carbet-card";
+import { CatalogMap } from "./_components/catalog-map";
 import { SearchFilters } from "./_components/search-filters";
 
 export const metadata: Metadata = {
@@ -72,6 +73,20 @@ export default async function CarbetsSearchPage({
               {results.length} carbet{results.length > 1 ? "s" : ""} trouvé
               {results.length > 1 ? "s" : ""}.
             </p>
+            <div className="mb-6">
+              <CatalogMap
+                points={results.map((c) => ({
+                  id: c.id,
+                  slug: c.slug,
+                  title: c.title,
+                  river: c.river,
+                  nightlyPrice: c.nightlyPrice,
+                  latitude: c.latitude,
+                  longitude: c.longitude,
+                  coverUrl: c.coverUrl,
+                }))}
+              />
+            </div>
             <ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
               {results.map((carbet) => (
                 <li key={carbet.id}>

src/lib/carbet-search.ts

@@ -110,6 +110,9 @@ export type CarbetSearchResult = {
   mediaCount: number;
   reviewCount: number;
   averageRating: number | null;
+  nightlyPrice: string;
+  latitude: number;
+  longitude: number;
 };
 
 // Build the Prisma where-clause for a public carbet search. A carbet is only
@@ -179,6 +182,9 @@ export async function searchCarbets(
       maxStayNights: true,
       minCapacity: true,
       description: true,
+      nightlyPrice: true,
+      latitude: true,
+      longitude: true,
       media: {
         orderBy: { sortOrder: "asc" },
         take: 1,
@@ -213,6 +219,9 @@ export async function searchCarbets(
       mediaCount: carbet._count.media,
       reviewCount: stats.count,
       averageRating: stats.averageRating,
+      nightlyPrice: carbet.nightlyPrice.toString(),
+      latitude: Number(carbet.latitude),
+      longitude: Number(carbet.longitude),
     };
   });
 }