hh-ui-components
Version:
26 lines • 2.4 kB
JavaScript
import React, { useRef } from "react";
import { Swiper } from "swiper/react";
import { Keyboard, Mousewheel, Navigation, Pagination } from "swiper";
import SwiperArrowLeft from "./widget/arrowLeft";
import SwiperArrowRight from "./widget/arrowRight";
import WeReccomendItem from "./WeReccomendItem";
// title, size, price, discountedPrice, quantity, img, color, tag, onClick
export var WeReccomend = function (_a) {
var recomProducts = _a.recomProducts, title = _a.title, color = _a.color, price = _a.price, discountedPrice = _a.discountedPrice, img = _a.img;
var swiperButtonPrev22 = useRef(null);
var swiperButtonNext22 = useRef(null);
return (React.createElement("div", { className: "mt-30 relative w-full rounded-[10px] mb-[30px] bg-white py-20 2xl:py-20-2xl swiper-custom-layout " },
React.createElement("div", { className: "relative flex justify-between px-20 2xl:px-20-2xl mb-[17.5px] 2xl:mb-[1.215vw]" },
React.createElement("button", { className: "swiperButtonPrev22 mr-10 h-4 w-4 2xl:w-[1.111vw] 2xl:h-[1.111vw] ".concat(recomProducts.length === 1 ? "swiper-button-disabled" : null, " "), ref: recomProducts.length <= 1 ? null : swiperButtonPrev22, "aria-label": "swiper-btn" },
React.createElement(SwiperArrowLeft, { className: "w-full h-full" })),
React.createElement("p", { className: "text-utility-large uppercase tracking-[0.08em] 2xl:text-utility-large-2xl " }, title),
React.createElement("button", { className: "swiperButtonNext22 h-4 w-4 2xl:w-[1.111vw] 2xl:h-[1.111vw] ".concat(recomProducts.length === 1 ? "swiper-button-disabled" : null), ref: recomProducts.length <= 1 ? null : swiperButtonNext22, "aria-label": "swiper-btn" },
React.createElement(SwiperArrowRight, { className: "w-full h-full" }))),
React.createElement(Swiper, { navigation: {
prevEl: swiperButtonPrev22.current,
nextEl: swiperButtonNext22.current
}, slidesPerView: recomProducts.length === 1 ? 0 : 1, spaceBetween: 4, loop: false, cssMode: true, pagination: false, modules: [Navigation, Pagination, Mousewheel, Keyboard], className: "relative" },
React.createElement(WeReccomendItem, { title: title, price: price, discountedPrice: discountedPrice, colors: color, img: img }))));
};
export default WeReccomend;
//# sourceMappingURL=WeReccomend.js.map