retro-react
Version:
A React component library for building retro-style websites
2 lines (1 loc) • 1.95 kB
JavaScript
import{__rest as e}from"../../_virtual/_tslib.js";import{forwardRef as t}from"react";import{jsx as i}from"../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js";import{classNames as s}from"../../utils/classNames.js";import o from"../../utils/getColorScheme.js";import{SevenSegmentDisplayContainer as r}from"./SevenSegmentDisplay.styled.js";const a=[["a","b","c","d","e","f"],["b","c"],["a","b","g","e","d"],["a","b","g","c","d"],["f","g","b","c"],["a","f","g","c","d"],["a","f","g","e","c","d"],["a","b","c"],["a","b","c","d","e","f","g"],["a","b","c","d","f","g"]],l={a:{top:0,left:"10%",width:"80%",height:"10%"},b:{top:"10%",right:0,width:"10%",height:"40%"},c:{bottom:"10%",right:0,width:"10%",height:"40%"},d:{bottom:0,left:"10%",width:"80%",height:"10%"},e:{bottom:"10%",left:0,width:"10%",height:"40%"},f:{top:"10%",left:0,width:"10%",height:"40%"},g:{top:"45%",left:"10%",width:"80%",height:"10%"}},m=t(((t,m)=>{var{className:c,value:n=0,segmentThickness:d="none",color:h="black",size:g="medium",sx:p}=t,b=e(t,["className","value","segmentThickness","color","size","sx"]);const f=n.toString().split("").filter((e=>e.match(/[0-9]/))),u={small:16,medium:32,large:64}[g],x={thin:16===u?"2px":32===u?"3px":"5px",thick:16===u?"3px":32===u?"4px":"8px",none:"0px"}[d];return i(r,Object.assign({className:s("seven-segment-display-root",c),ref:m,sx:p},b,{children:f.map(((e,t)=>{const s=a[Number(e)];return i("div",Object.assign({className:"seven-segment-display-digit",style:{display:"inline-block",position:"relative",width:`${u}px`,height:2*u+"px"}},{children:Object.keys(l).map((r=>i("div",{className:"seven-segment-display-segment",style:Object.assign(Object.assign({},l[r]),{position:"absolute",backgroundColor:o(h),opacity:s.includes(r)?1:.1,border:`${x} solid ${o(h)}`,boxSizing:"border-box"})},`retro-display-${e}-${t}-${r}`)))}),`retro-display-${e}-${t}`)}))}),void 0)}));export{m as SevenSegmentDisplay};