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

fix1707

Browse Source
This commit is contained in:
egortriston
2025-07-17 16:35:45 +03:00
parent 5fd2cf1b8c
commit 27d378154f
11 changed files with 376 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -111,12 +111,62 @@ const BestPriceSection: React.FC = () => {
<div className="text-block-58">Подборка лучших предложенийпо цене</div>
<a href="#" className="button-24 w-button">Показать все</a>
</div>
<div className="carousel-row">
<div className="carousel-row" style={{ position: 'relative' }}>
{/* Стили для стрелок как в ProductOfDayBanner, но без абсолютного позиционирования */}
<style>{`
.carousel-arrow {
width: 40px;
height: 40px;
border: none;
background: none;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.2s;
cursor: pointer;
margin: 0 8px;
}
.carousel-arrow-left {}
.carousel-arrow-right {}
.carousel-arrow .arrow-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.carousel-arrow:hover .arrow-circle,
.carousel-arrow:focus .arrow-circle {
background: #ec1c24;
}
.carousel-arrow .arrow-svg {
width: 20px;
height: 20px;
display: block;
transition: stroke 0.2s;
stroke: #222;
}
.carousel-arrow:hover .arrow-svg,
.carousel-arrow:focus .arrow-svg {
stroke: #fff;
}
.carousel-row {
display: flex;
align-items: center;
justify-content: flex-start;
}
`}</style>
<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>
<span className="arrow-circle">
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</button>
<div className="w-layout-hflex flex-block-121 carousel-scroll" ref={scrollRef}>
{bestPriceItems.map((item, i) => (
@ -124,10 +174,11 @@ const BestPriceSection: React.FC = () => {
))}
</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>
<span className="arrow-circle">
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</button>
</div>
</div>

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

@ -84,16 +84,66 @@ const NewArrivalsSection: React.FC = () => {
<h2 className="heading-4">Новое поступление</h2>
</div>
<div className="carousel-row">
{/* Стили для стрелок как в BestPriceSection и TopSalesSection */}
<style>{`
.carousel-arrow {
width: 40px;
height: 40px;
border: none;
background: none;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.2s;
cursor: pointer;
margin: 0 8px;
}
.carousel-arrow-left {}
.carousel-arrow-right {}
.carousel-arrow .arrow-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.carousel-arrow:hover .arrow-circle,
.carousel-arrow:focus .arrow-circle {
background: #ec1c24;
}
.carousel-arrow .arrow-svg {
width: 20px;
height: 20px;
display: block;
transition: stroke 0.2s;
stroke: #222;
}
.carousel-arrow:hover .arrow-svg,
.carousel-arrow:focus .arrow-svg {
stroke: #fff;
}
.carousel-row {
display: flex;
align-items: center;
justify-content: flex-start;
}
`}</style>
<button
className="carousel-arrow carousel-arrow-left"
onClick={scrollLeft}
aria-label="Прокрутить влево"
style={{ cursor: 'pointer' }}
>
<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>
<span className="arrow-circle">
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</button>
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
@ -149,10 +199,11 @@ const NewArrivalsSection: React.FC = () => {
aria-label="Прокрутить вправо"
style={{ cursor: 'pointer' }}
>
<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>
<span className="arrow-circle">
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</button>
</div>
</div>

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

@ -32,11 +32,61 @@ const NewsAndPromos = () => {
</div>
</div>
<div className="carousel-row">
{/* Стили для стрелок как в других секциях */}
<style>{`
.carousel-arrow {
width: 40px;
height: 40px;
border: none;
background: none;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.2s;
cursor: pointer;
margin: 0 8px;
}
.carousel-arrow-left {}
.carousel-arrow-right {}
.carousel-arrow .arrow-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.carousel-arrow:hover .arrow-circle,
.carousel-arrow:focus .arrow-circle {
background: #ec1c24;
}
.carousel-arrow .arrow-svg {
width: 20px;
height: 20px;
display: block;
transition: stroke 0.2s;
stroke: #222;
}
.carousel-arrow:hover .arrow-svg,
.carousel-arrow:focus .arrow-svg {
stroke: #fff;
}
.carousel-row {
display: flex;
align-items: center;
justify-content: flex-start;
}
`}</style>
<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>
<span className="arrow-circle">
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</button>
<div className="w-layout-hflex flex-block-6-copy-copy carousel-scroll" ref={scrollRef}>
<NewsCard
@ -69,10 +119,11 @@ const NewsAndPromos = () => {
/>
</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>
<span className="arrow-circle">
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</button>
</div>
</div>

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

@ -110,8 +110,13 @@ const ProductOfDaySection: React.FC = () => {
};
}
return null;
// Если нет ни одной картинки, возвращаем noimage.png
return {
url: '/images/noimage.png',
alt: product.name,
source: 'noimage'
};
};
// Обработчики для навигации по товарам дня
const handlePrevSlide = (e: React.MouseEvent) => {
@ -209,6 +214,11 @@ const ProductOfDaySection: React.FC = () => {
Parts Index
</div>
)}
{productImage.source === 'noimage' && (
<div className="absolute bottom-0 right-0 bg-gray-400 text-white text-xs px-2 py-1 rounded-tl">
Нет изображения
</div>
)}
</div>
)}
</div>

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

@ -143,11 +143,61 @@ const TopSalesSection: React.FC = () => {
<h2 className="heading-4">Топ продаж</h2>
</div>
<div className="carousel-row">
{/* Стили для стрелок как в BestPriceSection */}
<style>{`
.carousel-arrow {
width: 40px;
height: 40px;
border: none;
background: none;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.2s;
cursor: pointer;
margin: 0 8px;
}
.carousel-arrow-left {}
.carousel-arrow-right {}
.carousel-arrow .arrow-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.carousel-arrow:hover .arrow-circle,
.carousel-arrow:focus .arrow-circle {
background: #ec1c24;
}
.carousel-arrow .arrow-svg {
width: 20px;
height: 20px;
display: block;
transition: stroke 0.2s;
stroke: #222;
}
.carousel-arrow:hover .arrow-svg,
.carousel-arrow:focus .arrow-svg {
stroke: #fff;
}
.carousel-row {
display: flex;
align-items: center;
justify-content: flex-start;
}
`}</style>
<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>
<span className="arrow-circle">
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</button>
<div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
{activeTopSalesProducts.map((item: TopSalesProductData) => {
@ -177,10 +227,11 @@ const TopSalesSection: React.FC = () => {
})}
</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>
<span className="arrow-circle">
<svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</button>
</div>
</div>