84 lines
4.0 KiB
TypeScript
84 lines
4.0 KiB
TypeScript
import React, { useRef } from "react";
|
||
import NewsCard from "@/components/news/NewsCard";
|
||
import Link from "next/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>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default NewsAndPromos;
|