Создание прототипа главной страницы home-new, изменение стилей на остальных страницах. Требуется дальнейшее тестирование. логика выбора авто сделана
This commit is contained in:
egortriston
158
src/components/index/BrandSelectionSection.tsx
Normal file
158
src/components/index/BrandSelectionSection.tsx
Normal file
@ -0,0 +1,158 @@
|
||||
import React, { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useQuery } from "@apollo/client";
|
||||
import { GET_LAXIMO_BRANDS } from "@/lib/graphql";
|
||||
import { LaximoBrand } from "@/types/laximo";
|
||||
|
||||
const tabs = [
|
||||
"Техническое обслуживание",
|
||||
"Легковые",
|
||||
"Грузовые",
|
||||
"Коммерческие",
|
||||
];
|
||||
|
||||
type Brand = { name: string; code?: string };
|
||||
|
||||
const BrandSelectionSection: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
const [selectedBrand, setSelectedBrand] = useState<string>("");
|
||||
const router = useRouter();
|
||||
|
||||
const { data, loading, error } = useQuery<{ laximoBrands: LaximoBrand[] }>(GET_LAXIMO_BRANDS, {
|
||||
errorPolicy: 'all'
|
||||
});
|
||||
|
||||
const staticBrands: Brand[] = [
|
||||
{ name: "Audi" },
|
||||
{ name: "BMW" },
|
||||
{ name: "Cadillac" },
|
||||
{ name: "Chevrolet" },
|
||||
{ name: "Citroen" },
|
||||
{ name: "Fiat" },
|
||||
{ name: "Mazda" }
|
||||
];
|
||||
|
||||
let brands: Brand[] = staticBrands;
|
||||
if (data?.laximoBrands && data.laximoBrands.length > 0) {
|
||||
brands = data.laximoBrands.map(brand => ({
|
||||
name: brand.name,
|
||||
code: brand.code
|
||||
}));
|
||||
} else if (error) {
|
||||
console.warn('Laximo API недоступен, используются статические данные:', error.message);
|
||||
}
|
||||
|
||||
const handleBrandClick = (brand: Brand) => {
|
||||
if (brand.code) {
|
||||
router.push(`/brands?selected=${brand.code}`);
|
||||
} else {
|
||||
console.warn('Brand code not available for', brand.name);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (selectedBrand) {
|
||||
const found = brands.find(b => b.code === selectedBrand || b.name === selectedBrand);
|
||||
if (found && found.code) {
|
||||
router.push(`/brands?selected=${found.code}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
router.push("/brands");
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<section>
|
||||
<div className="w-layout-blockcontainer container w-container">
|
||||
<div className="w-layout-vflex inbt">
|
||||
<h2 className="heading-4">Подбор по маркам</h2>
|
||||
<div className="text-center">Загрузка брендов...</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="main">
|
||||
<div className="w-layout-blockcontainer container w-container">
|
||||
<div className="w-layout-vflex inbt">
|
||||
<h2 className="heading-4">Подбор по маркам</h2>
|
||||
<div className="w-layout-hflex flex-block-6-copy">
|
||||
<div className="w-layout-hflex brandsortb">
|
||||
<div className="w-layout-hflex tabson">
|
||||
{tabs.map((tab, idx) => (
|
||||
<div
|
||||
className={activeTab === idx ? "tab_c tab_card-activ" : "tab_c tab_card"}
|
||||
key={idx}
|
||||
onClick={() => setActiveTab(idx)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
{tab}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="w-layout-hflex brandsort">
|
||||
{[...Array(5)].map((_, colIdx) => (
|
||||
<div className="w-layout-vflex flex-block-26" key={colIdx}>
|
||||
{brands.slice(colIdx * Math.ceil(brands.length / 5), (colIdx + 1) * Math.ceil(brands.length / 5)).map((brand, idx) => (
|
||||
<button
|
||||
onClick={() => handleBrandClick(brand)}
|
||||
className="link-block-6 w-inline-block text-left"
|
||||
key={idx}
|
||||
style={{ background: 'none', border: 'none', padding: 0 }}
|
||||
>
|
||||
<div className="indexbrandblock">{brand.name}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => router.push('/brands')}
|
||||
className="w-layout-hflex flex-block-29 cursor-pointer hover:opacity-80 transition-opacity"
|
||||
style={{ background: 'none', border: 'none', padding: 0 }}
|
||||
>
|
||||
<div className="text-block-18">Все марки</div>
|
||||
<img src="/images/Arrow_right.svg" loading="lazy" alt="Стрелка вправо" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="w-layout-vflex flex-block-124">
|
||||
<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 className="div-block-10-copy">
|
||||
<input type="submit" data-wait="Please wait..." className="button-3-copy w-button" value="Далее" />
|
||||
</div>
|
||||
</form>
|
||||
<div className="w-form-done">
|
||||
<div>Thank you! Your submission has been received!</div>
|
||||
</div>
|
||||
<div className="w-form-fail">
|
||||
<div>Oops! Something went wrong while submitting the form.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default BrandSelectionSection;
|
||||
Reference in New Issue
Block a user