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()}
+
+
+
+
+
+
+ );
+ };
+
+ //
+ const renderTabMoreFilter = () => {
+ return (
+
+
+ More filters (3)
+ {renderXClear()}
+
+
+
+
+
+
+ );
+ };
+
+ return (
+
+
+ {renderTabsTypeOfCars()}
+ {renderTabsPriceRage()}
+ {renderTabsGuestsAndBags()}
+ {renderTabMoreFilter()}
+
+
+ {renderTabMobileFilter()}
+ {renderTabOnSale()}
+
+
+ );
+};
+
+export default TabFilters;