Merge pull request 'fix: facettes search effectives' (#58) from fix/search-facets into main

src/app/carbets/_components/search-filters.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 
 import type { CarbetSearchFilters } from "@/lib/carbet-search";
+import { AMENITY_CATALOG } from "@/lib/amenities";
 
 type SearchFiltersProps = {
   filters: CarbetSearchFilters;
@@ -73,6 +74,48 @@ export function SearchFilters({ filters, rivers }: SearchFiltersProps) {
         />
       </label>
 
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium text-zinc-700">Budget max (€/nuit)</span>
+        <input
+          type="number"
+          name="priceMax"
+          min={1}
+          step="10"
+          defaultValue={filters.priceMax ?? ""}
+          placeholder="ex. 100"
+          className="rounded-md border border-zinc-300 px-3 py-2 text-zinc-900 focus:border-emerald-500 focus:outline-none"
+        />
+      </label>
+
+      <fieldset className="flex flex-col gap-1 text-sm sm:col-span-2 lg:col-span-5">
+        <legend className="font-medium text-zinc-700">Équipements souhaités</legend>
+        <div className="flex flex-wrap gap-2 pt-1">
+          {AMENITY_CATALOG.map((a) => {
+            const checked = (filters.amenities ?? []).includes(a.key);
+            return (
+              <label
+                key={a.key}
+                className={
+                  "flex cursor-pointer items-center gap-1 rounded-full border px-2.5 py-1 text-xs " +
+                  (checked
+                    ? "border-emerald-600 bg-emerald-50 text-emerald-900"
+                    : "border-zinc-300 bg-white text-zinc-700 hover:border-zinc-400")
+                }
+              >
+                <input
+                  type="checkbox"
+                  name="amenities"
+                  value={a.key}
+                  defaultChecked={checked}
+                  className="sr-only"
+                />
+                {a.label}
+              </label>
+            );
+          })}
+        </div>
+      </fieldset>
+
       <div className="flex items-end gap-2 sm:col-span-2 lg:col-span-5 lg:justify-end">
         <Link
           href="/carbets"