From 076661e9e995f9b2a0d0f4d7710bf4384045b90e Mon Sep 17 00:00:00 2001 From: John Doe Date: Tue, 12 Sep 2023 20:57:43 +0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Implemented=20initial=20code=20s?= =?UTF-8?q?tructure=20=F0=9F=94=A8=20Added=20components=20and=20imports=20?= =?UTF-8?q?=F0=9F=8C=90=20Set=20up=20project=20configuration=20?= =?UTF-8?q?=F0=9F=93=9D=20Added=20project=20documentation=20=F0=9F=8E=89?= =?UTF-8?q?=20Completed=20initial=20code=20setup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../listing-experiences-detail/page.tsx | 505 ++++++++++++++++++ 1 file changed, 505 insertions(+) create mode 100644 src/app/(listing-detail)/listing-experiences-detail/page.tsx diff --git a/src/app/(listing-detail)/listing-experiences-detail/page.tsx b/src/app/(listing-detail)/listing-experiences-detail/page.tsx new file mode 100644 index 0000000..f8b1e92 --- /dev/null +++ b/src/app/(listing-detail)/listing-experiences-detail/page.tsx @@ -0,0 +1,505 @@ +"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 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 { usePathname, useRouter } from "next/navigation"; +import LikeSaveBtns from "@/components/LikeSaveBtns"; +import StartRating from "@/components/StartRating"; +import { includes_demo, PHOTOS } from "./constant"; +import Image from "next/image"; +import StayDatesRangeInput from "./StayDatesRangeInput"; +import GuestsInput from "./GuestsInput"; +import SectionDateRange from "../SectionDateRange"; +import { Route } from "next"; + +export interface ListingExperiencesDetailPageProps {} + +const ListingExperiencesDetailPage: FC< + ListingExperiencesDetailPageProps +> = ({}) => { + const thisPathname = usePathname(); + const router = useRouter(); + + const handleOpenModalImageGallery = () => { + router.push(`${thisPathname}/?modal=PHOTO_TOUR_SCROLLABLE` as Route); + }; + + const renderSection1 = () => { + return ( +
+ {/* 1 */} +
+ + +
+ + {/* 2 */} +

+ Trang An Boat Tour & Mua Cave +

+ + {/* 3 */} +
+ + · + + + Tokyo, Jappan + +
+ + {/* 4 */} +
+ + + Hosted by{" "} + + Kevin Francis + + +
+ + {/* 5 */} +
+ + {/* 6 */} +
+
+ + 3.5 hours +
+
+ + Up to 10 people +
+
+ + English, VietNames +
+
+
+ ); + }; + + const renderSection2 = () => { + return ( +
+

Experiences descriptions

+
+
+

+ TRANG AN BOAT TOUR & MUA CAVE CLIMBING TOUR FROM HANOI +
+
+ 07:30 – 08:00 – Our guide will meet you at your hotel/stay and start + a 120km comfortable Limousine bus journey through the verdant + landscape. Stopover for a rest on the way. +
+
+ BAI DINH PAGODA EXPLORER. +
+
+ 10:30 – Arrive Bai Dinh pagoda complex, get on electric cars to + visit massive architecture. +
+
+ 12:15 – Enjoy the buffet lunch at our restaurant, a great place to + savor the flavours of Vietnamese food. +
+
+ TRANG AN TOUR ON BOAT. +
+
+ 13:30 – Visit Trang An Grottoes, get on a rowing boat traveling + along the river with scenic mountain and green fields landscape. +
+
+ MUA CAVE HIKING. TAKE PICTURE +
+
+ 15:45 – Arrive at Mua Cave and start an amazing trek up to the top + of Ngoa Long mountain. +
+
+ 17:30 – 20:00 – Return to our Limousine bus and then come back to + Hanoi. Drop you off at your hotel/stay. Other things to note +
+
+ It is one full day tour. Start from 07.30 AM and finish at 20.00. We + just put one hour and default departure time because we have many + other tours. IF you need any further details +

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

Include

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

Host Information

+
+ + {/* 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

+ + Any experience can be canceled and fully refunded within 24 hours of + purchase, or at least 7 days before the experience starts. + +
+
+ + {/* CONTENT */} +
+

Guest requirements

+ + Up to 10 guests ages 4 and up can attend. Parents may also bring + children under 2 years of age. + +
+
+ + {/* CONTENT */} +
+

What to bring

+
+
    +
  • + Formal Wear To Visit Bai Dinh Pagoda Be ready before 7.30 Am. +
    • +
  • We will pick up from 07.30 to 08.00 AM
    • +
+
+
+
+ ); + }; + + const renderSidebar = () => { + return ( +
+ {/* PRICE */} +
+ + $19 + + /person + + + +
+ + {/* FORM */} + {/* FORM */} +
+ +
+ + + + {/* SUM */} +
+
+ $19 x 3 adults + $57 +
+
+ Service charge + $0 +
+
+
+ Total + $199 +
+
+ + {/* SUBMIT */} + Reserve +
+ ); + }; + + return ( +
+ {/* SINGLE HEADER */} +
+
+
+ photo 1 +
+
+ {PHOTOS.filter((_, i) => i >= 1 && i < 4).map((item, index) => ( +
= 2 ? "block" : "" + }`} + > +
+ photos +
+ + {/* OVERLAY */} +
+
+ ))} + +
+ + + Show all photos + +
+
+
+ + {/* MAIn */} +
+ {/* CONTENT */} +
+ {renderSection1()} + {renderSection2()} + {renderSection3()} + + + {renderSection5()} + {renderSection6()} + {renderSection7()} + {renderSection8()} +
+ + {/* SIDEBAR */} +
+
{renderSidebar()}
+
+
+
+ ); +}; + +export default ListingExperiencesDetailPage;