"use client"; /** * @author: @dorianbaffier * @description: Carousel Cards * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { ChevronLeft, ChevronRight, Heart, Star } from "lucide-react"; import Image from "next/image"; import Link from "next/link"; import React from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardFooter } from "@/components/ui/card"; interface ExperienceItem { id: string; title: string; image: string; location: string; price: number; currency?: string; rating?: number; reviewCount?: number; badge?: string; date?: string; } interface ExperienceGridProps { title: string; items: ExperienceItem[]; viewAllHref?: string; } const sampleExperiences: ExperienceItem[] = [ { id: "1", title: "Become an Otaku Hottie with Megan Thee Stallion", image: "https://images.unsplash.com/photo-1615571022219-eb45cf7faa9d", location: "Los Angeles, United States", price: 120, currency: "€", rating: 4.97, reviewCount: 128, badge: "Original", date: "Closes May 21", }, { id: "2", title: "Spend a Sunday Funday with Patrick Mahomes", image: "https://images.unsplash.com/photo-1622127922040-13cab637ee78", location: "Kansas City, United States", price: 150, currency: "€", rating: 4.92, reviewCount: 86, badge: "Original", date: "Closes Today", }, { id: "3", title: "Celebrate with SEVENTEEN on their 10th anniversary", image: "https://images.unsplash.com/photo-1534430480872-3498386e7856", location: "Seoul, South Korea", price: 200, currency: "€", rating: 4.98, reviewCount: 254, badge: "Original", date: "Closed May 17", }, { id: "4", title: "Learn the secrets of French pastry with nonnas", image: "https://images.unsplash.com/photo-1604999333679-b86d54738315", location: "Paris, France", price: 70, currency: "€", rating: 4.97, reviewCount: 112, badge: "Original", }, { id: "5", title: "Uncover the world of cabaret with a burlesque show", image: "https://images.unsplash.com/photo-1552733407-5d5c46c3bb3b", location: "Paris, France", price: 92, currency: "€", rating: 4.9, reviewCount: 78, badge: "Original", }, { id: "6", title: "The Super Powers of Art-family Game at the Louvre", image: "https://images.unsplash.com/photo-1530789253388-582c481c54b0", location: "Paris, France", price: 90, currency: "€", rating: 4.98, reviewCount: 146, badge: "Original", }, { id: "7", title: "Savor tasty vegan pastries with a plant-based pro", image: "https://images.unsplash.com/photo-1608830597604-619220679440", location: "Paris, France", price: 75, currency: "€", rating: 4.95, reviewCount: 92, badge: "Original", }, ]; const popularExperiences: ExperienceItem[] = [ { id: "p1", title: "Learn to bake the French Croissant", image: "https://images.unsplash.com/photo-1555507036-ab1f4038808a", location: "Paris, France", price: 95, currency: "€", rating: 4.95, reviewCount: 218, badge: "Popular", }, { id: "p2", title: "Seek out hidden speakeasy bars in the city", image: "https://images.unsplash.com/photo-1470337458703-46ad1756a187", location: "Paris, France", price: 74, currency: "€", rating: 4.9, reviewCount: 165, badge: "Popular", }, { id: "p3", title: "Versailles Food and Palace Bike Tour", image: "https://images.unsplash.com/photo-1555507036-ab1f4038808a", location: "Versailles, France", price: 122, currency: "€", rating: 4.97, reviewCount: 89, badge: "Popular", }, { id: "p4", title: "Haunted Paris Tour - Ghosts, Legends, True Crime", image: "https://images.unsplash.com/photo-1549144511-f099e773c147", location: "Paris, France", price: 25, currency: "€", rating: 4.98, reviewCount: 345, badge: "Popular", }, { id: "p5", title: "Learn to make the French macarons with a chef", image: "https://images.unsplash.com/photo-1558326567-98ae2405596b", location: "Paris, France", price: 110, currency: "€", rating: 4.95, reviewCount: 203, badge: "Popular", }, { id: "p6", title: "No Diet Club - Best food tour in Le Marais", image: "https://images.unsplash.com/photo-1414235077428-338989a2e8c0", location: "Paris, France", price: 65, currency: "€", rating: 4.92, reviewCount: 178, badge: "5 spots left", }, { id: "p7", title: "Soak up the nightlife of Paris", image: "https://images.unsplash.com/photo-1546636889-ba9fdd63583e", location: "Paris, France", price: 20, currency: "€", rating: 4.94, reviewCount: 112, badge: "Popular", }, ]; const ExperienceCard = ({ experience }: { experience: ExperienceItem }) => (

{experience.badge && ( {experience.badge} )}

{experience.title}

{experience.location}

{experience.date && (

{experience.date}

)} {experience.rating && ( {experience.rating} )} {experience.reviewCount && ( {experience.rating && "·"} {experience.reviewCount > 0 ? ` (${experience.reviewCount})` : ""} )} {experience.currency || "€"} {experience.price} / guest

); const ExperienceSection = ({ title, items, viewAllHref = "#", }: ExperienceGridProps) => { const scrollContainer = React.useRef(null); const handleScrollLeft = () => { if (scrollContainer.current) { scrollContainer.current.scrollBy({ left: -320, behavior: "smooth", }); } }; const handleScrollRight = () => { if (scrollContainer.current) { scrollContainer.current.scrollBy({ left: 320, behavior: "smooth" }); } }; return (

{title}

Show all

{items.map((item) => (

))}

); }; export default function CarouselCards() { return (

); }

Carousel Cards

Instalação

Dependências

Registry dependencies