Browse Source

🛠️ Implemented StayCardH component

🖼️ Added image slider functionality
📄 Rendered property details
 Added star ratings and pricing
🔗 Linked StayCardH to the main page
main
John Doe 1 year ago
parent
commit
d4891100bb
  1. 147
      src/components/StayCardH.tsx

147
src/components/StayCardH.tsx

@ -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;
Loading…
Cancel
Save