fix1007

src/components/index/BrandSelectionSection.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import React, { useState, useMemo, useRef } from "react";
 import { useRouter } from "next/router";
 import { useQuery } from "@apollo/client";
 import { GET_LAXIMO_BRANDS } from "@/lib/graphql";
 import { LaximoBrand } from "@/types/laximo";
+import { Combobox } from '@headlessui/react';
 
 const tabs = [
   "Техническое обслуживание",
@@ -15,7 +16,8 @@ type Brand = { name: string; code?: string };
 
 const BrandSelectionSection: React.FC = () => {
   const [activeTab, setActiveTab] = useState(0);
-  const [selectedBrand, setSelectedBrand] = useState<string>("");
+  const [selectedBrand, setSelectedBrand] = useState<Brand | null>(null);
+  const [brandQuery, setBrandQuery] = useState('');
   const router = useRouter();
 
   const { data, loading, error } = useQuery<{ laximoBrands: LaximoBrand[] }>(GET_LAXIMO_BRANDS, {
@@ -42,6 +44,12 @@ const BrandSelectionSection: React.FC = () => {
     console.warn('Laximo API недоступен, используются статические данные:', error.message);
   }
 
+  // Combobox фильтрация
+  const filteredBrands = useMemo(() => {
+    if (!brandQuery) return brands;
+    return brands.filter(b => b.name.toLowerCase().includes(brandQuery.toLowerCase()));
+  }, [brands, brandQuery]);
+
   const handleBrandClick = (brand: Brand) => {
     if (brand.code) {
       router.push(`/brands?selected=${brand.code}`);
@@ -53,7 +61,7 @@ const BrandSelectionSection: React.FC = () => {
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (selectedBrand) {
-      const found = brands.find(b => b.code === selectedBrand || b.name === selectedBrand);
+      const found = brands.find(b => b.code === selectedBrand.code || b.name === selectedBrand.name);
       if (found && found.code) {
         router.push(`/brands?selected=${found.code}`);
         return;
@@ -123,19 +131,44 @@ const BrandSelectionSection: React.FC = () => {
               <h1 className="heading-21">ПОДБОР АВТОЗАПЧАСТЕЙ ПО МАРКЕ АВТО</h1>
               <div className="form-block-4 w-form">
                 <form id="email-form" name="email-form" data-name="Email Form" method="post" data-wf-page-id="685be6dfd87db2e01cbdb7a2" data-wf-element-id="e673036c-0caf-d251-3b66-9ba9cb85064c" onSubmit={handleSubmit}>
-                  <select
-                    id="field-7"
-                    name="field-7"
-                    data-name="Field 7"
-                    className="select-copy w-select"
-                    value={selectedBrand}
-                    onChange={e => setSelectedBrand(e.target.value)}
-                  >
-                    <option value="">Марка</option>
-                    {brands.map((brand, idx) => (
-                      <option value={brand.code || brand.name} key={idx}>{brand.name}</option>
-                    ))}
-                  </select>
+                  <div style={{ width: 180,   marginBottom: 16 }}>
+                    <Combobox value={selectedBrand} onChange={setSelectedBrand} nullable>
+                      <div className="relative">
+                        <Combobox.Input
+                          className="w-full px-6 py-4 bg-white rounded border border-stone-300 text-sm text-gray-950 placeholder:text-neutral-500 outline-none focus:shadow-none focus:border-stone-300 transition-colors"
+                          displayValue={(brand: Brand | null) => brand?.name || ''}
+                          onChange={e => setBrandQuery(e.target.value)}
+                          placeholder="Марка"
+                          autoComplete="off"
+                        />
+                        <Combobox.Button className="absolute inset-y-0 right-0 flex items-center px-3 focus:outline-none w-12">
+                          <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 9l6 6 6-6" />
+                          </svg>
+                        </Combobox.Button>
+                        <Combobox.Options
+                          className="absolute left-0 top-full z-10 bg-white border-x border-b border-stone-300 rounded-b-lg shadow-lg w-full max-h-60 overflow-auto scrollbar-none"
+                          style={{ scrollbarWidth: 'none' }}
+                          data-hide-scrollbar
+                        >
+                          {filteredBrands.length === 0 && (
+                            <div className="px-6 py-4 text-gray-500">Бренды не найдены</div>
+                          )}
+                          {filteredBrands.map(brand => (
+                            <Combobox.Option
+                              key={brand.code || brand.name}
+                              value={brand}
+                              className={({ active, selected }) =>
+                                `px-6 py-4 cursor-pointer hover:!bg-[rgb(236,28,36)] hover:!text-white text-sm transition-colors ${selected ? 'bg-red-50 font-semibold text-gray-950' : 'text-neutral-500'}`
+                              }
+                            >
+                              {brand.name}
+                            </Combobox.Option>
+                          ))}
+                        </Combobox.Options>
+                      </div>
+                    </Combobox>
+                  </div>
                   <div className="div-block-10-copy">
                     <input type="submit" data-wait="Please wait..." className="button-3-copy w-button" value="Далее" />
                   </div>