classify web

components/Filter/BudgetFilter.jsx

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { t } from "@/utils";
+import { useSearchParams } from "next/navigation";
+
+const BudgetFilter = () => {
+  const searchParams = useSearchParams();
+  const [budget, setBudget] = useState({
+    minPrice: searchParams.get("min_price") || "",
+    maxPrice: searchParams.get("max_price") || "",
+  });
+
+  const { minPrice, maxPrice } = budget;
+
+  const handleMinMaxPrice = () => {
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set("min_price", minPrice);
+    newSearchParams.set("max_price", maxPrice);
+    window.history.pushState(null, "", `/ads?${newSearchParams.toString()}`);
+  };
+
+
+  return (
+    <div className="flex flex-col gap-4 mt-4">
+      <form className="flex gap-4">
+        <Input
+          type="number"
+          placeholder={t("from")}
+          min={0}
+          onChange={(e) =>
+            setBudget((prev) => ({ ...prev, minPrice: Number(e.target.value) }))
+          }
+          value={minPrice}
+        />
+        <Input
+          type="number"
+          placeholder={t("to")}
+          min={0}
+          onChange={(e) =>
+            setBudget((prev) => ({ ...prev, maxPrice: Number(e.target.value) }))
+          }
+          value={maxPrice}
+        />
+      </form>
+      <Button
+        type="submit"
+        className="hover:bg-primary hover:text-white"
+        variant="outline"
+        disabled={minPrice == null || maxPrice == null || minPrice >= maxPrice}
+        onClick={handleMinMaxPrice}
+      >
+        {t("apply")}
+      </Button>
+    </div>
+  );
+};
+
+export default BudgetFilter;