Components
Loading preview...
Property Card A modern, responsive card component designed to showcase property listings with key details and a call-to-action.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/card-4import { PropertyCard } from "@/components/ui/card-4";
export default function PropertyCardDemo() {
const handleReserveClick = () => {
// In a real app, this would handle the reservation logic
alert("Reserve button clicked!");
};
return (
<div className="flex min-h-screen items-center justify-center bg-background p-4">
<PropertyCard
imageUrl="https://plus.unsplash.com/premium_photo-1661340695541-ee1ca7efedd0?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGJ1aWxkaW5nfGVufDB8fDB8fHww"
imageAlt="Modern wooden cabin in a grassy, mountainous landscape"
title="Iceland Cabin"
price={680}
pricePeriod="per night"
description="Cozy cabin nestled in Iceland's breathtaking landscape, offering stunning views of mountains and Northern Lights."
stats={[
{ label: "Days", value: 3 },
{ label: "Rating", value: "4.9" },
]}
actionLabel="Reserve"
onActionClick={handleReserveClick}
/>
</div>
);
}