From 489bf4d69e6bbac31a39d39d386e0a902ae16770 Mon Sep 17 00:00:00 2001 From: John Doe Date: Tue, 12 Sep 2023 21:01:28 +0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Implemented=20new=20features=20?= =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Fixed=20bugs=20=E2=9C=A8=20Improved=20p?= =?UTF-8?q?erformance=20=F0=9F=93=9D=20Updated=20documentation=20?= =?UTF-8?q?=F0=9F=94=A7=20Refactored=20code=20=F0=9F=8E=A8=20Enhanced=20us?= =?UTF-8?q?er=20interface=20=F0=9F=92=A1=20Added=20new=20ideas=20?= =?UTF-8?q?=F0=9F=8C=90=20Optimized=20network=20requests=20=F0=9F=A7=90=20?= =?UTF-8?q?Reviewed=20code=20quality?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../listing-car-detail/page.tsx | 542 ++++++++++++++++++ 1 file changed, 542 insertions(+) create mode 100644 src/app/(listing-detail)/listing-car-detail/page.tsx diff --git a/src/app/(listing-detail)/listing-car-detail/page.tsx b/src/app/(listing-detail)/listing-car-detail/page.tsx new file mode 100644 index 0000000..726444b --- /dev/null +++ b/src/app/(listing-detail)/listing-car-detail/page.tsx @@ -0,0 +1,542 @@ +"use client"; + +import React, { FC, useState } from "react"; +import { ArrowRightIcon, Squares2X2Icon } from "@heroicons/react/24/outline"; +import CommentListing from "@/components/CommentListing"; +import FiveStartIconForRate from "@/components/FiveStartIconForRate"; +import StartRating from "@/components/StartRating"; +import Avatar from "@/shared/Avatar"; +import Badge from "@/shared/Badge"; +import ButtonCircle from "@/shared/ButtonCircle"; +import ButtonPrimary from "@/shared/ButtonPrimary"; +import ButtonSecondary from "@/shared/ButtonSecondary"; +import Input from "@/shared/Input"; +import Image from "next/image"; +import { Amenities_demos, includes_demo, PHOTOS } from "./constant"; +import LikeSaveBtns from "@/components/LikeSaveBtns"; +import { usePathname, useRouter } from "next/navigation"; +import SectionDateRange from "../SectionDateRange"; +import RentalCarDatesRangeInput from "./RentalCarDatesRangeInput"; +import { Route } from "next"; + +export interface ListingCarDetailPageProps {} + +const ListingCarDetailPage: FC = ({}) => { + // USE STATE + + const thisPathname = usePathname(); + const router = useRouter(); + + const handleOpenModalImageGallery = () => { + router.push(`${thisPathname}/?modal=PHOTO_TOUR_SCROLLABLE` as Route); + }; + + const renderSection1 = () => { + return ( +
+ {/* 1 */} +
+ + +
+ + {/* 2 */} +

+ BMW 3 Series Sedan +

+ + {/* 3 */} +
+ + · + + + Tokyo, Jappan + +
+ + {/* 4 */} +
+ + + Car owner{" "} + + Kevin Francis + + +
+ + {/* 5 */} +
+ + {/* 6 */} +
+
+ + 4 seats +
+
+ + Auto gearbox +
+
+ + 2 bags +
+
+
+ ); + }; + + // + const renderSectionTienIch = () => { + return ( +
+
+

+ Vehicle parameters & utilities{" "} +

