diff --git a/src/app/(listing-detail)/listing-stay-detail/page.tsx b/src/app/(listing-detail)/listing-stay-detail/page.tsx new file mode 100644 index 0000000..11ca741 --- /dev/null +++ b/src/app/(listing-detail)/listing-stay-detail/page.tsx @@ -0,0 +1,637 @@ +"use client"; + +import React, { FC, Fragment, useState } from "react"; +import { Dialog, Transition } from "@headlessui/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 ButtonClose from "@/shared/ButtonClose"; +import Input from "@/shared/Input"; +import LikeSaveBtns from "@/components/LikeSaveBtns"; +import Image from "next/image"; +import { usePathname, useRouter } from "next/navigation"; +import { Amenities_demos, PHOTOS } from "./constant"; +import StayDatesRangeInput from "./StayDatesRangeInput"; +import GuestsInput from "./GuestsInput"; +import SectionDateRange from "../SectionDateRange"; +import { Route } from "next"; + +export interface ListingStayDetailPageProps {} + +const ListingStayDetailPage: FC = ({}) => { + // + + let [isOpenModalAmenities, setIsOpenModalAmenities] = useState(false); + + const thisPathname = usePathname(); + const router = useRouter(); + + function closeModalAmenities() { + setIsOpenModalAmenities(false); + } + + function openModalAmenities() { + setIsOpenModalAmenities(true); + } + + const handleOpenModalImageGallery = () => { + router.push(`${thisPathname}/?modal=PHOTO_TOUR_SCROLLABLE` as Route); + }; + + const renderSection1 = () => { + return ( +
+ {/* 1 */} +
+ + +
+ + {/* 2 */} +

+ Beach House in Collingwood +

+ + {/* 3 */} +
+ + · + + + Tokyo, Jappan + +
+ + {/* 4 */} +
+ + + Hosted by{" "} + + Kevin Francis + + +
+ + {/* 5 */} +
+ + {/* 6 */} +
+
+ + + 6 guests + +
+
+ + + 6 beds + +
+
+ + + 3 baths + +
+
+ + + 2 bedrooms + +
+
+
+ ); + }; + + const renderSection2 = () => { + return ( +
+

Stay information

+
+
+ + 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. Complimentary WiFi is provided. + +
+
+ + There is a private bathroom with bidet in all units, along with a + hairdryer and free toiletries. + +

+ + The Symphony 9 Tam Coc offers a terrace. Both a bicycle rental + service and a car rental service are available at the accommodation, + while cycling can be enjoyed nearby. + +
+
+ ); + }; + + const renderSection3 = () => { + return ( +
+
+

Amenities

+ + {` About the property's amenities and services`} + +
+
+ {/* 6 */} +
+ {Amenities_demos.filter((_, i) => i < 12).map((item) => ( +
+ + {item.name} +
+ ))} +
+ + {/* ----- */} +
+
+ + View more 20 amenities + +
+ {renderMotalAmenities()} +
+ ); + }; + + const renderMotalAmenities = () => { + return ( + + +
+ + + + + {/* This element is to trick the browser into centering the modal contents. */} + + +
+
+
+

+ Amenities +

+ + + +
+
+ {Amenities_demos.filter((_, i) => i < 1212).map((item) => ( +
+ + {item.name} +
+ ))} +
+
+
+ +
+ + + ); + }; + + const renderSection4 = () => { + return ( +
+ {/* HEADING */} +
+

Room Rates

+ + Prices may increase on weekends or holidays + +
+
+ {/* CONTENT */} +
+
+
+ Monday - Thursday + $199 +
+
+ Monday - Thursday + $199 +
+
+ Friday - Sunday + $219 +
+
+ Rent by month + -8.34 % +
+
+ Minimum number of nights + 1 night +
+
+ Max number of nights + 90 nights +
+
+
+
+ ); + }; + + 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

+ + Refund 50% of the booking value when customers cancel the room + within 48 hours after successful booking and 14 days before the + check-in time.
+ Then, cancel the room 14 days before the check-in time, get a 50% + refund of the total amount paid (minus the service fee). + +
+
+ + {/* CONTENT */} +
+

Check-in time

+
+
+ Check-in + 08:00 am - 12:00 am +
+
+ Check-out + 02:00 pm - 04:00 pm +
+
+
+
+ + {/* CONTENT */} +
+

Special Note

+
+
    +
  • + Ban and I will work together to keep the landscape and + environment green and clean by not littering, not using + stimulants and respecting people around. +
    • +
  • Do not sing karaoke past 11:30
    • +
+
+
+
+ ); + }; + + const renderSidebar = () => { + return ( +
+ {/* PRICE */} +
+ + $119 + + /night + + + +
+ + {/* FORM */} +
+ +
+ + + + {/* SUM */} +
+
+ $119 x 3 night + $357 +
+
+ Service charge + $0 +
+
+
+ Total + $199 +
+
+ + {/* SUBMIT */} + Reserve +
+ ); + }; + + return ( +
+ {/* HEADER */} +
+
+
+ +
+
+ {PHOTOS.filter((_, i) => i >= 1 && i < 5).map((item, index) => ( +
= 3 ? "hidden sm:block" : "" + }`} + > +
+ +
+ + {/* OVERLAY */} +
+
+ ))} + + +
+
+ + {/* MAIN */} +
+ {/* CONTENT */} +
+ {renderSection1()} + {renderSection2()} + {renderSection3()} + {renderSection4()} + + {renderSection5()} + {renderSection6()} + {renderSection7()} + {renderSection8()} +
+ + {/* SIDEBAR */} +
+
{renderSidebar()}
+
+
+
+ ); +}; + +export default ListingStayDetailPage;