Components
Loading preview...
Displays location-specific highlights with imagery, title, and subtle UI elements like a "like" icon. Ideal for showcasing top destinations, promoting tours, or suggesting user-curated travel picks.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/card"use client";
import * as React from "react";
import { DestinationCard } from "@/components/ui/card"; // Adjust path as needed
export default function DestinationCardDemo() {
const [isLiked, setIsLiked] = React.useState(false);
const handleLike = () => {
setIsLiked((prev) => !prev);
};
return (
<div className="flex h-screen w-full items-center justify-center bg-background p-4">
<div className="w-full max-w-sm h-[500px]">
<DestinationCard
imageUrl="https://plus.unsplash.com/premium_photo-1719581957038-0121108b9455?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fFBhcmlzfGVufDB8fDB8fHww"
category="Paris"
title="Tours France"
isLiked={isLiked}
onLike={handleLike}
aria-label="View details for a tour in Paris, France"
/>
</div>
</div>
);
}