From 52f1863e39bca52d187e00824b29bbdf15a58168 Mon Sep 17 00:00:00 2001 From: John Doe Date: Thu, 14 Sep 2023 17:02:15 +0300 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Implemented=20new=20features=20and?= =?UTF-8?q?=20improved=20code=20quality.=20=F0=9F=9A=80=20Optimized=20perf?= =?UTF-8?q?ormance=20and=20fixed=20minor=20bugs.=20=F0=9F=8C=9F=20Added=20?= =?UTF-8?q?responsive=20design=20for=20a=20better=20user=20experience.=20?= =?UTF-8?q?=F0=9F=92=A1=20Refactored=20and=20organized=20code=20structure.?= =?UTF-8?q?=20=F0=9F=9B=A0=EF=B8=8F=20Resolved=20conflicts=20and=20updated?= =?UTF-8?q?=20dependencies.=20=F0=9F=94=A7=20Fixed=20issues=20reported=20i?= =?UTF-8?q?n=20the=20previous=20release.=20=F0=9F=93=9D=20Updated=20docume?= =?UTF-8?q?ntation=20and=20comments=20for=20clarity.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(car-listings)/TabFilters.tsx | 683 ++++++++++++++++++++++++++ 1 file changed, 683 insertions(+) create mode 100644 src/app/(car-listings)/TabFilters.tsx diff --git a/src/app/(car-listings)/TabFilters.tsx b/src/app/(car-listings)/TabFilters.tsx new file mode 100644 index 0000000..22869df --- /dev/null +++ b/src/app/(car-listings)/TabFilters.tsx @@ -0,0 +1,683 @@ +"use client"; + +import React, { Fragment, useState } from "react"; +import { Dialog, Popover, Transition } from "@headlessui/react"; +import NcInputNumber from "@/components/NcInputNumber"; +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 typeOfCar = [ + { name: "Small", description: "$68" }, + { name: "Medium", description: "$128" }, + { name: "Large", description: "$268" }, + { name: "SUV", description: "$268" }, + { name: "Van", description: "$268" }, + { name: "Luxury", description: "$268" }, +]; + +const carSpecifications = [ + { name: "With air conditioning" }, + { name: "Automatic transmission" }, + { name: "Manual transmission" }, + { name: "2 doors" }, + { name: "4+ doors" }, +]; + +// +const mileage = [{ name: "Unlimited" }, { name: "Limited" }]; +const supplier = [ + { name: "Alamo", defaultChecked: true }, + { name: "Avis", defaultChecked: true }, + { name: "Budget" }, + { name: "Dollar" }, +]; +const insurance = [ + { name: "No insurance", defaultChecked: true }, + { name: "Zero excess " }, + { name: "Inclusive" }, +]; + +const TabFilters = () => { + const [isOpenMoreFilter, setisOpenMoreFilter] = useState(false); + const [isOpenMoreFilterMobile, setisOpenMoreFilterMobile] = useState(false); + const [rangePrices, setRangePrices] = useState([0, 1000]); + const [isOnSale, setIsOnSale] = useState(true); + // + const closeModalMoreFilter = () => setisOpenMoreFilter(false); + const openModalMoreFilter = () => setisOpenMoreFilter(true); + // + const closeModalMoreFilterMobile = () => setisOpenMoreFilterMobile(false); + const openModalMoreFilterMobile = () => setisOpenMoreFilterMobile(true); + + const renderXClear = () => { + return ( + + + + + + ); + }; + + const renderTabsTypeOfCars = () => { + return ( + + {({ open, close }) => ( + <> + + Car type + + + + +
+
+ {typeOfCar.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 renderTabsGuestsAndBags = () => { + return ( + + {({ open, close }) => ( + <> + + Guests & Bags + + + + +
+
+ + +
+
+ + Clear + + + Apply + +
+
+ + + + )} + + ); + }; + + 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) => ( + + ))} +
+
+ ); + }; + + // Morefilter for mobile mode + const renderTabMobileFilter = () => { + return ( +
+
+ + Car filters (3) + + {renderXClear()} +
+ + + +
+ + + + + {/* This element is to trick the browser into centering the modal contents. */} + + +
+
+ + Experiences filters + + + + +
+ +
+
+ {/* ------ */} +
+

Type of car

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

+ Car specifications +

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

Range Prices

+
+
+
+ setRangePrices(e as number[])} + /> +
+ +
+
+ +
+
+ + $ + +
+ +
+
+
+ +
+
+ + $ + +
+ +
+
+
+
+
+
+ + {/* ------ */} +
+

+ Passengers & Bags +

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

Mileage

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

Supplier

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

Insurance

+
+ {renderMoreFilterItem(insurance)} +
+
+
+
+ +
+ + Clear + + + Apply + +
+
+ +
+ + +
+ ); + }; + + // + const renderTabMoreFilter = () => { + return ( +
+
+ More filters (3) + {renderXClear()} +
+ + + +
+ + + + + {/* This element is to trick the browser into centering the modal contents. */} + + +
+
+ + More filters + + + + +
+ +
+
+
+

+ Car specifications +

+
+ {renderMoreFilterItem(carSpecifications)} +
+
+
+

Mileage

+
+ {renderMoreFilterItem(mileage)} +
+
+
+

Supplier

+
+ {renderMoreFilterItem(supplier)} +
+
+
+

Insurance

+
+ {renderMoreFilterItem(insurance)} +
+
+
+
+ +
+ + Clear + + + Apply + +
+
+ +
+ + +
+ ); + }; + + return ( +
+
+ {renderTabsTypeOfCars()} + {renderTabsPriceRage()} + {renderTabsGuestsAndBags()} + {renderTabMoreFilter()} +
+
+ {renderTabMobileFilter()} + {renderTabOnSale()} +
+
+ ); +}; + +export default TabFilters;