first commit
This commit is contained in:
54
components/explorer/CategoryList.tsx
Normal file
54
components/explorer/CategoryList.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Waves, Utensils, ShoppingBag, Activity } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface Category {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
}
|
||||
|
||||
const categories: Category[] = [
|
||||
{ id: "all", name: "Tout", icon: Activity },
|
||||
{ id: "plages", name: "Plages", icon: Waves },
|
||||
{ id: "restaurants", name: "Restaurants / Roulottes", icon: Utensils },
|
||||
{ id: "epiceries", name: "Epiceries", icon: ShoppingBag },
|
||||
{ id: "activites", name: "Activités", icon: Activity },
|
||||
];
|
||||
|
||||
interface CategoryListProps {
|
||||
selectedCategory: string;
|
||||
onCategoryChange: (categoryId: string) => void;
|
||||
}
|
||||
|
||||
export default function CategoryList({
|
||||
selectedCategory,
|
||||
onCategoryChange,
|
||||
}: CategoryListProps) {
|
||||
return (
|
||||
<div className="flex gap-3 overflow-x-auto pb-2 px-4 scrollbar-hide">
|
||||
{categories.map((category) => {
|
||||
const Icon = category.icon;
|
||||
const isSelected = selectedCategory === category.id;
|
||||
return (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => onCategoryChange(category.id)}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-4 py-2 rounded-xl whitespace-nowrap transition-colors",
|
||||
isSelected
|
||||
? "bg-primary text-white"
|
||||
: "bg-white text-gray-700 border border-gray-200 hover:bg-secondary"
|
||||
)}
|
||||
>
|
||||
<Icon className="h-5 w-5" />
|
||||
<span className="font-medium">{category.name}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
94
components/explorer/PlaceCard.tsx
Normal file
94
components/explorer/PlaceCard.tsx
Normal file
@ -0,0 +1,94 @@
|
||||
"use client";
|
||||
|
||||
import { MapPin, ExternalLink } from "lucide-react";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Place } from "@/app/api/places/route";
|
||||
|
||||
interface PlaceCardProps {
|
||||
place: Place;
|
||||
}
|
||||
|
||||
export default function PlaceCard({ place }: PlaceCardProps) {
|
||||
const handleOpenMaps = () => {
|
||||
let url: string;
|
||||
if (place.gmapLink && place.gmapLink !== "LIEN_GOOGLE_MAPS_A_INSERER") {
|
||||
url = place.gmapLink;
|
||||
} else {
|
||||
url = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(place.location.address)}`;
|
||||
}
|
||||
window.open(url, "_blank");
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="overflow-hidden">
|
||||
<div className="relative h-48 bg-gradient-to-br from-primary/20 to-secondary">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<MapPin className="h-16 w-16 text-primary/30" />
|
||||
</div>
|
||||
</div>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1">
|
||||
<CardTitle>{place.name}</CardTitle>
|
||||
{place.type && (
|
||||
<p className="text-sm text-gray-500 mt-1">{place.type}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-gray-700 leading-relaxed">{place.description}</p>
|
||||
|
||||
{place.keywords && place.keywords.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{place.keywords.map((keyword, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="px-2 py-1 bg-secondary text-primary text-xs font-medium rounded-lg"
|
||||
>
|
||||
{keyword}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<MapPin className="h-4 w-4" />
|
||||
<span>{place.location.address}</span>
|
||||
</div>
|
||||
{place.contact && (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<span className="font-medium">Contact:</span>
|
||||
<a
|
||||
href={`tel:${place.contact.replace(/\s/g, "")}`}
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
{place.contact}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{place.horaires && (
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-xl p-3">
|
||||
<p className="text-xs font-semibold text-blue-900 mb-1">Horaires</p>
|
||||
<p className="text-sm text-blue-800">{place.horaires}</p>
|
||||
</div>
|
||||
)}
|
||||
{place.conseil && (
|
||||
<div className="bg-secondary border border-primary/20 rounded-xl p-3">
|
||||
<p className="text-xs font-semibold text-primary mb-1">💡 Conseil pratique</p>
|
||||
<p className="text-sm text-gray-700">{place.conseil}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button onClick={handleOpenMaps} className="w-full" variant="outline">
|
||||
<ExternalLink className="mr-2 h-4 w-4" />
|
||||
Y aller
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
58
components/explorer/PlaceList.tsx
Normal file
58
components/explorer/PlaceList.tsx
Normal file
@ -0,0 +1,58 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import PlaceCard from "./PlaceCard";
|
||||
import { Place } from "@/app/api/places/route";
|
||||
|
||||
interface PlaceListProps {
|
||||
category: string;
|
||||
}
|
||||
|
||||
export default function PlaceList({ category }: PlaceListProps) {
|
||||
const [places, setPlaces] = useState<Place[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPlaces = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/places${category !== "all" ? `?category=${category}` : ""}`
|
||||
);
|
||||
const data = await response.json();
|
||||
setPlaces(data);
|
||||
} catch (error) {
|
||||
console.error("Erreur lors du chargement des lieux:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchPlaces();
|
||||
}, [category]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<p className="text-gray-600">Chargement...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (places.length === 0) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<p className="text-gray-600">Aucun lieu trouvé dans cette catégorie.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 px-4 pb-6">
|
||||
{places.map((place) => (
|
||||
<PlaceCard key={place.id} place={place} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user