Marquee

1export default function Marquee({ items }: { items: string[] }) {
2  return (
3    <div className="relative flex w-full overflow-x-hidden border-b-2 border-t-2 border-border bg-secondary-background text-foreground font-base">
4      <div className="animate-marquee whitespace-nowrap py-12">
5        {items.map((item) => {
6          return (
7            <span key={item} className="mx-4 text-4xl">
8              {item}
9            </span>
10          )
11        })}
12      </div>
13
14      <div className="absolute top-0 animate-marquee2 whitespace-nowrap py-12">
15        {items.map((item) => {
16          return (
17            <span key={item} className="mx-4 text-4xl">
18              {item}
19            </span>
20          )
21        })}
22      </div>
23
24      {/* must have both of these in order to work */}
25    </div>
26  )
27}