search filters in modal, todo mobile

src/components/UnitTypesSelect.tsx

@@ -1,30 +1,27 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from "react";
-import { Filters } from "./SearchFilters";
 import clsx from "clsx";
-import { useSearchParams } from "react-router";
 
 function UnitTypesSelect({
-  filters,
+  unitTypes,
   onSelect,
+  defaultSelected = [],
 }: {
-  filters: Filters;
+  unitTypes: string[];
   onSelect: (unitTypes: string[]) => void;
+  defaultSelected: string[];
 }) {
-  const [selectedUnitTypes, setSelectedUnitTypes] = useState<string[]>([]);
+  const [selectedUnitTypes, setSelectedUnitTypes] =
+    useState<string[]>(defaultSelected);
 
-  const [searchParams, setSearchParams] = useSearchParams();
+  useEffect(() => setSelectedUnitTypes(defaultSelected), [defaultSelected]);
 
-  useEffect(() => onSelect(selectedUnitTypes), [onSelect, selectedUnitTypes]);
-
-  useEffect(() => {
-    const unitTypesValue = searchParams.getAll("unitTypes");
-    if (unitTypesValue) setSelectedUnitTypes(unitTypesValue);
-  }, [searchParams]);
+  useEffect(() => onSelect(selectedUnitTypes), [selectedUnitTypes]);
 
   return (
     <div className="flex 2xl:gap-[0.556vw] gap-2">
-      {filters.unitTypes.map((unitType) => (
-        <div
+      {unitTypes.map((unitType) => (
+        <p
           key={unitType}
           onClick={() => {
             setSelectedUnitTypes((prev) =>
@@ -32,22 +29,16 @@ function UnitTypesSelect({
                 ? prev.filter((type) => type !== unitType)
                 : [...prev, unitType]
             );
-            setSearchParams((prev) => {
-              if (prev.getAll("unitTypes").includes(unitType))
-                prev.delete("unitTypes", unitType);
-              else prev.append("unitTypes", unitType);
-              return prev;
-            });
           }}
           className={clsx(
-            "2xl:px-[1.389vw] 2xl:py-[0.833vw] px-5 py-3 2xl:rounded-[2.778vw] rounded-[40px] 2xl:ring-[0.069vw] ring transition-[box-shadow] cursor-pointer",
+            "2xl:px-[1.389vw] 2xl:py-[0.833vw] px-5 py-3 2xl:rounded-[2.778vw] rounded-[40px] 2xl:ring-[0.069vw] ring transition-[box-shadow] cursor-pointer text-s",
             selectedUnitTypes.includes(unitType)
               ? "ring-[#00BED7]"
-              : "ring-[#E2E2DC]"
+              : "ring-[#E2E2DC] text-[#0D1922]/70"
           )}
         >
           {unitType}
-        </div>
+        </p>
       ))}
     </div>
   );