feat: перенос vin в компоненты, добавление логики и исправления
This commit is contained in:
egortriston
39
src/components/vin/InfoVin.tsx
Normal file
39
src/components/vin/InfoVin.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React from "react";
|
||||
|
||||
const InfoVin = () => (
|
||||
<section className="section-info">
|
||||
<div className="w-layout-blockcontainer container info w-container">
|
||||
<div className="w-layout-vflex flex-block-9">
|
||||
<div className="w-layout-hflex flex-block-7">
|
||||
<a href="#" className="link-block w-inline-block">
|
||||
<div>Главная</div>
|
||||
</a>
|
||||
<div className="text-block-3">→</div>
|
||||
<a href="#" className="link-block w-inline-block">
|
||||
<div>Оригинальный каталог</div>
|
||||
</a>
|
||||
<div className="text-block-3">→</div>
|
||||
<a href="#" className="link-block-2 w-inline-block">
|
||||
<div>Audi Q7</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-8">
|
||||
<div className="w-layout-hflex flex-block-10">
|
||||
<h1 className="heading">Audi Q7</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-112">
|
||||
<div className="text-block-55">WAUZZZ4M6JD010702 · 2018 · SUQ(8A) · CVMD · 3000CC / 249hp / 183kW TDI CR</div>
|
||||
<div className="w-embed">
|
||||
{/* SVG icon */}
|
||||
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.1 13.5H9.89999V8.1H8.1V13.5ZM8.99999 6.3C9.25499 6.3 9.46889 6.2136 9.64169 6.0408C9.81449 5.868 9.90059 5.6544 9.89999 5.4C9.89939 5.1456 9.81299 4.932 9.64079 4.7592C9.46859 4.5864 9.25499 4.5 8.99999 4.5C8.745 4.5 8.53139 4.5864 8.35919 4.7592C8.187 4.932 8.1006 5.1456 8.1 5.4C8.0994 5.6544 8.1858 5.8683 8.35919 6.0417C8.53259 6.2151 8.74619 6.3012 8.99999 6.3ZM8.99999 18C7.755 18 6.585 17.7636 5.49 17.2908C4.395 16.818 3.4425 16.1769 2.6325 15.3675C1.8225 14.5581 1.1814 13.6056 0.709201 12.51C0.237001 11.4144 0.000601139 10.2444 1.13924e-06 9C-0.00059886 7.7556 0.235801 6.5856 0.709201 5.49C1.1826 4.3944 1.8237 3.4419 2.6325 2.6325C3.4413 1.8231 4.3938 1.182 5.49 0.7092C6.5862 0.2364 7.7562 0 8.99999 0C10.2438 0 11.4138 0.2364 12.51 0.7092C13.6062 1.182 14.5587 1.8231 15.3675 2.6325C16.1763 3.4419 16.8177 4.3944 17.2917 5.49C17.7657 6.5856 18.0018 7.7556 18 9C17.9982 10.2444 17.7618 11.4144 17.2908 12.51C16.8198 13.6056 16.1787 14.5581 15.3675 15.3675C14.5563 16.1769 13.6038 16.8183 12.51 17.2917C11.4162 17.7651 10.2462 18.0012 8.99999 18Z" fill="currentcolor" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default InfoVin;
|
||||
9
src/components/vin/KnotIn.tsx
Normal file
9
src/components/vin/KnotIn.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import React from "react";
|
||||
|
||||
const KnotIn = () => (
|
||||
<div className="knotin">
|
||||
<img src="/images/image-44.jpg" loading="lazy" alt="" className="image-26" />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default KnotIn;
|
||||
43
src/components/vin/KnotParts.tsx
Normal file
43
src/components/vin/KnotParts.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
|
||||
const parts = [
|
||||
{ n: 1, oem: "059198405B", name: "Фильтрующий элемент с проклад." },
|
||||
{ n: 2, oem: "N 10196103", name: "Винт с цилиндр. скруглённой головкой Torx" },
|
||||
{ n: 3, oem: "059117070J", name: "Уплотнитель" },
|
||||
{ n: 4, oem: "N 10124306", name: "Винт с плоской головкой и внутренним Torx" },
|
||||
{ n: 5, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 6, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 7, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 8, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 9, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 10, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 11, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 12, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 13, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 14, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 15, oem: "059117015K", name: "Масляный радиатор" },
|
||||
];
|
||||
|
||||
const KnotParts = () => (
|
||||
<div className="knot-parts">
|
||||
{parts.map((part, idx) => (
|
||||
<div className="w-layout-hflex knotlistitem" key={idx}>
|
||||
<div className="w-layout-hflex flex-block-116">
|
||||
<div className="nuberlist">{part.n}</div>
|
||||
<div className="oemnuber">{part.oem}</div>
|
||||
</div>
|
||||
<div className="partsname">{part.name}</div>
|
||||
<div className="w-layout-hflex flex-block-117">
|
||||
<a href="#" className="button-3 w-button">Цена</a>
|
||||
<div className="code-embed-16 w-embed">
|
||||
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.1 13.5H9.89999V8.1H8.1V13.5ZM8.99999 6.3C9.25499 6.3 9.46889 6.2136 9.64169 6.0408C9.81449 5.868 9.90059 5.6544 9.89999 5.4C9.89939 5.1456 9.81299 4.932 9.64079 4.7592C9.46859 4.5864 9.25499 4.5 8.99999 4.5C8.745 4.5 8.53139 4.5864 8.35919 4.7592C8.187 4.932 8.1006 5.1456 8.1 5.4C8.0994 5.6544 8.1858 5.8683 8.35919 6.0417C8.53259 6.2151 8.74619 6.3012 8.99999 6.3ZM8.99999 18C7.755 18 6.585 17.7636 5.49 17.2908C4.395 16.818 3.4425 16.1769 2.6325 15.3675C1.8225 14.5581 1.1814 13.6056 0.709201 12.51C0.237001 11.4144 0.000601139 10.2444 1.13924e-06 9C-0.00059886 7.7556 0.235801 6.5856 0.709201 5.49C1.1826 4.3944 1.8237 3.4419 2.6325 2.6325C3.4413 1.8231 4.3938 1.182 5.49 0.7092C6.5862 0.2364 7.7562 0 8.99999 0C10.2438 0 11.4138 0.2364 12.51 0.7092C13.6062 1.182 14.5587 1.8231 15.3675 2.6325C16.1763 3.4419 16.8177 4.3944 17.2917 5.49C17.7657 6.5856 18.0018 7.7556 18 9C17.9982 10.2444 17.7618 11.4144 17.2908 12.51C16.8198 13.6056 16.1787 14.5581 15.3675 15.3675C14.5563 16.1769 13.6038 16.8183 12.51 17.2917C11.4162 17.7651 10.2462 18.0012 8.99999 18Z" fill="currentcolor" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default KnotParts;
|
||||
40
src/components/vin/VinCategory.tsx
Normal file
40
src/components/vin/VinCategory.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import React from "react";
|
||||
|
||||
const categories = [
|
||||
"Детали для ТО",
|
||||
"Двигатель",
|
||||
"Топливная система",
|
||||
"Система охлаждения",
|
||||
"Система выпуска",
|
||||
"Трансмиссия",
|
||||
"Ходовая часть",
|
||||
"Рулевое управление",
|
||||
"Тормозная система",
|
||||
"Электрооборудование",
|
||||
"Отопление / кондиционирование",
|
||||
"Детали салона",
|
||||
"Детали кузова",
|
||||
"Дополнительное оборудование"
|
||||
];
|
||||
|
||||
interface VinCategoryProps {
|
||||
onCategoryClick?: (e: React.MouseEvent) => void;
|
||||
}
|
||||
|
||||
const VinCategory: React.FC<VinCategoryProps> = ({ onCategoryClick }) => (
|
||||
<div className="w-layout-vflex flex-block-14-copy-copy">
|
||||
{categories.map((cat, idx) => (
|
||||
<div className="div-block-131" key={idx} onClick={onCategoryClick} style={{ cursor: onCategoryClick ? 'pointer' : undefined }}>
|
||||
<div className="text-block-57">{cat}</div>
|
||||
<div className="w-embed">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="24" width="24" height="24" rx="12" transform="rotate(90 24 0)" fill="currentcolor"></rect>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M10.9303 17L10 16.0825L14.1395 12L10 7.91747L10.9303 7L16 12L10.9303 17Z" fill="white"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default VinCategory;
|
||||
20
src/components/vin/VinKnot.tsx
Normal file
20
src/components/vin/VinKnot.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import React from "react";
|
||||
|
||||
const VinKnot = () => (
|
||||
<div className="w-layout-vflex flex-block-14-copy-copy">
|
||||
<div className="knotinfo">
|
||||
<img src="/images/image-44.jpg" loading="lazy" alt="" className="image-26" />
|
||||
</div>
|
||||
<div className="knot-img">
|
||||
<h1 className="heading-19">Масляный фильтр с фланцем и масляным радиатором</h1>
|
||||
<div className="w-layout-hflex flex-block-115">
|
||||
<div className="oemnuber">059198405B</div>
|
||||
<div className="partsname">Фильтрующий элемент с проклад.</div>
|
||||
<a href="#" className="button-3 w-button">Показать цены</a>
|
||||
</div>
|
||||
<a href="#" className="showallparts w-button">Показать все</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default VinKnot;
|
||||
88
src/components/vin/VinLeftbar.tsx
Normal file
88
src/components/vin/VinLeftbar.tsx
Normal file
@ -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;
|
||||
Reference in New Issue
Block a user