retro-react
Version:
A React component library for building retro-style websites
2 lines (1 loc) • 1.19 kB
JavaScript
import{useState as e}from"react";import{jsxs as i,jsx as s}from"../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js";import{classNames as t}from"../../utils/classNames.js";import r from"../../constants/commonClassNames.js";import{MessageContainer as n,MessageSlide as a,PagerScreen as o,PageIndicator as c,ButtonGroup as l,PagerButton as m,PagerBody as d,PagerLabel as v,StatusIndicator as h}from"./Pager.styled.js";const g=g=>{let{messages:j,onButtonPress:p,variant:u="default",className:O,sx:b}=g;const[f,N]=e(0);return i(d,Object.assign({sx:b,$variant:u,className:t("pager-root",O,r)},{children:[s(v,{children:"RETROCOM-90"},void 0),s(h,{$variant:u},void 0),s(o,Object.assign({$variant:u},{children:s(n,{children:j.map(((e,i)=>s(a,Object.assign({visible:i===f,$variant:u},{children:e}),i)))},void 0)}),void 0),i(c,{children:[f+1," / ",j.length]},void 0),i(l,{children:[s(m,Object.assign({$variant:u,onClick:()=>{N((e=>(e-1+j.length)%j.length)),p&&p(f)}},{children:"◀ PREV"}),void 0),s(m,Object.assign({$variant:u,onClick:()=>{N((e=>(e+1)%j.length)),p&&p(f)}},{children:"NEXT ▶"}),void 0)]},void 0)]}),void 0)};g.displayName="Pager";export{g as Pager};