{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "message-card-motion",
  "type": "registry:component",
  "description": "A Card component displaying messages with animation.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "src/app/components/animatedComponents/cards/message-card/MessageCardMotion.tsx",
      "content": "\"use client\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\nimport { MessageCirclePlus, ShoppingBasket } from \"lucide-react\";\r\nimport { Card } from \"@/components/ui/card\";\r\n\r\n// Replay Animation is optional , you should remove it while using the code\r\n\r\nexport default function MessageCardMotion({replayAnimation=0}) {\r\n  const [count, setCount] = useState(0);\r\n  const [progressCount, setProgressCount] = useState(0);\r\n\r\n  const target = 20;\r\n  const duration = 1500; \r\n  const progressTarget = 80;\r\n\r\n  useEffect(() => {\r\n    const interval = setInterval(() => {\r\n      setProgressCount((prev) => {\r\n        if (prev < progressTarget) {\r\n          return prev + 1;\r\n        } else {\r\n          clearInterval(interval);\r\n          return prev;\r\n        }\r\n      });\r\n    }, 30); \r\n\r\n    return () => clearInterval(interval);\r\n  }, [replayAnimation]);\r\n\r\n\r\n  useEffect(() => {\r\n    let startTime: number | null = null;\r\n\r\n    const animate = (currentTime: number) => {\r\n      if (!startTime) startTime = currentTime;\r\n      const elapsed = currentTime - startTime;\r\n      const progress = Math.min(elapsed / duration, 1);\r\n      const currentCount = Math.floor(progress * target);\r\n\r\n      setCount(currentCount);\r\n\r\n      if (progress < 1) {\r\n        requestAnimationFrame(animate);\r\n      }\r\n    };\r\n\r\n    requestAnimationFrame(animate);\r\n  }, [replayAnimation]);\r\n\r\n  useEffect(() => {\r\n     if(replayAnimation){\r\n      setProgressCount(0);\r\n     }\r\n  },[replayAnimation])\r\n\r\n  return (\r\n    <Card className=\"!p-4 !shadow-none\">\r\n      <div className=\"grid grid-cols-12 gap-4 items-center\">\r\n \r\n        <div className=\"col-span-2\">\r\n          <div className=\"bg-primary/10 text-primary rounded flex items-center justify-center p-2\">\r\n            <MessageCirclePlus className=\"w-7 h-7\" />\r\n          </div>\r\n        </div>\r\n\r\n    \r\n        <div className=\"col-span-9 flex items-center justify-end text-right\">\r\n          <div>\r\n            <h4 className=\"text-xl font-semibold\">+{count}</h4>\r\n            <h6 className=\"text-sm text-gray-500\">Latest Messages</h6>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div className=\"w-full bg-gray-100 rounded-full h-2 mt-3\">\r\n        <div\r\n          className=\"bg-primary h-2 rounded-full\"\r\n          style={{ width: `${progressCount}%` }}\r\n        />\r\n      </div>\r\n    </Card>\r\n  );\r\n}\r\n",
      "type": "registry:component",
      "target": "components/animated/cards/message-card/MessageCardMotion.tsx"
    }
  ]
}