retro-react
Version:
A React component library for building retro-style websites
2 lines (1 loc) • 1.06 kB
JavaScript
"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"),i=require("../../constants/commonClassNames.js"),o=require("./Marquee.styled.js");const t=s.forwardRef(((t,u)=>{var{id:c,className:n,children:d,size:l="medium",color:m="#000000",pauseOnHover:p=!1,speed:q="10s",gap:j="1rem",sx:v}=t,$=e.__rest(t,["id","className","children","size","color","pauseOnHover","speed","gap","sx"]);const[x,N]=s.useState(!1);return r.jsxs(o.MarqueeWrapper,Object.assign({className:a.classNames("marquee-root",n,i.default),$gap:j,ref:u,id:c,sx:v,onMouseEnter:()=>{p&&N(!0)},onMouseLeave:()=>{p&&N(!1)}},$,{children:[r.jsx(o.Marquee,Object.assign({$gap:j,$size:l,$color:m,$speed:q,$isHovered:x,className:"marquee-content"},{children:d}),void 0),r.jsx(o.Marquee,Object.assign({$gap:j,$size:l,$color:m,$speed:q,$isHovered:x,className:"marquee-content"},{children:d}),void 0)]}),void 0)}));t.displayName="Marquee",exports.Marquee=t;