feat: перенос vin в компоненты, добавление логики и исправления

2025-06-27 17:31:48 +03:00
parent 855018bd6c
commit c5470df33e
93 changed files with 9449 additions and 1829 deletions
--- a/src/components/vin/VinLeftbar.tsx
+++ b/src/components/vin/VinLeftbar.tsx
@ -0,0 +1,88 @@
+import React, { useState } from "react";
+
+const dropdownTitles = [
+  "Детали для ТО",
+  "Двигатель",
+  "Топливная система",
+  "Система охлаждения",
+  "Система выпуска",
+  "Трансмиссия",
+  "Ходовая часть",
+  "Рулевое управление",
+  "Тормозная система",
+  "Электрооборудование",
+  "Отопление / кондиционирование",
+  "Детали салона",
+  "Детали кузова",
+  "Дополнительное оборудование"
+];
+
+const VinLeftbar = () => {
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  const handleToggle = (idx: number) => {
+    setOpenIndex(openIndex === idx ? null : idx);
+  };
+
+  return (
+    <div className="w-layout-vflex vinleftbar">
+      <div className="div-block-2">
+        <div className="form-block w-form">
+          <form id="wf-form-search" name="wf-form-search" data-name="search" action="http://search" method="post" className="form" data-wf-page-id="685d5478c4ebd5c8793f8c54" data-wf-element-id="14d3a852-00ba-b161-8849a97059b3785d">
+            <a href="#" className="link-block-3 w-inline-block">
+              <div className="code-embed-6 w-embed">
+                {/* SVG */}
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M17.5 17.5L13.8834 13.8833" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
+                  <path d="M9.16667 15.8333C12.8486 15.8333 15.8333 12.8486 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
+                </svg>
+              </div>
+            </a>
+            <input className="text-field w-input" maxLength={256} name="Search" data-name="Search" placeholder="Поиск по названию детали" type="text" id="Search-4" required />
+          </form>
+          <div className="success-message w-form-done">
+            <div>Thank you! Your submission has been received!</div>
+          </div>
+          <div className="error-message w-form-fail">
+            <div>Oops! Something went wrong while submitting the form.</div>
+          </div>
+        </div>
+      </div>
+      <div className="w-layout-vflex flex-block-113">
+        <div className="w-layout-hflex flex-block-114">
+          <a href="#" className="button-3 w-button">Узлы</a>
+          <a href="#" className="button-23 w-button">От производителя</a>
+        </div>
+        {/* Dropdowns start */}
+        {dropdownTitles.map((title, idx) => {
+          const isOpen = openIndex === idx;
+          return (
+            <div
+              key={idx}
+              data-hover="false"
+              data-delay="0"
+              className={`dropdown-4 w-dropdown${isOpen ? " w--open" : ""}`}
+            >
+              <div
+                className={`dropdown-toggle-3 w-dropdown-toggle${isOpen ? " w--open" : ""}`}
+                onClick={() => handleToggle(idx)}
+                style={{ cursor: "pointer" }}
+              >
+                <div className="w-icon-dropdown-toggle"></div>
+                <div className="text-block-56">{title}</div>
+              </div>
+              <nav className={`dropdown-list-4 w-dropdown-list${isOpen ? " w--open" : ""}`}>
+                <a href="#" className="dropdown-link-3 w-dropdown-link">Link 1</a>
+                <a href="#" className="dropdown-link-3 w-dropdown-link">Link 2</a>
+                <a href="#" className="dropdown-link-3 w-dropdown-link">Link 3</a>
+              </nav>
+            </div>
+          );
+        })}
+        {/* Dropdowns end */}
+      </div>
+    </div>
+  );
+};
+
+export default VinLeftbar;