Destination Carousel This component displays a horizontally scrollable carousel of destination cards. It's designed to be easily populated with data and includes a title, a "view all" link, and interactive cards with hover and entrance animations.
import { DestinationCarousel, Destination } from "@/components/ui/destination-carousel";
// Sample data for the demo
const popularDestinations: Destination[] = [
{
id: "prague",
name: "Prague",
country: "Czech Republic",
imageUrl: "https://cdn.21st.dev/assets/mirror/bd/bdbc5dfa2ade28455611a759138daa80169e0f51e04bad5378f4466afa6ad756.jpg",
avgTicketPrice: 53,
currency: "EUR",
isFavorite: true,
},
{
id: "budapest",
name: "Budapest",
country: "Hungary",
imageUrl: "https://cdn.21st.dev/assets/mirror/9e/9e0219f4f41b68a6969c3518384fb959d465ee7ce27f16535ffe62aede8556b7.jpg",
avgTicketPrice: 44,
currency: "EUR",
},
{
id: "bratislava",
name: "Bratislava",
country: "Slovakia",
imageUrl: "https://cdn.21st.dev/assets/mirror/21/210af8d2c0c3cc8d21eb57419a272915b3711ddcc80aba8de6eb81d0fe48ba5e.jpg",
avgTicketPrice: 21,
currency: "EUR",
},
{
id: "rome",
name: "Rome",
country: "Italy",
imageUrl: "https://cdn.21st.dev/assets/mirror/b6/b64588002496c04301678a76412a98f0c083ac80f91ce0230b22cc6d569c8b24.jpg",
avgTicketPrice: 78,
currency: "EUR",
isFavorite: true,
},
{
id: "paris",
name: "Paris",
country: "France",
imageUrl: "https://cdn.21st.dev/assets/mirror/41/4177e680ea7f60649188ba91e1c9f2f4eaac3d531619b38c52b670465926a46d.jpg",
avgTicketPrice: 85,
currency: "EUR",
},
];
/**
* A demo page to showcase the DestinationCarousel component.
*/
const DestinationCarouselDemo = () => {
return (
<div className="w-full bg-background flex items-center justify-center py-10">
<DestinationCarousel
title="Popular from Vienna"
destinations={popularDestinations}
/>
</div>
);
};
export default DestinationCarouselDemo;