Components
Loading preview...
Place Card A visually polished card component for displaying travel destinations or listings. It includes an image carousel, rating, tags, and booking information, with smooth animations powered by framer-motion.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/card-22import { PlaceCard } from '@/components/ui/card-22';
// Sample data to be passed as props
const demoPlaceData = {
images: [
'https://images.unsplash.com/photo-1589182373726-e4f658ab50f0?q=80&w=2940&auto=format&fit=crop',
'https://images.unsplash.com/photo-1596622247990-84877175438a?q=80&w=2864&auto=format&fit=crop',
'https://images.unsplash.com/photo-1543332164-6e82f355badc?q=80&w=2940&auto=format&fit=crop',
],
tags: ['Adventure', 'Ancient Monuments'],
rating: 4.8,
title: 'Petra, Jordan',
dateRange: 'May 1 - 6',
hostType: 'Business host',
isTopRated: true,
description: 'A lost city carved in rose-colored stone, hidden in majestic desert canyons.',
pricePerNight: 139,
};
const PlaceCardDemo = () => {
return (
<div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
<PlaceCard
images={demoPlaceData.images}
tags={demoPlaceData.tags}
rating={demoPlaceData.rating}
title={demoPlaceData.title}
dateRange={demoPlaceData.dateRange}
hostType={demoPlaceData.hostType}
isTopRated={demoPlaceData.isTopRated}
description={demoPlaceData.description}
pricePerNight={demoPlaceData.pricePerNight}
/>
</div>
);
};
export default PlaceCardDemo;