{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-card-motion",
  "type": "registry:component",
  "description": "A Card component with alert animation.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/app/components/animatedComponents/cards/alert-cards/AlertCardMotion.tsx",
      "content": "\"use client\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { useState } from \"react\";\r\nimport {\r\n  CheckCircle,\r\n  Info,\r\n  AlertTriangle,\r\n  XCircle,\r\n  ThumbsUp,\r\n  X,\r\n} from \"lucide-react\";\r\n\r\nconst alertData = [\r\n  {\r\n    type: \"success\",\r\n    icon: CheckCircle,\r\n    title: \"Well done!\",\r\n    message: \"You successfully read this important message.\",\r\n    bg: \"bg-success/10 border border-success text-success\",\r\n    hover: \"hover:bg-success/20\",\r\n    animation: {\r\n      animate: { y: [0, -3, 0] },\r\n      transition: {\r\n        repeat: Infinity,\r\n        duration: 1.2,\r\n        ease: \"easeInOut\" as const,\r\n      },\r\n    },\r\n  },\r\n  {\r\n    type: \"info\",\r\n    icon: Info,\r\n    title: \"Heads up!\",\r\n    message: \"This alert needs your attention, but it's not super important.\",\r\n    bg: \"bg-primary/10 border border-primary text-primary\",\r\n    hover: \"hover:bg-primary/20\",\r\n    animation: {\r\n      animate: { x: [0, -3, 3, -3, 0] },\r\n      transition: {\r\n        repeat: Infinity,\r\n        duration: 1.5,\r\n        ease: \"easeInOut\" as const,\r\n      },\r\n    },\r\n  },\r\n  {\r\n    type: \"warning\",\r\n    icon: AlertTriangle,\r\n    title: \"Warning!\",\r\n    message: \"Better check yourself, you're not looking too good.\",\r\n    bg: \"bg-warning/10 border border-warning text-warning\",\r\n    hover: \"hover:bg-warning/20\",\r\n    animation: {\r\n      animate: { opacity: [1, 0.3, 1] },\r\n      transition: {\r\n        repeat: Infinity,\r\n        duration: 1.2,\r\n        ease: \"linear\" as const,\r\n      },\r\n    },\r\n  },\r\n  {\r\n    type: \"danger\",\r\n    icon: XCircle,\r\n    title: \"Oh snap!\",\r\n    message: \"Change a few things up and try submitting again.\",\r\n    bg: \"bg-error/10 border border-error text-error\",\r\n    hover: \"hover:bg-error/20\",\r\n    animation: {\r\n      animate: { scale: [1, 1.2, 1] },\r\n      transition: {\r\n        repeat: Infinity,\r\n        duration: 1.3,\r\n        ease: \"easeInOut\" as const,\r\n      },\r\n    },\r\n  },\r\n  {\r\n    type: \"primary\",\r\n    icon: ThumbsUp,\r\n    title: \"Nice!\",\r\n    message: \"You successfully read this important message.\",\r\n    bg: \"bg-secondary/10 border border-secondary text-secondary\",\r\n    hover: \"hover:bg-secondary/20\",\r\n    animation: {\r\n      animate: { y: [0, -4, 0] },\r\n      transition: {\r\n        repeat: Infinity,\r\n        duration: 1.4,\r\n        ease: \"easeInOut\" as const,\r\n      },\r\n    },\r\n  },\r\n];\r\n\r\nexport default function AlertCardMotion({replayAnimation=0}:any) {\r\n  const [visible, setVisible] = useState(alertData.map(() => true));\r\n\r\n  return (\r\n    <section className=\"space-y-4\">\r\n      {alertData.map((alert, i) => {\r\n        const Icon = alert.icon;\r\n        return (\r\n          <AnimatePresence key={i}>\r\n            {visible[i] && (\r\n              <motion.div\r\n                initial={{ opacity: 0, y: -20 }}\r\n                animate={{ opacity: 1, y: 0 }}\r\n                exit={{ opacity: 0, x: 50 }}\r\n                transition={{ duration: 0.4, delay: i * 0.1 }}\r\n                className={`relative flex items-center p-4 rounded-md cursor-pointer ${alert.bg} ${alert.hover}`}\r\n              >\r\n    \r\n                <motion.span {...alert.animation} className=\"mr-3 flex items-center\">\r\n                  <Icon className=\"w-5 h-5\" />\r\n                </motion.span>\r\n\r\n                <div className=\"flex-1\">\r\n                  <strong className=\"font-semibold\">{alert.title}</strong>{\" \"}\r\n                  <span>{alert.message}</span>\r\n                </div>\r\n\r\n                <motion.button\r\n                  whileHover={{ rotate: 90, scale: 1.2 }}\r\n                  whileTap={{ scale: 0.8, rotate: -90 }}\r\n                  transition={{ type: \"spring\", stiffness: 300, damping: 15 }}\r\n                  onClick={() =>\r\n                    setVisible((prev) =>\r\n                      prev.map((v, idx) => (idx === i ? false : v))\r\n                    )\r\n                  }\r\n                  className=\"ml-3\"\r\n                >\r\n                  <X className=\"w-5 h-5 opacity-70 hover:opacity-100 transition\" />\r\n                </motion.button>\r\n              </motion.div>\r\n            )}\r\n          </AnimatePresence>\r\n        );\r\n      })}\r\n    </section>\r\n  );\r\n}\r\n",
      "type": "registry:component",
      "target": "components/animated/cards/alert-cards/AlertCardMotion.tsx"
    }
  ]
}