65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import { Carousel } from "antd";
|
|
import { useNavigate } from "react-router-dom";
|
|
import styles from "./Banner.module.css";
|
|
import Button from "../Button/Button.tsx";
|
|
import banner_img1 from "../../assets/images/mainPage/ChatGPT-Image-Oct-1_-2025_-05_29_18-PM.png";
|
|
import banner_img2 from "../../assets/images/mainPage/296170994030930.jpg";
|
|
|
|
export interface SlideItem {
|
|
id: number;
|
|
image: string;
|
|
title: string;
|
|
subtitle: string;
|
|
description: string;
|
|
}
|
|
|
|
const slides: SlideItem[] = [
|
|
{
|
|
id: 1,
|
|
image: banner_img1,
|
|
title: "Производство",
|
|
subtitle: "Труб, фитингов, колен и отводов",
|
|
description: "для наружной и внутренней канализации",
|
|
},
|
|
{
|
|
id: 2,
|
|
image: banner_img2,
|
|
title: "Производство",
|
|
subtitle: "Труб, фитингов, колен и отводов",
|
|
description: "для наружной и внутренней канализации",
|
|
},
|
|
];
|
|
|
|
const BannerSlider: React.FC = () => {
|
|
const navigate = useNavigate();
|
|
|
|
const handleClick = () => {
|
|
navigate("/products");
|
|
};
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<Carousel autoplay dots className={styles.carousel}>
|
|
{slides.map((slide) => (
|
|
<div key={slide.id}>
|
|
<div className={styles.slide}>
|
|
<div className={styles.textBlock}>
|
|
<h2>{slide.title}</h2>
|
|
<h1>
|
|
{slide.subtitle}
|
|
<br /> {slide.description}
|
|
</h1>
|
|
<Button label="Смотреть каталог" onClick={handleClick} />
|
|
</div>
|
|
<img src={slide.image} alt="banner" className={styles.image} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Carousel>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BannerSlider;
|