export function UserCaseCarousel()

in src/components/user-case-carousel/index.tsx [11:79]
62 lines of code
5 McCabe index (conditional complexity)

export function UserCaseCarousel() {
    const { isPhone } = usePhone();
    const [count, setCount] = useState<number>(0);
    const [activeKey, setActiveKey] = useState<string>('0');
    const [stop, setStop] = useState<boolean>(false);

    useAnimationFrame(deltaTime => {
        // Pass on a function to the setter of the state
        // to make sure we always have the latest state

        setCount(prevCount => {
            if (prevCount >= 100) {
                setActiveKey(activeKey => {
                    let nextKey = +activeKey + 1;
                    if (nextKey >= VariousAnalyticsData.length) {
                        nextKey = 0;
                    }
                    return nextKey.toString();
                });
                return 0;
            }
            if (deltaTime > 100) return prevCount;

            return prevCount + deltaTime * 0.01;
        });
    }, stop);

    return isPhone ? (
        <div className="cases-collapse">
            <Collapse
                bordered={false}
                defaultActiveKey={['0']}
                accordion
                expandIcon={ArrowDownIcon}
                expandIconPosition="right"
                items={VariousAnalyticsData.map(({ title, content, icon, links, backgroundClassName }, index) => {
                    return {
                        key: index,
                        label: (
                            <div className="flex items-center">
                                <div className="mr-4">{icon}</div>
                                <span className="text-base">{title}</span>
                            </div>
                        ),
                        children: (
                            <div
                                className={`font-misans text-start h-full ${backgroundClassName} text-[10px] leading-[17px]`}
                            >
                                <div className=" pt-3 pr-3">{content}</div>

                                <div className="flex mt-3 gap-2">
                                    {links.map(({ content, to },idx) => (
                                        <LinkWithArrow
                                            key={idx}
                                            style={{ fontSize: '10px', lineHeight: '17px' }}
                                            className="text-start"
                                            to={to}
                                            text={content}
                                        />
                                    ))}
                                </div>
                            </div>
                        ),
                    };
                })}
            />
        </div>
    ) : (
        <div className="cases-tabs" onMouseMove={() => setStop(true)} onMouseLeave={() => setStop(false)}>