{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "action-tracking-motion",
  "type": "registry:component",
  "description": "A Card component with action tracking animation.",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/app/components/animatedComponents/cards/action-tracking/ActionTrackingMotion.tsx",
      "content": "\"use client\";\r\nimport Link from \"next/link\";\r\nimport { motion } from \"framer-motion\";\r\n\r\nconst RecentTransactionData = [\r\n  {\r\n    title: \"09:30 \",\r\n    subtitle: \"Payment received from John Doe of $385.90\",\r\n    textcolor: \"primary\",\r\n    boldtext: false,\r\n    line: true,\r\n    link: \"\",\r\n    url: \"\",\r\n  },\r\n  {\r\n    title: \"10:00 \",\r\n    subtitle: \"New sale recorded\",\r\n    textcolor: \"warning\",\r\n    boldtext: true,\r\n    line: true,\r\n    link: \"#ML-3467\",\r\n    url: \"\",\r\n  },\r\n  {\r\n    title: \"12:00 \",\r\n    subtitle: \"Payment was made of $64.95 to Michael\",\r\n    textcolor: \"warning\",\r\n    boldtext: false,\r\n    line: true,\r\n    link: \"\",\r\n    url: \"\",\r\n  },\r\n  {\r\n    title: \"09:30 \",\r\n    subtitle: \"New sale recorded\",\r\n    textcolor: \"secondary\",\r\n    boldtext: true,\r\n    line: true,\r\n    link: \"#ML-3467\",\r\n    url: \"\",\r\n  },\r\n  {\r\n    title: \"09:30 \",\r\n    subtitle: \"Project meeting\",\r\n    textcolor: \"error\",\r\n    boldtext: true,\r\n    line: true,\r\n    link: \"\",\r\n    url: \"\",\r\n  },\r\n  {\r\n    title: \"12:00 \",\r\n    subtitle: \"Payment received from John Doe of $385.90\",\r\n    textcolor: \"primary\",\r\n    boldtext: false,\r\n    line: false,\r\n    link: \"\",\r\n    url: \"\",\r\n  },\r\n];\r\n\r\nconst ActionTrackingMotion = ({replayAnimation=0}:any) => {\r\n  return (\r\n      <div className=\"mt-0\" key={replayAnimation} >\r\n        {RecentTransactionData.map((item, i) => (\r\n          <motion.div\r\n            key={i}\r\n            initial={{ opacity: 0, y: 20 }}\r\n            animate={{ opacity: 1, y: 0 }}\r\n            transition={{\r\n              duration: 0.5,\r\n              delay: i * 0.4, \r\n            }}\r\n            className=\"flex gap-x-3\"\r\n          >\r\n            <div className=\"w-1/6 text-end\">\r\n              <span className=\"text-ld font-medium text-sm opacity-80\">\r\n                {item.title}\r\n              </span>\r\n            </div>\r\n\r\n            <div className=\"relative\">\r\n              <div className=\"relative z-10 w-7 h-5 flex justify-center items-center\">\r\n                <div\r\n                  className={`h-3 w-3 rounded-full bg-${item.textcolor}`}\r\n                ></div>\r\n              </div>\r\n              {item.line ? (\r\n                <div className=\"border-s border-ld h-full -mt-2 ms-3.5\"></div>\r\n              ) : (\r\n                <div className=\"border-0\"></div>\r\n              )}\r\n            </div>\r\n\r\n            <div className=\"w-1/4 grow pt-0.5 pb-5\">\r\n              {item.boldtext ? (\r\n                <p className=\"text-ld font-semibold text-sm\">{item.subtitle}</p>\r\n              ) : (\r\n                <p className=\"text-ld font-medium text-sm\">{item.subtitle}</p>\r\n              )}\r\n\r\n              {item.link ? (\r\n                <Link href={item.url} className=\"text-primary text-sm\">\r\n                  {item.link}\r\n                </Link>\r\n              ) : null}\r\n            </div>\r\n          </motion.div>\r\n        ))}\r\n      </div>\r\n  );\r\n};\r\n\r\nexport default ActionTrackingMotion;\r\n",
      "type": "registry:component",
      "target": "components/animated/cards/action-tracking/ActionTrackingMotion.tsx"
    }
  ]
}