retro-react/dist/cjs/components/carousel/Carousel.js

A React component library for building retro-style websites

"use strict";var e=require("../../_virtual/_tslib.js"),s=require("react"),r=require("../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js"),a=require("../../utils/classNames.js"),l=require("../../constants/commonClassNames.js"),t=require("./Carousel.styled.js");const i=s.forwardRef(((i,o)=>{var{id:u,className:n,children:c,interval:d=3e3,sx:m}=i,j=e.__rest(i,["id","className","children","interval","sx"]);const[C,h]=s.useState(0);s.useEffect((()=>{const e=setTimeout((()=>{h((e=>e===c.length-1?0:e+1))}),d);return()=>clearTimeout(e)}),[C,c,d]);const x=s.useCallback((()=>{h((e=>0===e?c.length-1:e-1))}),[c]),v=s.useCallback((()=>{h((e=>e===c.length-1?0:e+1))}),[c]);return r.jsxs(t.CarouselWrapper,Object.assign({ref:o,id:u,sx:m,className:a.classNames("carousel-root",n,l.default)},j,{children:[r.jsx(t.CarouselTrack,Object.assign({style:{transform:`translateX(-${100*C}%)`}},{children:s.Children.map(c,((e,s)=>r.jsx(t.CarouselItem,Object.assign({className:"carousel-item"},{children:e}),s)))}),void 0),r.jsx(t.CarouselNav,{children:s.Children.map(c,((e,s)=>r.jsx(t.CarouselDot,{isActive:s===C,onClick:()=>h(s),"aria-label":`Go to slide ${s+1}`},s)))},void 0),!j.hideArrows&&r.jsxs(s.Fragment,{children:[r.jsx(t.CarouselButton,{$position:"left",className:"carousel-button carousel-button-prev",onClick:x,"aria-label":"Previous slide"},void 0),r.jsx(t.CarouselButton,{$position:"right",className:"carousel-button carousel-button-next",onClick:v,"aria-label":"Next slide"},void 0)]},void 0)]}),void 0)}));i.displayName="Carousel",exports.Carousel=i;