{
  "name": "card-stack",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/card-stack.tsx",
      "content": "\"use client\";\nimport { useEffect, useState } from \"react\";\nimport { motion } from \"motion/react\";\n\nlet interval: any;\n\ntype Card = {\n  id: number;\n  name: string;\n  designation: string;\n  content: React.ReactNode;\n};\n\nexport const CardStack = ({\n  items,\n  offset,\n  scaleFactor,\n}: {\n  items: Card[];\n  offset?: number;\n  scaleFactor?: number;\n}) => {\n  const CARD_OFFSET = offset || 10;\n  const SCALE_FACTOR = scaleFactor || 0.06;\n  const [cards, setCards] = useState<Card[]>(items);\n\n  useEffect(() => {\n    startFlipping();\n\n    return () => clearInterval(interval);\n  }, []);\n  const startFlipping = () => {\n    interval = setInterval(() => {\n      setCards((prevCards: Card[]) => {\n        const newArray = [...prevCards]; // create a copy of the array\n        newArray.unshift(newArray.pop()!); // move the last element to the front\n        return newArray;\n      });\n    }, 5000);\n  };\n\n  return (\n    <div className=\"relative  h-60 w-60 md:h-60 md:w-96\">\n      {cards.map((card, index) => {\n        return (\n          <motion.div\n            key={card.id}\n            className=\"absolute dark:bg-black bg-white h-60 w-60 md:h-60 md:w-96 rounded-3xl p-4 shadow-xl border border-neutral-200 dark:border-white/[0.1]  shadow-black/[0.1] dark:shadow-white/[0.05] flex flex-col justify-between\"\n            style={{\n              transformOrigin: \"top center\",\n            }}\n            animate={{\n              top: index * -CARD_OFFSET,\n              scale: 1 - index * SCALE_FACTOR, // decrease scale for cards that are behind\n              zIndex: cards.length - index, //  decrease z-index for the cards that are behind\n            }}\n          >\n            <div className=\"font-normal text-neutral-700 dark:text-neutral-200\">\n              {card.content}\n            </div>\n            <div>\n              <p className=\"text-neutral-500 font-medium dark:text-white\">\n                {card.name}\n              </p>\n              <p className=\"text-neutral-400 font-normal dark:text-neutral-200\">\n                {card.designation}\n              </p>\n            </div>\n          </motion.div>\n        );\n      })}\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/card-stack.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Card Stack"
}