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

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>