retro-react
Version:
A React component library for building retro-style websites
2 lines (1 loc) • 1.07 kB
JavaScript
import{__rest as e}from"../../_virtual/_tslib.js";import{forwardRef as s,useState as o}from"react";import{jsxs as r,jsx as a}from"../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js";import{classNames as i}from"../../utils/classNames.js";import m from"../../constants/commonClassNames.js";import{Marquee as t,MarqueeWrapper as c}from"./Marquee.styled.js";const n=s(((s,n)=>{var{id:d,className:l,children:p,size:u="medium",color:$="#000000",pauseOnHover:j=!1,speed:v="10s",gap:g="1rem",sx:N}=s,f=e(s,["id","className","children","size","color","pauseOnHover","speed","gap","sx"]);const[h,q]=o(!1);return r(c,Object.assign({className:i("marquee-root",l,m),$gap:g,ref:n,id:d,sx:N,onMouseEnter:()=>{j&&q(!0)},onMouseLeave:()=>{j&&q(!1)}},f,{children:[a(t,Object.assign({$gap:g,$size:u,$color:$,$speed:v,$isHovered:h,className:"marquee-content"},{children:p}),void 0),a(t,Object.assign({$gap:g,$size:u,$color:$,$speed:v,$isHovered:h,className:"marquee-content"},{children:p}),void 0)]}),void 0)}));n.displayName="Marquee";export{n as Marquee};