{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-list-motion",
  "type": "registry:component",
  "description": "A list component with staggered animation.",
  "dependencies": [
    "motion/react",
    "simplebar-react",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/app/components/animatedComponents/lists/animated-lists/AnimatedListMotion.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { ReactNode, useRef } from \"react\";\r\nimport { motion, useInView } from \"motion/react\";\r\nimport SimpleBar from \"simplebar-react\";\r\nimport { Home, User, Settings, Bell, Calendar, FileText, Lock, MessageCircle, ShoppingCart, HelpCircle } from \"lucide-react\";\r\n\r\ninterface AnimatedItemProps {\r\n  children: ReactNode;\r\n  delay?: number;\r\n  index: number;\r\n}\r\n\r\nconst AnimatedItem: React.FC<AnimatedItemProps> = ({ children, delay = 0, index }) => {\r\n  const ref = useRef<HTMLDivElement>(null);\r\n  const inView = useInView(ref, { amount: 0.2, once: true });\r\n\r\n  return (\r\n    <motion.div\r\n      ref={ref}\r\n      initial={{ scale: 0.8, opacity: 0, y: 30 }}\r\n      animate={inView ? { scale: 1, opacity: 1, y: 0 } : {}}\r\n      transition={{ duration: 0.4, delay: index * 0.1 + delay }}\r\n      className=\"mb-4\"\r\n    >\r\n      {children}\r\n    </motion.div>\r\n  );\r\n};\r\n\r\ninterface AnimatedListProps {\r\n  replayAnimation?: number;\r\n}\r\n\r\n\r\n\r\nconst items = [\r\n  { name: \"View your dashboard with recent activities and stats\", icon: Home },\r\n  { name: \"Manage your profile, preferences, and account details\", icon: User },\r\n  { name: \"Configure settings to customize your experience\", icon: Settings },\r\n  { name: \"Receive notifications and stay updated on tasks\", icon: Bell },\r\n  { name: \"Schedule and track events in your calendar\", icon: Calendar },\r\n  { name: \"Organize and access your documents easily\", icon: FileText },\r\n  { name: \"Enhance security with passwords and permissions\", icon: Lock },\r\n  { name: \"Chat with team members and collaborate effectively\", icon: MessageCircle },\r\n  { name: \"Track orders and manage purchases seamlessly\", icon: ShoppingCart },\r\n  { name: \"Find help articles or contact support for assistance\", icon: HelpCircle },\r\n];\r\n\r\n\r\nconst AnimatedListMotion: React.FC<AnimatedListProps> = ({replayAnimation=0}) => {\r\n  return (\r\n    <SimpleBar className=\"max-h-[200px]\" key={replayAnimation} >\r\n    <div className={`w-[400px]overflow-y-auto`} >\r\n      {items.map((item, index) => (\r\n        <AnimatedItem key={index} index={index}>\r\n          <div className={`p-3 bg-primary rounded-lg flex items-center gap-2`}>\r\n            <item.icon className=\"h-4 w-4 text-white\"/>\r\n            <p className=\"text-white m-0 text-sm\">{item.name}</p>\r\n          </div>\r\n        </AnimatedItem>\r\n      ))}\r\n    </div>\r\n    </SimpleBar>\r\n  );\r\n};\r\n\r\nexport default AnimatedListMotion;\r\n",
      "type": "registry:component",
      "target": "components/animated/lists/animated-lists/AnimatedListMotion.tsx"
    }
  ]
}