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

A React component library for building retro-style websites

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