diff --git a/src/app/(experience-listings)/TabFilters.tsx b/src/app/(experience-listings)/TabFilters.tsx new file mode 100644 index 0000000..88bae72 --- /dev/null +++ b/src/app/(experience-listings)/TabFilters.tsx @@ -0,0 +1,538 @@ +"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"; + +// DEMO DATA +const typeOfExpriences = [ + { + name: "Food & drink", + description: "Short description for the experience", + }, + { + name: "Art and culture", + description: "Short description for the experience", + }, + { + name: "Nature and outdoors", + description: "Short description for the experience", + }, + { + name: "Sports", + description: "Short description for the experience", + }, +]; + +const timeOfdays = [ + { + name: "Morning", + description: "Start before 12pm", + }, + { + name: "Afternoon", + description: "Start after 12pm", + }, + { + name: "Evening", + description: "Start after 5pm", + }, +]; + +// +const moreFilter1 = typeOfExpriences; +const moreFilter2 = timeOfdays; + +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 renderTabsTypeOfPlace = () => { + return ( + + {({ open, close }) => ( + <> + + Type of experiences + + + + +
+
+ {typeOfExpriences.map((item) => ( +
+ +
+ ))} +
+
+ + Clear + + + Apply + +
+
+ + + + )} + + ); + }; + + const renderTabsTimeOfDay = () => { + return ( + + {({ open, close }) => ( + <> + + Time of day + + + + +
+
+ {timeOfdays.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)} +
+
+
+

Time of day

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

Range Prices

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