Animated List

1"use client"
2 
3import React, {
4  type ComponentPropsWithoutRef,
5  useEffect,
6  useMemo,
7  useState,
8} from "react"
9import { AnimatePresence, motion, type MotionProps } from "motion/react"
10 
11import { cn } from "@/lib/utils"
12 
13export function AnimatedListItem({ children }: { children: React.ReactNode }) {
14  const animations: MotionProps = {
15    initial: { scale: 0, opacity: 0 },
16    animate: { scale: 1, opacity: 1, originY: 0 },
17    exit: { scale: 0, opacity: 0 },
18    transition: { type: "spring", stiffness: 350, damping: 40 },
19  }
20 
21  return (
22    <motion.div
23      {...animations}
24      layout
25      className="mx-auto w-full"
26    >
27      {children}
28    </motion.div>
29  )
30}
31 
32export interface AnimatedListProps extends ComponentPropsWithoutRef<"div"> {
33  children: React.ReactNode
34  delay?: number
35}
36 
37export const AnimatedList = React.memo(
38  ({ children, className, delay = 1000, ...props }: AnimatedListProps) => {
39    const [index, setIndex] = useState(0)
40    const childrenArray = useMemo(
41      () => React.Children.toArray(children),
42      [children],
43    )
44 
45    useEffect(() => {
46      if (index < childrenArray.length - 1) {
47        const timeout = setTimeout(() => {
48          setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)
49        }, delay)
50 
51        return () => clearTimeout(timeout)
52      }
53    }, [index, delay, childrenArray.length])
54 
55    const itemsToShow = useMemo(() => {
56      const result = childrenArray.slice(0, index + 1).reverse()
57      return result
58    }, [index, childrenArray])
59 
60    return (
61      <div
62        className={cn("flex flex-col items-center gap-4", className)}
63        {...props}
64      >
65        <AnimatePresence>
66          {itemsToShow.map((item) => (
67            <AnimatedListItem key={(item as React.ReactElement).key}>
68              {item}
69            </AnimatedListItem>
70          ))}
71        </AnimatePresence>
72      </div>
73    )
74  },
75)
76 
77AnimatedList.displayName = "AnimatedList"