BivekiGroup/protekauto-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix1007

Browse Source
This commit is contained in:
egortriston
2025-07-10 17:21:51 +03:00
parent c703fc839a
commit 3b5defe3d9
13 changed files with 455 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/index/BestPriceSection.tsx
View File

@ -1,4 +1,4 @@
import React from "react";
import React, { useRef } from "react";
import { useQuery } from "@apollo/client";
import BestPriceItem from "../BestPriceItem";
import { GET_BEST_PRICE_PRODUCTS } from "../../lib/graphql";
@ -19,8 +19,22 @@ interface BestPriceProductData {
};
}
const SCROLL_AMOUNT = 340; // px, ширина одной карточки + отступ
const BestPriceSection: React.FC = () => {
const { data, loading, error } = useQuery(GET_BEST_PRICE_PRODUCTS);
const scrollRef = useRef<HTMLDivElement>(null);
const scrollLeft = () => {
if (scrollRef.current) {
scrollRef.current.scrollBy({ left: -SCROLL_AMOUNT, behavior: 'smooth' });
}
};
const scrollRight = () => {
if (scrollRef.current) {
scrollRef.current.scrollBy({ left: SCROLL_AMOUNT, behavior: 'smooth' });
}
};
if (loading) {
return (
@ -97,10 +111,24 @@ const BestPriceSection: React.FC = () => {
<div className="text-block-58">Подборка лучших предложенийпо цене</div>
<a href="#" className="button-24 w-button">Показать все</a>
</div>
<div className="w-layout-hflex flex-block-121">
{bestPriceItems.map((item, i) => (
<BestPriceItem key={i} {...item} />
))}
<div className="carousel-row">
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<div className="w-layout-hflex flex-block-121 carousel-scroll" ref={scrollRef}>
{bestPriceItems.map((item, i) => (
<BestPriceItem key={i} {...item} />
))}
</div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
</div>
</div>

65
src/components/index/BrandSelectionSection.tsx
View File

@ -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>

61
src/components/index/NewArrivalsSection.tsx
View File

@ -1,4 +1,4 @@
import React from "react";
import React, { useRef } from "react";
import ArticleCard from "../ArticleCard";
import { PartsAPIArticle } from "@/types/partsapi";
@ -36,21 +36,52 @@ const newArrivalsArticles: PartsAPIArticle[] = [
const imagePath = "images/162615.webp";
const NewArrivalsSection: React.FC = () => (
<section className="main">
<div className="w-layout-blockcontainer container w-container">
<div className="w-layout-vflex inbt">
<div className="w-layout-hflex flex-block-31">
<h2 className="heading-4">Новое поступление</h2>
</div>
<div className="w-layout-hflex core-product-search">
{newArrivalsArticles.map((article, i) => (
<ArticleCard key={article.artId || i} article={{ ...article, artId: article.artId }} index={i} image={imagePath} />
))}
const SCROLL_AMOUNT = 340; // px, ширина одной карточки + отступ
const NewArrivalsSection: React.FC = () => {
const scrollRef = useRef<HTMLDivElement>(null);
const scrollLeft = () => {
if (scrollRef.current) {
scrollRef.current.scrollBy({ left: -SCROLL_AMOUNT, behavior: 'smooth' });
}
};
const scrollRight = () => {
if (scrollRef.current) {
scrollRef.current.scrollBy({ left: SCROLL_AMOUNT, behavior: 'smooth' });
}
};
return (
<section className="main">
<div className="w-layout-blockcontainer container w-container">
<div className="w-layout-vflex inbt">
<div className="w-layout-hflex flex-block-31">
<h2 className="heading-4">Новое поступление</h2>
</div>
<div className="carousel-row">
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
{newArrivalsArticles.map((article, i) => (
<ArticleCard key={article.artId || i} article={{ ...article, artId: article.artId }} index={i} image={imagePath} />
))}
</div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
);
</section>
);
};
export default NewArrivalsSection;

121
src/components/index/NewsAndPromos.tsx
View File

@ -1,53 +1,84 @@
import React from "react";
import React, { useRef } from "react";
import NewsCard from "@/components/news/NewsCard";
import Link from "next/link";
const NewsAndPromos = () => (
<section className="main">
<div className="w-layout-blockcontainer container w-container">
<div className="w-layout-vflex news-index-block">
<div className="w-layout-hflex flex-block-31">
<h2 className="heading-4">Новости и акции</h2>
<div className="w-layout-hflex flex-block-29">
<Link href="/news" className="text-block-18" style={{display: 'flex', alignItems: 'center'}}>
Ко всем новостям
<img src="/images/Arrow_right.svg" loading="lazy" alt="" style={{marginLeft: 8}} />
</Link>
const SCROLL_AMOUNT = 340; // px, ширина одной карточки + отступ
const NewsAndPromos = () => {
const scrollRef = useRef<HTMLDivElement>(null);
const scrollLeft = () => {
if (scrollRef.current) {
scrollRef.current.scrollBy({ left: -SCROLL_AMOUNT, behavior: 'smooth' });
}
};
const scrollRight = () => {
if (scrollRef.current) {
scrollRef.current.scrollBy({ left: SCROLL_AMOUNT, behavior: 'smooth' });
}
};
return (
<section className="main">
<div className="w-layout-blockcontainer container w-container">
<div className="w-layout-vflex news-index-block">
<div className="w-layout-hflex flex-block-31">
<h2 className="heading-4">Новости и акции</h2>
<div className="w-layout-hflex flex-block-29">
<Link href="/news" className="text-block-18" style={{display: 'flex', alignItems: 'center'}}>
Ко всем новостям
<img src="/images/Arrow_right.svg" loading="lazy" alt="" style={{marginLeft: 8}} />
</Link>
</div>
</div>
<div className="carousel-row">
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<div className="w-layout-hflex flex-block-6-copy-copy carousel-scroll" ref={scrollRef}>
<NewsCard
title="Kia Syros будет выделяться необычным стилем"
description="Компания Kia готова представить новый кроссовер Syros"
category="Новости компании"
date="17.12.2024"
image="/images/news_img.png"
/>
<NewsCard
title="Kia Syros будет выделяться необычным стилем"
description="Компания Kia готова представить новый кроссовер Syros"
category="Новости компании"
date="17.12.2024"
image="/images/news_img.png"
/>
<NewsCard
title="Kia Syros будет выделяться необычным стилем"
description="Компания Kia готова представить новый кроссовер Syros"
category="Новости компании"
date="17.12.2024"
image="/images/news_img.png"
/>
<NewsCard
title="Kia Syros будет выделяться необычным стилем"
description="Компания Kia готова представить новый кроссовер Syros"
category="Новости компании"
date="17.12.2024"
image="/images/news_img.png"
/>
</div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
</div>
<div className="w-layout-hflex flex-block-6-copy-copy">
<NewsCard
title="Kia Syros будет выделяться необычным стилем"
description="Компания Kia готова представить новый кроссовер Syros"
category="Новости компании"
date="17.12.2024"
image="/images/news_img.png"
/>
<NewsCard
title="Kia Syros будет выделяться необычным стилем"
description="Компания Kia готова представить новый кроссовер Syros"
category="Новости компании"
date="17.12.2024"
image="/images/news_img.png"
/>
<NewsCard
title="Kia Syros будет выделяться необычным стилем"
description="Компания Kia готова представить новый кроссовер Syros"
category="Новости компании"
date="17.12.2024"
image="/images/news_img.png"
/>
<NewsCard
title="Kia Syros будет выделяться необычным стилем"
description="Компания Kia готова представить новый кроссовер Syros"
category="Новости компании"
date="17.12.2024"
image="/images/news_img.png"
/>
</div>
</div>
</div>
</section>
);
</section>
);
};
export default NewsAndPromos;

4
src/components/index/ProductOfDaySection.tsx
View File

@ -236,11 +236,11 @@ const ProductOfDaySection: React.FC = () => {
{product.name}
</div>
{/* Счетчик товаров если их больше одного */}
{activeProducts.length > 1 && (
{/* {activeProducts.length > 1 && (
<div className="text-xs text-gray-500 mt-2">
{currentSlide + 1} из {activeProducts.length}
</div>
)}
)} */}
</div>
{productImage && (

132
src/components/index/TopSalesSection.tsx
View File

@ -1,4 +1,4 @@
import React from "react";
import React, { useRef } from "react";
import { useQuery } from "@apollo/client";
import TopSalesItem from "../TopSalesItem";
import { GET_TOP_SALES_PRODUCTS } from "../../lib/graphql";
@ -18,8 +18,22 @@ interface TopSalesProductData {
};
}
const SCROLL_AMOUNT = 340; // px, ширина одной карточки + отступ
const TopSalesSection: React.FC = () => {
const { data, loading, error } = useQuery(GET_TOP_SALES_PRODUCTS);
const scrollRef = useRef<HTMLDivElement>(null);
const scrollLeft = () => {
if (scrollRef.current) {
scrollRef.current.scrollBy({ left: -SCROLL_AMOUNT, behavior: 'smooth' });
}
};
const scrollRight = () => {
if (scrollRef.current) {
scrollRef.current.scrollBy({ left: SCROLL_AMOUNT, behavior: 'smooth' });
}
};
if (loading) {
return (
@ -29,8 +43,22 @@ const TopSalesSection: React.FC = () => {
<div className="w-layout-hflex flex-block-31">
<h2 className="heading-4">Топ продаж</h2>
</div>
<div className="w-layout-hflex core-product-search">
<div className="text-block-58">Загрузка...</div>
<div className="carousel-row">
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
<div className="text-block-58">Загрузка...</div>
</div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
</div>
</div>
@ -47,8 +75,22 @@ const TopSalesSection: React.FC = () => {
<div className="w-layout-hflex flex-block-31">
<h2 className="heading-4">Топ продаж</h2>
</div>
<div className="w-layout-hflex core-product-search">
<div className="text-block-58">Ошибка загрузки</div>
<div className="carousel-row">
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
<div className="text-block-58">Ошибка загрузки</div>
</div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
</div>
</div>
@ -70,8 +112,22 @@ const TopSalesSection: React.FC = () => {
<div className="w-layout-hflex flex-block-31">
<h2 className="heading-4">Топ продаж</h2>
</div>
<div className="w-layout-hflex core-product-search">
<div className="text-block-58">Нет товаров в топ продаж</div>
<div className="carousel-row">
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
<div className="text-block-58">Нет товаров в топ продаж</div>
</div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
</div>
</div>
@ -86,32 +142,46 @@ const TopSalesSection: React.FC = () => {
<div className="w-layout-hflex flex-block-31">
<h2 className="heading-4">Топ продаж</h2>
</div>
<div className="w-layout-hflex core-product-search">
{activeTopSalesProducts.map((item: TopSalesProductData) => {
const product = item.product;
const price = product.retailPrice
? `от ${product.retailPrice.toLocaleString('ru-RU')} ₽`
: 'По запросу';
const image = product.images && product.images.length > 0
? product.images[0].url
: '/images/162615.webp'; // Fallback изображение
<div className="carousel-row">
<button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
{activeTopSalesProducts.map((item: TopSalesProductData) => {
const product = item.product;
const price = product.retailPrice
? `от ${product.retailPrice.toLocaleString('ru-RU')} ₽`
: 'По запросу';
const image = product.images && product.images.length > 0
? product.images[0].url
: '/images/162615.webp'; // Fallback изображение
const title = product.name;
const brand = product.brand || 'Неизвестный бренд';
const title = product.name;
const brand = product.brand || 'Неизвестный бренд';
return (
<TopSalesItem
key={item.id}
image={image}
price={price}
title={title}
brand={brand}
article={product.article}
productId={product.id}
/>
);
})}
return (
<TopSalesItem
key={item.id}
image={image}
price={price}
title={title}
brand={brand}
article={product.article}
productId={product.id}
/>
);
})}
</div>
<button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
<path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
</div>
</div>