diff --git a/src/app/(real-estate-listings)/TabFilters.tsx b/src/app/(real-estate-listings)/TabFilters.tsx new file mode 100644 index 0000000..bba2665 --- /dev/null +++ b/src/app/(real-estate-listings)/TabFilters.tsx @@ -0,0 +1,516 @@ +"use client"; + +import React, { Fragment, useState } from "react"; +import { Dialog, Popover, Transition } from "@headlessui/react"; +import ButtonPrimary from "@/shared/ButtonPrimary"; +import ButtonThird from "@/shared/ButtonThird"; +import ButtonClose from "@/shared/ButtonClose"; +import Checkbox from "@/shared/Checkbox"; +import convertNumbThousand from "@/utils/convertNumbThousand"; +import Slider from "rc-slider"; +import NcInputNumber from "@/components/NcInputNumber"; +import { XMarkIcon } from "@heroicons/react/24/outline"; + +// DEMO DATA +const typeOfProperty = [ + { + name: "Duplex House", + description: "Have a place to yourself", + checked: true, + }, + { + name: "Ferme House", + description: "Have your own room and share some common spaces", + checked: true, + }, + { + name: "Chalet House", + description: + "Have a private or shared room in a boutique hotel, hostel, and more", + checked: true, + }, + { + name: "Maison House", + description: "Stay in a shared space, like a common room", + }, +]; + +// +const moreFilter1 = typeOfProperty; + +const TabFilters = () => { + const [isOpenMoreFilter, setisOpenMoreFilter] = useState(false); + // + const [isOnSale, setIsOnSale] = useState(true); + const [rangePrices, setRangePrices] = useState([0, 1000]); + // + const closeModalMoreFilter = () => setisOpenMoreFilter(false); + const openModalMoreFilter = () => setisOpenMoreFilter(true); + + const renderXClear = () => { + return ( + + + + ); + }; + + const renderTabsRoomAndBeds = () => { + return ( + + {({ open, close }) => ( + <> + + Rooms of Beds + + + + +
+
+ + + +
+
+ + Clear + + + Apply + +
+
+ + + + )} + + ); + }; + + const renderTabsTypeOfPlace = () => { + return ( + + {({ open, close }) => ( + <> + + Type of property + + + + +
+
+ {typeOfProperty.map((item) => ( +
+ +
+ ))} +
+
+ + Clear + + + Apply + +
+
+ + + + )} + + ); + }; + + const renderTabsPriceRage = () => { + return ( + + {({ open, close }) => ( + <> + + + {`$${convertNumbThousand( + rangePrices[0] + )} - $${convertNumbThousand(rangePrices[1])}`}{" "} + + {renderXClear()} + + + +
+
+
+ Price per day + setRangePrices(e as number[])} + /> +
+ +
+
+ +
+
+ + $ + +
+ +
+
+
+ +
+
+ + $ + +
+ +
+
+
+
+
+ + Clear + + + Apply + +
+
+ + + + )} + + ); + }; + + const renderTabOnSale = () => { + return ( +
setIsOnSale(!isOnSale)} + > + On sale + {isOnSale && renderXClear()} +
+ ); + }; + + const renderMoreFilterItem = ( + data: { + name: string; + description?: string; + defaultChecked?: boolean; + }[] + ) => { + const list1 = data.filter((_, i) => i < data.length / 2); + const list2 = data.filter((_, i) => i >= data.length / 2); + return ( +
+
+ {list1.map((item) => ( + + ))} +
+
+ {list2.map((item) => ( + + ))} +
+
+ ); + }; + + const renderTabMobileFilter = () => { + return ( +
+
+ + Experiences filters (3) + + {renderXClear()} +
+ + + +
+ + + + + {/* This element is to trick the browser into centering the modal contents. */} + + +
+
+ + Experiences filters + + + + +
+ +
+
+
+

+ Type of experiences +

+
+ {renderMoreFilterItem(moreFilter1)} +
+
+ + {/* --------- */} + {/* ---- */} +
+

Rooms and beds

+
+ + + +
+
+ + {/* ---- */} +
+

Range Prices

+
+
+
+ setRangePrices(e as number[])} + /> +
+ +
+
+ +
+
+ + $ + +
+ +
+
+
+ +
+
+ + $ + +
+ +
+
+
+
+
+
+
+
+ +
+ + Clear + + + Apply + +
+
+ +
+ + +
+ ); + }; + + return ( +
+
+ {renderTabsTypeOfPlace()} + {renderTabsRoomAndBeds()} + {renderTabsPriceRage()} + {renderTabOnSale()} +
+
+ {renderTabMobileFilter()} + {renderTabOnSale()} +
+
+ ); +}; + +export default TabFilters;