Ajout d'images pour les cartes de lieux (restaurants, plages, épiceries)

- Téléchargement d'images depuis Unsplash
- Images stockées dans public/images/
- Mise à jour de places.json avec chemins locaux
- Composant PlaceCard affiche maintenant les images dans l'en-tête
- Fallback automatique vers placeholder si image manquante
This commit is contained in:
2025-11-23 19:52:37 +01:00
parent fa4ef6320a
commit 908bf5f0c2
22 changed files with 27 additions and 14 deletions

View File

@ -1,5 +1,6 @@
"use client"; "use client";
import { useState } from "react";
import { MapPin, ExternalLink } from "lucide-react"; import { MapPin, ExternalLink } from "lucide-react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"; import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -10,6 +11,9 @@ interface PlaceCardProps {
} }
export default function PlaceCard({ place }: PlaceCardProps) { export default function PlaceCard({ place }: PlaceCardProps) {
const [imageError, setImageError] = useState(false);
const hasValidImage = place.image && place.image !== "";
const handleOpenMaps = () => { const handleOpenMaps = () => {
let url: string; let url: string;
if (place.gmapLink && place.gmapLink !== "LIEN_GOOGLE_MAPS_A_INSERER") { if (place.gmapLink && place.gmapLink !== "LIEN_GOOGLE_MAPS_A_INSERER") {
@ -22,10 +26,19 @@ export default function PlaceCard({ place }: PlaceCardProps) {
return ( return (
<Card className="overflow-hidden"> <Card className="overflow-hidden">
<div className="relative h-48 bg-gradient-to-br from-primary/20 to-secondary"> <div className="relative h-48 bg-gradient-to-br from-primary/20 to-secondary overflow-hidden">
<div className="absolute inset-0 flex items-center justify-center"> {hasValidImage && !imageError ? (
<MapPin className="h-16 w-16 text-primary/30" /> <img
</div> src={place.image}
alt={place.name}
className="w-full h-full object-cover"
onError={() => setImageError(true)}
/>
) : (
<div className="absolute inset-0 flex items-center justify-center">
<MapPin className="h-16 w-16 text-primary/30" />
</div>
)}
</div> </div>
<CardHeader> <CardHeader>
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">

View File

@ -7,7 +7,7 @@
"description": "LE lieu pour déjeuner les pieds dans l'eau. Poisson cru légendaire. Le cadre est inoubliable.", "description": "LE lieu pour déjeuner les pieds dans l'eau. Poisson cru légendaire. Le cadre est inoubliable.",
"keywords": ["Lagon", "Poisson Cru", "Ambiance", "Incontournable"], "keywords": ["Lagon", "Poisson Cru", "Ambiance", "Incontournable"],
"contact": "+689 40 93 40 15", "contact": "+689 40 93 40 15",
"image": "/placeholder-restaurant.jpg", "image": "/images/restaurant-lagon.jpg",
"location": { "location": {
"lat": -16.3167, "lat": -16.3167,
"lng": -145.6167, "lng": -145.6167,
@ -23,7 +23,7 @@
"description": "Super vue sur le lagon, parfait pour un déjeuner simple et bon. Leur Fish Burger est très apprécié.", "description": "Super vue sur le lagon, parfait pour un déjeuner simple et bon. Leur Fish Burger est très apprécié.",
"keywords": ["Décontracté", "Vue", "Fish Burger", "Poisson Grillé"], "keywords": ["Décontracté", "Vue", "Fish Burger", "Poisson Grillé"],
"contact": "+689 40 98 43 97", "contact": "+689 40 98 43 97",
"image": "/placeholder-restaurant.jpg", "image": "/images/restaurant-snack.jpg",
"location": { "location": {
"lat": -16.3177, "lat": -16.3177,
"lng": -145.6177, "lng": -145.6177,
@ -38,7 +38,7 @@
"type": "Plage", "type": "Plage",
"description": "La plage la plus photogénique du Nord de Fakarava. Vous y trouverez le célèbre cocotier penché, parfait pour une photo \"carte postale\". Idéal pour le farniente et la baignade tranquille.", "description": "La plage la plus photogénique du Nord de Fakarava. Vous y trouverez le célèbre cocotier penché, parfait pour une photo \"carte postale\". Idéal pour le farniente et la baignade tranquille.",
"keywords": ["Photogénique", "Cocotier", "Baignade", "Farniente"], "keywords": ["Photogénique", "Cocotier", "Baignade", "Farniente"],
"image": "/placeholder-beach.jpg", "image": "/images/plage-cocotier.jpg",
"location": { "location": {
"lat": -16.3187, "lat": -16.3187,
"lng": -145.6187, "lng": -145.6187,
@ -54,7 +54,7 @@
"type": "Point de vue", "type": "Point de vue",
"description": "Un peu plus loin après le PK 9, le phare n'est pas une plage en soi, mais le lieu offre une vue unique sur l'Océan Pacifique (côté \"océan\" et non lagon). Ambiance de \"bout du monde\".", "description": "Un peu plus loin après le PK 9, le phare n'est pas une plage en soi, mais le lieu offre une vue unique sur l'Océan Pacifique (côté \"océan\" et non lagon). Ambiance de \"bout du monde\".",
"keywords": ["Phare", "Vue panoramique", "Océan", "Point de vue"], "keywords": ["Phare", "Vue panoramique", "Océan", "Point de vue"],
"image": "/placeholder-beach.jpg", "image": "/images/plage-phare.jpg",
"location": { "location": {
"lat": -16.3197, "lat": -16.3197,
"lng": -145.6197, "lng": -145.6197,
@ -70,7 +70,7 @@
"type": "Spot de snorkeling", "type": "Spot de snorkeling",
"description": "L'une des plus grandes passes de Polynésie. On n'y va pas pour la plage, mais pour l'activité de snorkeling en dérivante qui y est spectaculaire (à faire avec un club). Le paysage est impressionnant.", "description": "L'une des plus grandes passes de Polynésie. On n'y va pas pour la plage, mais pour l'activité de snorkeling en dérivante qui y est spectaculaire (à faire avec un club). Le paysage est impressionnant.",
"keywords": ["Passe", "Snorkeling", "Dérivante", "Spectaculaire"], "keywords": ["Passe", "Snorkeling", "Dérivante", "Spectaculaire"],
"image": "/placeholder-beach.jpg", "image": "/images/plage-snorkeling.jpg",
"location": { "location": {
"lat": -16.3207, "lat": -16.3207,
"lng": -145.6207, "lng": -145.6207,
@ -86,7 +86,7 @@
"type": "Plage exceptionnelle", "type": "Plage exceptionnelle",
"description": "L'excursion la plus célèbre de Fakarava. Il s'agit d'une plage unique de sable aux nuances rosées, à la pointe Sud de l'atoll.", "description": "L'excursion la plus célèbre de Fakarava. Il s'agit d'une plage unique de sable aux nuances rosées, à la pointe Sud de l'atoll.",
"keywords": ["Sable rose", "Exceptionnel", "Passe Sud", "Excursion"], "keywords": ["Sable rose", "Exceptionnel", "Passe Sud", "Excursion"],
"image": "/placeholder-beach.jpg", "image": "/images/plage-sable-rose.jpg",
"location": { "location": {
"lat": -16.3217, "lat": -16.3217,
"lng": -145.6217, "lng": -145.6217,
@ -102,7 +102,7 @@
"type": "Plage privée", "type": "Plage privée",
"description": "N'hésitez pas à mettre en avant votre propre plage et ponton ! Idéal pour un snorkeling facile et sécurisé.", "description": "N'hésitez pas à mettre en avant votre propre plage et ponton ! Idéal pour un snorkeling facile et sécurisé.",
"keywords": ["Plage privée", "Ponton", "Snorkeling", "Sécurisé"], "keywords": ["Plage privée", "Ponton", "Snorkeling", "Sécurisé"],
"image": "/placeholder-beach.jpg", "image": "/images/plage-pension.jpg",
"location": { "location": {
"lat": -16.3227, "lat": -16.3227,
"lng": -145.6227, "lng": -145.6227,
@ -118,7 +118,7 @@
"type": "Épicerie principale", "type": "Épicerie principale",
"description": "L'épicerie principale du village, idéale pour le ravitaillement. Bien achalandée avec les produits essentiels.", "description": "L'épicerie principale du village, idéale pour le ravitaillement. Bien achalandée avec les produits essentiels.",
"keywords": ["Épicerie", "Ravitaillement", "Village", "Principal"], "keywords": ["Épicerie", "Ravitaillement", "Village", "Principal"],
"image": "/placeholder-store.jpg", "image": "/images/epicerie-principale.jpg",
"location": { "location": {
"lat": -16.3237, "lat": -16.3237,
"lng": -145.6237, "lng": -145.6237,
@ -135,7 +135,7 @@
"type": "Snack / Dépannage", "type": "Snack / Dépannage",
"description": "Souvent mentionné pour sa cuisine, il est aussi un point de vente pour quelques nécessités.", "description": "Souvent mentionné pour sa cuisine, il est aussi un point de vente pour quelques nécessités.",
"keywords": ["Snack", "Dépannage", "Cuisine", "Nécessités"], "keywords": ["Snack", "Dépannage", "Cuisine", "Nécessités"],
"image": "/placeholder-store.jpg", "image": "/images/epicerie-snack.jpg",
"location": { "location": {
"lat": -16.3247, "lat": -16.3247,
"lng": -145.6247, "lng": -145.6247,
@ -152,7 +152,7 @@
"type": "Épiceries locales", "type": "Épiceries locales",
"description": "Les autres magasins sont plus petits et moins achalandés, mais pratiques si vous êtes loin du centre.", "description": "Les autres magasins sont plus petits et moins achalandés, mais pratiques si vous êtes loin du centre.",
"keywords": ["Petites épiceries", "Locales", "Dépannage"], "keywords": ["Petites épiceries", "Locales", "Dépannage"],
"image": "/placeholder-store.jpg", "image": "/images/epicerie-locale.jpg",
"location": { "location": {
"lat": -16.3257, "lat": -16.3257,
"lng": -145.6257, "lng": -145.6257,

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

BIN
public/images/plage-1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

BIN
public/images/plage-2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

BIN
public/images/plage-3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 193 KiB

BIN
public/images/plage-4.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

BIN
public/images/plage-5.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 193 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB