spb/toveli

1"use client";2import { useState } from "react";3import { useRouter } from "next/navigation";4import { SearchBar } from "@/components/search-bar";5export function HomeTabs() {6  const [tab, setTab] = useState<"achat" | "location" | "estimer">("achat"); const router = useRouter();7  return (8    <div>9      <div className="tv-tabs mb-3" role="tablist">{([["achat", "Acheter"], ["location", "Louer"], ["estimer", "Estimer"]] as const).map(([id, l]) => <button key={id} role="tab" type="button" aria-selected={tab === id} className="tv-tab" onClick={() => setTab(id)}>{l}</button>)}</div>10      {tab === "estimer" ? (11        <form onSubmit={(e) => { e.preventDefault(); const q = new FormData(e.currentTarget).get("q"); router.push(`/estimer?q=${encodeURIComponent(String(q ?? ""))}`); }} className="relative">12          <input name="q" className="tv-input py-3.5 text-base pr-28 !pl-4" placeholder="Adresse de la propriété à estimer" aria-label="Adresse à estimer" />13          <button type="submit" className="tv-btn tv-btn-primary absolute right-1.5 top-1/2 -translate-y-1/2">Estimer</button>14        </form>15      ) : <SearchBar market={tab} />}16      <div className="mt-3 flex gap-2 flex-wrap text-xs">{(tab === "location" ? [["Montréal", "ville"], ["Québec", "ville"], ["Laval", "ville"], ["Gatineau", "ville"], ["Sherbrooke", "ville"]] : [["Montréal", "ville"], ["Québec", "ville"], ["Laurentides", "region"], ["Montérégie", "region"], ["Estrie", "region"]]).map(([n, k]) => <a key={n} href={`/recherche?marche=${tab === "estimer" ? "achat" : tab}&${k}=${encodeURIComponent(n)}`} className="tv-chip">{n}</a>)}</div>17    </div>18  );19}20