Browse Source
🛠️ Implemented StayCardH component
🛠️ Implemented StayCardH component
🖼️ Added image slider functionality 📄 Rendered property details ⭐ Added star ratings and pricing 🔗 Linked StayCardH to the main pagemain
John Doe
1 year ago
1 changed files with 147 additions and 0 deletions
@ -0,0 +1,147 @@ |
|||
import React, { FC } from "react"; |
|||
import GallerySlider from "@/components/GallerySlider"; |
|||
import { DEMO_STAY_LISTINGS } from "@/data/listings"; |
|||
import { StayDataType } from "@/data/types"; |
|||
import StartRating from "@/components/StartRating"; |
|||
import BtnLikeIcon from "@/components/BtnLikeIcon"; |
|||
import SaleOffBadge from "@/components/SaleOffBadge"; |
|||
import Badge from "@/shared/Badge"; |
|||
import Link from "next/link"; |
|||
|
|||
export interface StayCardHProps { |
|||
className?: string; |
|||
data?: StayDataType; |
|||
} |
|||
|
|||
const DEMO_DATA = DEMO_STAY_LISTINGS[0]; |
|||
|
|||
const StayCardH: FC<StayCardHProps> = ({ |
|||
className = "", |
|||
data = DEMO_DATA, |
|||
}) => { |
|||
const { |
|||
galleryImgs, |
|||
listingCategory, |
|||
address, |
|||
title, |
|||
href, |
|||
like, |
|||
saleOff, |
|||
isAds, |
|||
price, |
|||
reviewStart, |
|||
reviewCount, |
|||
id, |
|||
} = data; |
|||
|
|||
const renderSliderGallery = () => { |
|||
return ( |
|||
<div className="relative flex-shrink-0 w-full md:w-72 "> |
|||
<GallerySlider |
|||
ratioClass="aspect-w-6 aspect-h-5" |
|||
galleryImgs={galleryImgs} |
|||
uniqueID={`StayCardH_${id}`} |
|||
href={href} |
|||
/> |
|||
<BtnLikeIcon isLiked={like} className="absolute right-3 top-3" /> |
|||
{saleOff && <SaleOffBadge className="absolute left-3 top-3" />} |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
const renderTienIch = () => { |
|||
return ( |
|||
<div className="hidden sm:grid grid-cols-3 gap-2"> |
|||
<div className="space-y-3"> |
|||
<div className="flex items-center space-x-3"> |
|||
<i className="las la-user text-lg"></i> |
|||
<span className="text-sm text-neutral-500 dark:text-neutral-400"> |
|||
6 guests |
|||
</span> |
|||
</div> |
|||
<div className="flex items-center space-x-3"> |
|||
<i className="las la-bed text-lg"></i> |
|||
<span className="text-sm text-neutral-500 dark:text-neutral-400"> |
|||
6 beds |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<div className="space-y-3"> |
|||
<div className="flex items-center space-x-3"> |
|||
<i className="las la-bath text-lg"></i> |
|||
<span className="text-sm text-neutral-500 dark:text-neutral-400"> |
|||
3 baths |
|||
</span> |
|||
</div> |
|||
<div className="flex items-center space-x-3"> |
|||
<i className="las la-smoking-ban text-lg"></i> |
|||
<span className="text-sm text-neutral-500 dark:text-neutral-400"> |
|||
No smoking |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<div className="space-y-3"> |
|||
<div className="flex items-center space-x-3"> |
|||
<i className="las la-door-open text-lg"></i> |
|||
<span className="text-sm text-neutral-500 dark:text-neutral-400"> |
|||
6 bedrooms |
|||
</span> |
|||
</div> |
|||
<div className="flex items-center space-x-3"> |
|||
<i className="las la-wifi text-lg"></i> |
|||
<span className="text-sm text-neutral-500 dark:text-neutral-400"> |
|||
Wifi |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
const renderContent = () => { |
|||
return ( |
|||
<div className="flex-grow p-3 sm:p-5 flex flex-col"> |
|||
<div className="space-y-2"> |
|||
<div className="text-sm text-neutral-500 dark:text-neutral-400"> |
|||
<span> |
|||
{listingCategory.name} in {address} |
|||
</span> |
|||
</div> |
|||
<div className="flex items-center space-x-2"> |
|||
{isAds && <Badge name="ADS" color="green" />} |
|||
<h2 className="text-lg font-medium capitalize"> |
|||
<span className="line-clamp-1">{title}</span> |
|||
</h2> |
|||
</div> |
|||
</div> |
|||
<div className="hidden sm:block w-14 border-b border-neutral-100 dark:border-neutral-800 my-4"></div> |
|||
{renderTienIch()} |
|||
<div className="w-14 border-b border-neutral-100 dark:border-neutral-800 my-4"></div> |
|||
<div className="flex justify-between items-end"> |
|||
<StartRating reviewCount={reviewCount} point={reviewStart} /> |
|||
<span className="text-base font-semibold text-secondary-500"> |
|||
{price} |
|||
{` `} |
|||
<span className="text-sm text-neutral-500 dark:text-neutral-400 font-normal"> |
|||
/night |
|||
</span> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
return ( |
|||
<div |
|||
className={`nc-StayCardH group relative bg-white dark:bg-neutral-900 border border-neutral-100 dark:border-neutral-800 rounded-2xl overflow-hidden hover:shadow-xl transition-shadow ${className}`} |
|||
> |
|||
<Link href={href} className="absolute inset-0"></Link> |
|||
<div className="grid grid-cols-1 md:flex md:flex-row "> |
|||
{renderSliderGallery()} |
|||
{renderContent()} |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
export default StayCardH; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue