Ambrose Liew

Hello worldHello worldHello worldHello world
Number of elementsDuration
MarqueeTag.tsx
MarqueeTag.module.css

import React from "react";
import styles from "./MarqueeTag.module.css";
interface MarqueeStyles extends React.CSSProperties {
  "--duration": string;
}
export default function MarqueeTag() {
  const [numOfElements, setNumOfElements] = React.useState(4);
  const [duration, setDuration] = React.useState(5);
  const marqueeStyles: MarqueeStyles = {
    "--duration": `${duration}s`,
  };
  return (
    <>
      <div className="overflow-hidden border border-solid ">
        <div className="flex w-[200%]">
          <div
            className={`w-1/2 flex justify-around ${styles.marquee}`}
            style={marqueeStyles}
          >
            {[...Array(numOfElements)].map((_, i) => {
              return <span key={i}>Hello world</span>;
            })}
          </div>
          <div
            className={`w-1/2 flex justify-around ${styles.marquee}`}
            style={marqueeStyles}
          >
            {[...Array(numOfElements)].map((_, i) => {
              return <span key={i}>Hello world</span>;
            })}
          </div>
        </div>
      </div>
      <label>
        Number of elements
        <input
          type="range"
          min={1}
          max={6}
          value={numOfElements}
          onChange={(e) => setNumOfElements(Number(e.target.value))}
        />
      </label>
      <label>
        Duration
        <input
          type="range"
          min={1}
          max={10}
          value={duration}
          onChange={(e) => setDuration(Number(e.target.value))}
        />
      </label>
    </>
  );
}