+ + Questions are at the heart of making things great. + +
+
+ {/* 6 */} +
+ {/* TIEN ICH 1 */} + {Amenities_demos.map((item, index) => ( +
+
+ +
+ {item.name} +
+ ))} +
+
+ ); + }; + + const renderSection2 = () => { + return ( +
+

Car descriptions

+
+
+

+ Until the all-new TUCSON hits the dealer showrooms you can check it + out in our Showroom Walkaround video. Watch the video and join our + product specialist as he gives you an up-close look of our latest + SUV +
+
+ Questions are at the heart of making things great. Watch our + celebrity-filled TV ad and you’ll see that when we say “everything,” + we mean everything. +

+
+
+ ); + }; + + const renderSection3 = () => { + return ( +
+
+

Include

+ + Included in the price + +
+
+ {/* 6 */} +
+ {includes_demo + .filter((_, i) => i < 12) + .map((item) => ( +
+ + {item.name} +
+ ))} +
+
+ ); + }; + + const renderSection5 = () => { + return ( +
+ {/* HEADING */} +

Car Owner

+
+ + {/* host */} +
+ +
+ + Kevin Francis + +
+ + · + 12 places +
+
+
+ + {/* desc */} + + Providing lake views, The Symphony 9 Tam Coc in Ninh Binh provides + accommodation, an outdoor swimming pool, a bar, a shared lounge, a + garden and barbecue facilities... + + + {/* info */} +
+
+ + + + Joined in March 2016 +
+
+ + + + Response rate - 100% +
+
+ + + + + Fast response - within a few hours +
+
+ + {/* == */} +
+
+ See host profile +
+
+ ); + }; + + const renderSection6 = () => { + return ( +
+ {/* HEADING */} +

Reviews (23 reviews)

+
+ + {/* Content */} +
+ +
+ + + + +
+
+ + {/* comment */} +
+ + + + +
+ View more 20 reviews +
+
+
+ ); + }; + + const renderSection7 = () => { + return ( +
+ {/* HEADING */} +
+

Location

+ + San Diego, CA, United States of America (SAN-San Diego Intl.) + +
+
+ + {/* MAP */} +
+
+ +
+
+
+ ); + }; + + const renderSection8 = () => { + return ( +
+ {/* HEADING */} +

Things to know

+
+ + {/* CONTENT */} +
+

Cancellation policy

+ + Lock in this fantastic price today, cancel free of charge anytime. + Reserve now and pay at pick-up. + +
+
+ + {/* CONTENT */} +
+

Special Note

+ + We asked ourselves, “How can we make the dash not only look better, + but also give the driver a better look outside?” The unexpected + answer is having no hood above the available 10.25-inch digital + instrument cluster... + +
+
+ ); + }; + + const renderSidebarPrice = () => { + return ( +
+ {/* PRICE */} +
+ + $19 + + /day + + + +
+ + {/* FORM */} +
+ + + + {/* SUM */} +
+
+ $19 x 3 day + $57 +
+ +
+
+ Total + $199 +
+
+ + {/* SUBMIT */} + Reserve +
+ ); + }; + + const renderSidebarDetail = () => { + return ( +
+ + Pick up and drop off + +
+
+ + + +
+
+
+ + Monday, August 12 · 10:00 + + + Saint Petersburg City Center + +
+
+ + Monday, August 16 · 10:00 + + + Saint Petersburg City Center + +
+
+
+
+ ); + }; + + return ( +
+ {/* SINGLE HEADER */} +
+
+
+ photo 0 +
+
+ + {/* */} +
+ photo 1 +
+
+ + {/* */} + {PHOTOS.filter((_, i) => i >= 2 && i < 4).map((item, index) => ( +
= 2 ? "block" : "" + }`} + > +
+ photos +
+ + {/* OVERLAY */} +
+
+ ))} + +
+ + + + Show all photos + +
+
+
+ + {/* MAIn */} +
+ {/* CONTENT */} +
+ {renderSection1()} +
{renderSidebarDetail()}
+ {renderSectionTienIch()} + {renderSection2()} + {renderSection3()} + + + {renderSection5()} + {renderSection6()} + {renderSection7()} + {renderSection8()} +
+ + {/* SIDEBAR */} +
+ {renderSidebarDetail()} +
+ {renderSidebarPrice()} +
+
+
+
+ ); +}; + +export default ListingCarDetailPage;