retro-react/dist/cjs/components/pager/Pager.js

A React component library for building retro-style websites

"use strict";var e=require("react"),s=require("../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js"),a=require("../../utils/classNames.js"),r=require("../../constants/commonClassNames.js"),i=require("./Pager.styled.js");const t=t=>{let{messages:n,onButtonPress:o,variant:c="default",className:l,sx:d}=t;const[g,u]=e.useState(0);return s.jsxs(i.PagerBody,Object.assign({sx:d,$variant:c,className:a.classNames("pager-root",l,r.default)},{children:[s.jsx(i.PagerLabel,{children:"RETROCOM-90"},void 0),s.jsx(i.StatusIndicator,{$variant:c},void 0),s.jsx(i.PagerScreen,Object.assign({$variant:c},{children:s.jsx(i.MessageContainer,{children:n.map(((e,a)=>s.jsx(i.MessageSlide,Object.assign({visible:a===g,$variant:c},{children:e}),a)))},void 0)}),void 0),s.jsxs(i.PageIndicator,{children:[g+1," / ",n.length]},void 0),s.jsxs(i.ButtonGroup,{children:[s.jsx(i.PagerButton,Object.assign({$variant:c,onClick:()=>{u((e=>(e-1+n.length)%n.length)),o&&o(g)}},{children:"◀ PREV"}),void 0),s.jsx(i.PagerButton,Object.assign({$variant:c,onClick:()=>{u((e=>(e+1)%n.length)),o&&o(g)}},{children:"NEXT ▶"}),void 0)]},void 0)]}),void 0)};t.displayName="Pager",exports.Pager=t;