@codeworker.br/govbr-tw-react/dist/components/Carousel/index.js

Biblioteca de componentes React usando Tailwind CSS que implementa o Padrão Digital de Governo.

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import carouselButtonsVariants from "./variants";
import carouselIndicatorActive from "./variants-indicator-active";
import carouselIndicatorDefault from "./variants-indicator-default";
import { useState } from "react";
import React from "react";
import { cn } from "../../libs/utils";
import BASE_CLASSNAMES from "../../config/baseClassNames";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft, faChevronRight, } from "@fortawesome/free-solid-svg-icons";
const Carousel = (_a) => {
    var { children, className, height = "h-full", width = "w-full", variant = "light" } = _a, props = __rest(_a, ["children", "className", "height", "width", "variant"]);
    const childrenArray = React.Children.toArray(children);
    const [slide, setSlide] = useState(0);
    const nextSlide = () => {
        setSlide(slide === childrenArray.length - 1 ? 0 : slide + 1);
    };
    const prevSlide = () => {
        setSlide(slide === 0 ? childrenArray.length - 1 : slide - 1);
    };
    return (_jsx("div", Object.assign({ className: cn(BASE_CLASSNAMES.carousel.root, "grid grid-rows-[1fr] p-3", className) }, props, { children: _jsxs("div", { className: cn(BASE_CLASSNAMES.carousel.holder, "relative overflow-hidden", height, width), children: [_jsx("div", { className: cn("flex transition-transform duration-500 ease-in-out", height, width), style: {
                        transform: `translateX(-${slide * 100}%)`,
                    }, children: childrenArray.map((child, index) => (_jsx("div", { className: cn(BASE_CLASSNAMES.carousel.holder, "flex-shrink-0 justify-center items-center flex", height, width), children: child }, `carousel-${index}`))) }), _jsx("button", { onClick: prevSlide, className: cn(carouselButtonsVariants({ variant }), "left-0"), children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }), _jsx("button", { onClick: nextSlide, className: cn(carouselButtonsVariants({ variant }), "right-0"), children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }), _jsx("div", { className: "flex gap-2 justify-center p-3 absolute bottom-0 w-full bg-gov", children: childrenArray.map((_, idx) => (_jsx("button", { className: `${slide === idx
                            ? carouselIndicatorActive({ variant })
                            : carouselIndicatorDefault({ variant })}`, onClick: () => setSlide(idx) }, idx))) })] }) })));
};
export { Carousel };