90 lines
2.2 KiB
TypeScript
90 lines
2.2 KiB
TypeScript
import React, { useRef, useState } from "react";
|
|
import styles from "./ContactProduct.module.css";
|
|
import Button from "../Button/Button";
|
|
import { Carousel } from "antd";
|
|
import ModalRequestForm from "../ModalRequestForm/ModalRequestForm";
|
|
const imageUrl = "https://sprint-pro.com/images/banners/slide1/t1.png";
|
|
import image1 from "../../assets/images/mainPage/_.jpg"
|
|
import image2 from "../../assets/images/mainPage/orig.jpg"
|
|
|
|
interface ProductionSlide {
|
|
id: number;
|
|
image: string;
|
|
label: string;
|
|
}
|
|
|
|
const slides: ProductionSlide[] = [
|
|
{
|
|
id: 1,
|
|
image: image1,
|
|
label: ".",
|
|
},
|
|
{
|
|
id: 2,
|
|
image: image2,
|
|
label: ".",
|
|
},
|
|
];
|
|
|
|
|
|
const ProductionBanner: React.FC = () => {
|
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const handleClick = () => {
|
|
console.log('Кнопка нажата!');
|
|
};
|
|
|
|
const carouselRef = useRef<any>(null);
|
|
|
|
console.log('ProductionBanner render, open:', open);
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<ModalRequestForm open={open} onClose={() => setOpen(false)} />
|
|
<div className={styles.left}>
|
|
<h2 className={styles.title}>КОНТРАКТНОЕ</h2>
|
|
<h1 className={styles.subtitle}>ПРОИЗВОДСТВО</h1>
|
|
|
|
<Button
|
|
label="СДЕЛАТЬ ЗАПРОС"
|
|
onClick={() => setOpen(true)}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.right}>
|
|
<Carousel
|
|
ref={carouselRef}
|
|
dots={false}
|
|
effect="scrollx"
|
|
className={styles.carousel}
|
|
>
|
|
{slides.map((s) => (
|
|
<div key={s.id} className={styles.slide}>
|
|
<img src={s.image} className={styles.image} alt="prod" />
|
|
<div className={styles.label}>{s.label}</div>
|
|
</div>
|
|
))}
|
|
</Carousel>
|
|
|
|
<div className={styles.arrows}>
|
|
<button
|
|
className={styles.arrow}
|
|
onClick={() => carouselRef.current?.prev()}
|
|
>
|
|
←
|
|
</button>
|
|
<button
|
|
className={styles.arrow}
|
|
onClick={() => carouselRef.current?.next()}
|
|
>
|
|
→
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
export default ProductionBanner; |