[V0_FILE]typescriptreact:file="lib/types.ts" export interface Event { id: string title: string venue: string startTime: Date endTime: Date price: number image: string rating: number reviews: number distance: number tags: string[] isSafeForWomen?: boolean } export interface Category { id: string label: string emoji: string } [V0_FILE]typescriptreact:file="lib/data.ts" import type { Event, Category } from "./types" export const categories: Category[] = [ { id: "soirees", label: "Soirées", emoji: "🌙" }, { id: "musique", label: "Musique", emoji: "🎵" }, { id: "culture", label: "Culture", emoji: "🎭" }, { id: "expos", label: "Expos", emoji: "🖼️" }, { id: "marches", label: "Marchés", emoji: "🏪" }, ] export const events: Event[] = [ { id: "1", title: "Groveland, California", venue: "La machine du moulin rouge", startTime: new Date("2025-02-23T19:00:00"), endTime: new Date("2025-02-23T02:00:00"), price: 30, image: "https://images.unsplash.com/photo-1516450360452-9312f5e86fc7", rating: 4.91, reviews: 120, distance: 3.2, tags: ["Techno", "Safe for women"], isSafeForWomen: true, }, { id: "2", title: "Summer Night Festival", venue: "Parc des Expositions", startTime: new Date("2025-02-24T20:00:00"), endTime: new Date("2025-02-24T03:00:00"), price: 25, image: "https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3", rating: 4.85, reviews: 89, distance: 3.2, tags: ["Techno", "Festival"], }, { id: "3", title: "Electronic Dreams", venue: "Le Petit Bain", startTime: new Date("2025-02-25T22:00:00"), endTime: new Date("2025-02-25T05:00:00"), price: 20, image: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745", rating: 4.78, reviews: 156, distance: 3.2, tags: ["Techno", "Electronic"], }, ] [V0_FILE]typescriptreact:file="lib/format.ts" const DAYS = ["Dim.", "Lun.", "Mar.", "Mer.", "Jeu.", "Ven.", "Sam."] export function formatEventDate(start: Date, end: Date) { const day = DAYS[start.getDay()] const date = start.getDate() const startTime = start.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" }) const endTime = end.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" }) return `${day} ${date} | ${startTime} - ${endTime}` } [V0_FILE]typescriptreact:file="components/filters.tsx" "use client" import { useState } from "react" import { CalendarIcon, MapPin, PartyPopper, Music, Image, Presentation, Users, Compass, Hammer } from "lucide-react" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Input } from "@/components/ui/input" import { cn } from "@/lib/utils" // Map of category IDs to their respective icons const categoryIcons = { soiree: PartyPopper, musique: Music, expo: Image, conference: Presentation, famille: Users, tourisme: Compass, ateliers: Hammer, } as const const categories = [ { id: "soiree", label: "Soirée" }, { id: "musique", label: "Musique" }, { id: "expo", label: "Expo" }, { id: "conference", label: "Conférence" }, { id: "famille", label: "Famille" }, { id: "tourisme", label: "Tourisme" }, { id: "ateliers", label: "Ateliers" }, ] as const export function Filters() { const [date, setDate] = useState() const [selectedCategory, setSelectedCategory] = useState() return (

{/* Location and Date filters */}

{/* Category filters */}

{categories.map(({ id, label }) => { const Icon = categoryIcons[id as keyof typeof categoryIcons] return ( ) })}

) } [V0_FILE]typescriptreact:file="components/event-card.tsx" import Image from "next/image" import Link from "next/link" import { Heart } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import type { Event } from "@/lib/types" interface EventCardProps { event: Event } export function EventCard({ event }: EventCardProps) { const formatDate = (date: Date) => { const days = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"] return `${days[date.getDay()]}. ${date.getDate()} | ${date.getHours()}h - ${event.endTime.getHours()}h` } return ( {/* Image and Tags */}

{/* Heart Button */} {/* Tags and Distance */}

{event.tags.map((tag) => ( {tag} ))} {event.distance} km

{/* Content */}

{event.title}

★ {event.rating.toFixed(2)} ({event.reviews})

{event.venue}

{formatDate(event.startTime)} Dès {event.price}€

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Header } from "@/components/header" import { EventCard } from "@/components/event-card" import { events } from "@/lib/data" export default function Home() { return (

{events.map((event) => ( ))}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import type React from "react" // Import React const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Découvrez des événements près de chez vous", description: "Trouvez et réservez des événements locaux : soirées, concerts, expositions et plus encore.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/event/[id]/page.tsx" import Image from "next/image" import Link from "next/link" import { ChevronLeft, MapPin, Calendar, Heart, Share2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { events } from "@/lib/data" import { notFound } from "next/navigation" export default function EventPage({ params }: { params: { id: string } }) { const event = events.find((e) => e.id === params.id) if (!event) { notFound() } const formatDate = (date: Date) => { const days = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"] const months = [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre", ] return `${days[date.getDay()]} ${date.getDate()} ${months[date.getMonth()]}` } return (

{/* Header */}

{/* Event Image */}

{/* Event Details */}

{event.tags.map((tag) => ( {tag} ))}

{event.title}

★ {event.rating.toFixed(2)} ({event.reviews} avis)

{event.venue}

{event.distance} km

{formatDate(event.startTime)}

{event.startTime.getHours()}h - {event.endTime.getHours()}h

À propos

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

{/* Booking Button */}

À partir de

{event.price}€

) } [V0_FILE]typescriptreact:file="components/header.tsx" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { MapPin, Calendar, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Calendar as CalendarComponent } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { categories } from "@/lib/data" import { cn } from "@/lib/utils" import { format } from "date-fns" import { fr } from "date-fns/locale" export function Header() { const [selectedCategory, setSelectedCategory] = useState("soirees") const [location, setLocation] = useState("Entrez une adresse") const [date, setDate] = useState() const [address, setAddress] = useState("") const [isAddressOpen, setIsAddressOpen] = useState(false) const [isDateOpen, setIsDateOpen] = useState(false) // Geolocation useEffect(() => { const checkGeolocation = async () => { if ("geolocation" in navigator) { try { const position = await new Promise((resolve, reject) => { navigator.geolocation.getCurrentPosition(resolve, reject, { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }) }) setLocation("Autour de moi") // You can use position.coords.latitude and position.coords.longitude // to get the exact coordinates and potentially reverse geocode them } catch (error) { console.error("Erreur de géolocalisation:", error) if (error instanceof GeolocationPositionError && error.code === error.PERMISSION_DENIED) { console.log("L'utilisateur a refusé la géolocalisation.") } setLocation("Entrez une adresse") } } else { console.log("La géolocalisation n'est pas supportée par ce navigateur.") setLocation("Entrez une adresse") } } checkGeolocation() }, []) // Date formatting helpers const isToday = (date?: Date) => { if (!date) return false const today = new Date() return date.toDateString() === today.toDateString() } const isTomorrow = (date?: Date) => { if (!date) return false const tomorrow = new Date() tomorrow.setDate(tomorrow.getDate() + 1) return date.toDateString() === tomorrow.toDateString() } const getDateButtonText = () => { if (!date) return "Aujourd'hui" if (isToday(date)) return "Aujourd'hui" if (isTomorrow(date)) return "Demain" return format(date, "dd MMM", { locale: fr }) } const handleDateSelect = (newDate: Date | undefined) => { setDate(newDate) setIsDateOpen(false) } return (

{/* Location and Date */}

{/* Address Popover */}

Entrez une adresse

setAddress(e.target.value)} />

{/* Date Popover */}

{/* Categories */}

{categories.map((category) => ( ))}

) }