From 34436e5e67d0d20b9967cdfa652aab7a2d47213e Mon Sep 17 00:00:00 2001 From: John Doe Date: Mon, 11 Sep 2023 17:22:26 +0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9F=20Added=20CarCardH=20component=20?= =?UTF-8?q?=F0=9F=9A=97=20Implemented=20CarCardH=20data=20rendering=20?= =?UTF-8?q?=F0=9F=93=B8=20Integrated=20image=20gallery=20in=20CarCardH=20?= =?UTF-8?q?=F0=9F=92=BC=20Added=20author=20information=20to=20CarCardH=20?= =?UTF-8?q?=F0=9F=8C=88=20Styled=20CarCardH=20for=20a=20beautiful=20displa?= =?UTF-8?q?y?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CarCardH.tsx | 139 ++++++++++++++++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 src/components/CarCardH.tsx diff --git a/src/components/CarCardH.tsx b/src/components/CarCardH.tsx new file mode 100644 index 0000000..b5ebe03 --- /dev/null +++ b/src/components/CarCardH.tsx @@ -0,0 +1,139 @@ +import React, { FC } from "react"; +import { DEMO_CAR_LISTINGS } from "@/data/listings"; +import { CarDataType } from "@/data/types"; +import StartRating from "@/components/StartRating"; +import BtnLikeIcon from "@/components/BtnLikeIcon"; +import SaleOffBadge from "@/components/SaleOffBadge"; +import Badge from "@/shared/Badge"; +import Avatar from "@/shared/Avatar"; +import Image from "next/image"; +import Link from "next/link"; + +export interface CarCardHProps { + className?: string; + data?: CarDataType; +} + +const DEMO_DATA: CarDataType = DEMO_CAR_LISTINGS[0]; + +const CarCardH: FC = ({ className = "", data = DEMO_DATA }) => { + const { + address, + title, + href, + like, + saleOff, + isAds, + price, + reviewStart, + reviewCount, + author, + featuredImage, + } = data; + + const renderSliderGallery = () => { + return ( +
+
+ +
+ + {saleOff && } +
+ ); + }; + + const renderContent = () => { + return ( +
+
+
+ {isAds && } +

+ {title} +

+
+
+ + · +
+ + + + {address} +
+
+
+
+ {/* SHOW MOBILE */} +
+ 4 seats + · + Auto gearbox + · + 4 seats +
+ {/* SHOW DESK */} +
+ {/* --- */} +
+ + + 4 seats + +
+ {/* --- */} +
+ + + Auto gearbox + +
+ {/* --- */} +
+ + + 2 bags + +
+
+ +
+
+
+ + + Car owner {" "} + {author.displayName} + +
+ + {price} + {` `} + + /day + + +
+
+ ); + }; + + return ( +
+ + {renderSliderGallery()} + {renderContent()} + +
+ ); +}; + +export default CarCardH;