const ROLL = [

  "CHICAGO",

  "6 · COUNT · 8",

  "ATLANTA",

  "STEP · GLIDE · SPIN",

  "DETROIT",

  "YOUR CITY",

  "HOUSTON",

  "SMOOTH",

  "CHARLOTTE",

  "ON TIME",

  "WASHINGTON DC",

  "CHICAGO STEPPING",

];

export function Marquee() {

  const items = [...ROLL, ...ROLL];

  return (

    <div className="overflow-hidden border-y border-[var(--line)] py-3">

      <div className="marquee-track flex w-max gap-8 whitespace-nowrap">

        {items.map((t, i) => (

          <span key={i} className="kicker flex items-center gap-8">

            {t}

            <span className="text-gold">/</span>

          </span>

        ))}

      </div>

    </div>

  );

}