4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T287f,"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 (

); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":["card","badge","button"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"/components/kokonutui/carousel-cards.tsx","content":"$51","type":"registry:component","target":"components/kokonutui/carousel-cards.tsx"}],"className":"h-[70svh] min-h-80"}]]}]