"use client"; import { ArrowUp } from 'lucide-react'; import { motion } from 'framer-motion'; import React, { useState, useEffect } from 'react'; type FTItem = { id: number; value: number; }; const fts: FTItem[] = [ { id: 1, value: 954 }, { id: 2, value: 454 }, { id: 3, value: 254 }, { id: 4, value: 154 }, ]; const FTWidget: React.FC = () => { const [selected, setSelected] = useState(fts[0].id); const [isArrowUp, setIsArrowUp] = useState(false); const [isUserInteracted, setIsUserInteracted] = useState(false); useEffect(() => { const interval = setInterval(() => { if (!isUserInteracted) { setSelected((prevSelected) => { const nextIndex = fts.findIndex((ft) => ft.id === prevSelected) + 1; return nextIndex >= fts.length ? fts[0].id : fts[nextIndex].id; }); } }, 2000); return () => clearInterval(interval); }, [isUserInteracted]); const handleArrowUp = (selectedId: number) => { setIsUserInteracted(true); setIsArrowUp(selected > selectedId); setSelected(selectedId); }; return (

{/* Arrow and Title */}

{/* FT Items */}

{fts.map((item) => ( ft.id === item.id)} onClick={() => handleArrowUp(item.id)} /> ))}

); }; type FTItemComponentProps = { item: FTItem; selected: boolean; totalItems: number; index: number; onClick: () => void; }; const FTItemComponent: React.FC = ({ item, selected, totalItems, index, onClick, }) => { const width = selected ? "60px" : `${(totalItems - index) * 20}px`; const height = selected ? "30px" : "7px"; const scale = selected ? 1.1 : 0.9; const opacity = selected ? 1 : `${(totalItems - index) / 6}`; return ( {selected && ( {item.value} )} ); }; export default FTWidget;

FT Widget