40 lines
911 B
TypeScript
40 lines
911 B
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
type RotatingHeadlineProps = {
|
|
items: string[];
|
|
subtext: string;
|
|
intervalSeconds?: number;
|
|
};
|
|
|
|
export default function RotatingHeadline({
|
|
items,
|
|
subtext,
|
|
intervalSeconds = 3,
|
|
}: RotatingHeadlineProps) {
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (items.length <= 1) return;
|
|
|
|
const id = setInterval(() => {
|
|
setActiveIndex((i) => (i + 1) % items.length);
|
|
}, intervalSeconds * 1000);
|
|
|
|
return () => clearInterval(id);
|
|
}, [items.length, intervalSeconds]);
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{/* rotating row — key forces remount so a CSS transition can fire */}
|
|
<div className="text-2xl">
|
|
<span key={activeIndex}>{items[activeIndex]}</span>
|
|
</div>
|
|
|
|
{/* static row */}
|
|
<div className="text-neutral-400">{subtext}</div>
|
|
</div>
|
|
);
|
|
}
|