From 8c6a5d93b92d14c41cf2c7debb6645658ff59486 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sun, 10 Sep 2023 17:40:43 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=A8=E2=80=8D=F0=9F=92=BB=20Added=20Pro?=
 =?UTF-8?q?pertyCardH=20component=20=F0=9F=9A=80=20Initial=20implementatio?=
 =?UTF-8?q?n=20of=20PropertyCardH=20=F0=9F=8E=A8=20Improved=20code=20reada?=
 =?UTF-8?q?bility=20=F0=9F=94=A7=20Fixed=20minor=20bugs=20in=20PropertyCar?=
 =?UTF-8?q?dH=20=F0=9F=93=9D=20Updated=20comments=20and=20documentation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PropertyCardH.tsx | 148 +++++++++++++++++++++++++++++++
 1 file changed, 148 insertions(+)
 create mode 100644 src/components/PropertyCardH.tsx

diff --git a/src/components/PropertyCardH.tsx b/src/components/PropertyCardH.tsx
new file mode 100644
index 0000000..dc26485
--- /dev/null
+++ b/src/components/PropertyCardH.tsx
@@ -0,0 +1,148 @@
+import React, { FC } from "react";
+import GallerySlider from "@/components/GallerySlider";
+import { DEMO_STAY_LISTINGS } from "@/data/listings";
+import StartRating from "@/components/StartRating";
+import BtnLikeIcon from "@/components/BtnLikeIcon";
+import SaleOffBadge from "@/components/SaleOffBadge";
+import Badge from "@/shared/Badge";
+import { StayDataType } from "@/data/types";
+import Link from "next/link";
+
+export interface PropertyCardHProps {
+  className?: string;
+  data?: StayDataType;
+}
+
+const DEMO_DATA = DEMO_STAY_LISTINGS[0];
+
+const PropertyCardH: FC<PropertyCardHProps> = ({
+  className = "",
+  data = DEMO_DATA,
+}) => {
+  const {
+    galleryImgs,
+    title,
+    href,
+    like,
+    saleOff,
+    isAds,
+    price,
+    reviewStart,
+    reviewCount,
+    id,
+  } = data;
+
+  const renderSliderGallery = () => {
+    return (
+      <div className="flex-shrink-0 p-3 w-full sm:w-64 ">
+        <GallerySlider
+          ratioClass="aspect-w-1 aspect-h-1"
+          galleryImgs={galleryImgs}
+          className="w-full h-full rounded-2xl overflow-hidden"
+          uniqueID={`PropertyCardH_${id}`}
+          href={href}
+        />
+
+        {saleOff && (
+          <SaleOffBadge className="absolute left-5 top-5 !bg-orange-500" />
+        )}
+      </div>
+    );
+  };
+
+  const renderTienIch = () => {
+    return (
+      <div className="inline-grid grid-cols-3 gap-2">
+        <div className="flex items-center space-x-2">
+          <span className="hidden sm:inline-block">
+            <i className="las la-bed text-lg"></i>
+          </span>
+          <span className="text-xs text-neutral-500 dark:text-neutral-400">
+            6 beds
+          </span>
+        </div>
+
+        {/* ---- */}
+        <div className="flex items-center space-x-2">
+          <span className="hidden sm:inline-block">
+            <i className="las la-bath text-lg"></i>
+          </span>
+          <span className="text-xs text-neutral-500 dark:text-neutral-400">
+            3 baths
+          </span>
+        </div>
+
+        {/* ---- */}
+        <div className="flex items-center space-x-2">
+          <span className="hidden sm:inline-block">
+            <i className="las la-expand-arrows-alt text-lg"></i>
+          </span>
+          <span className="text-xs text-neutral-500 dark:text-neutral-400">
+            1200 Sq. Fit
+          </span>
+        </div>
+      </div>
+    );
+  };
+
+  const renderContent = () => {
+    return (
+      <div className="flex-grow p-3 sm:pr-6 flex flex-col items-start">
+        <div className="space-y-4 w-full">
+          <div className="inline-flex space-x-3">
+            <Badge
+              name={
+                <div className="flex items-center">
+                  <i className="text-sm las la-share-alt"></i>
+                  <span className="ml-1">4 Network</span>
+                </div>
+              }
+            />
+            <Badge
+              name={
+                <div className="flex items-center">
+                  <i className="text-sm las la-user-friends"></i>
+                  <span className="ml-1">Family</span>
+                </div>
+              }
+              color="yellow"
+            />
+          </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-2">{title}</span>
+            </h2>
+          </div>
+          {renderTienIch()}
+          <div className="w-14 border-b border-neutral-200/80 dark:border-neutral-700 "></div>
+          <div className="flex w-full justify-between items-end">
+            <StartRating reviewCount={reviewCount} point={reviewStart} />
+            <span className="flex items-center justify-center px-2.5 py-1.5 border-2 border-secondary-500 rounded-lg leading-none text-sm font-medium text-secondary-500">
+              {`${price},000`}
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div
+      className={`nc-PropertyCardH group relative bg-white dark:bg-neutral-900 border border-neutral-200/80 dark:border-neutral-700 rounded-3xl overflow-hidden ${className}`}
+    >
+      <Link href={href} className="absolute inset-0"></Link>
+      <div className="h-full w-full flex flex-col sm:flex-row sm:items-center">
+        {renderSliderGallery()}
+        {renderContent()}
+      </div>
+      <BtnLikeIcon
+        colorClass={` bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 hover:bg-opacity-70 text-neutral-6000 dark:text-neutral-400`}
+        isLiked={like}
+        className="absolute right-5 top-5 sm:right-3 sm:top-3 "
+      />
+    </div>
+  );
+};
+
+export default PropertyCardH;