"use client"; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "motion/react"; import { useState, useEffect } from "react"; const CheckIcon = ({ className }: { className?: string }) => { return ( ); }; const CheckFilled = ({ className }: { className?: string }) => { return ( ); }; type LoadingState = { text: string; }; const LoaderCore = ({ loadingStates, value = 0, }: { loadingStates: LoadingState[]; value?: number; }) => { return (

{loadingStates.map((loadingState, index) => { const distance = Math.abs(index - value); const opacity = Math.max(1 - distance * 0.2, 0); // Minimum opacity is 0, keep it 0.2 if you're sane. return (

{index > value && ( )} {index <= value && ( )}

{loadingState.text} ); })}

); }; export const MultiStepLoader = ({ loadingStates, loading, duration = 2000, loop = true, }: { loadingStates: LoadingState[]; loading?: boolean; duration?: number; loop?: boolean; }) => { const [currentState, setCurrentState] = useState(0); useEffect(() => { if (!loading) { setCurrentState(0); return; } const timeout = setTimeout(() => { setCurrentState((prevState) => loop ? prevState === loadingStates.length - 1 ? 0 : prevState + 1 : Math.min(prevState + 1, loadingStates.length - 1) ); }, duration); return () => clearTimeout(timeout); }, [currentState, loading, loop, loadingStates.length, duration]); return ( {loading && (

)} ); };

Multi Step Loader

Instalação

Dependências