{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "motion-number-upvotes",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/motion-number/motion-number-upvotes.tsx",
      "content": "'use client';\nimport NumberFlow from '@number-flow/react';\nimport { ArrowDown, ArrowUp } from 'lucide-react';\nimport { motion } from 'motion/react';\nimport type React from 'react';\nimport { useState } from 'react';\n\nconst UpvoteDownvote: React.FC = () => {\n  const [votes, setVotes] = useState(14); // Initial votes\n  const [activeVote, setActiveVote] = useState<'up' | 'down' | null>(null); // Track active arrow\n\n  const handleVote = (state: 'up' | 'down') => {\n    if (state === 'up') {\n      setVotes(votes + 1);\n      setActiveVote(state);\n    } else {\n      setVotes(votes - 1);\n      setActiveVote(state);\n    }\n  };\n\n  return (\n    <div\n      className={`flex flex-col items-center gap-2 p-4  border rounded-xl shadow-lg w-fit mx-auto ${\n        activeVote === 'up'\n          ? 'dark:bg-green-950 bg-green-300 border-green-600 text-white'\n          : activeVote === 'down'\n            ? 'dark:bg-red-950 bg-red-300 border-red-600 text-white'\n            : 'dark:bg-neutral-950 bg-neutral-50 text-primary'\n      }`}\n    >\n      <div className='  text-lg font-medium'>\n        <NumberFlow value={votes} format={{ notation: 'compact' }} /> Upvotes\n      </div>\n\n      <div className='flex items-center gap-4'>\n        <motion.button\n          whileTap={{ scale: 0.9 }}\n          onClick={() => handleVote('up')}\n          className={`p-2 rounded-full text-white ${\n            activeVote === 'up' ? 'bg-green-500 ' : ' bg-black '\n          } transition-colors`}\n        >\n          <ArrowUp size={24} />\n        </motion.button>\n\n        <motion.button\n          whileTap={{ scale: 0.9 }}\n          onClick={() => handleVote('down')}\n          className={`p-2 rounded-full text-white ${\n            activeVote === 'down' ? 'bg-red-500 ' : ' bg-black '\n          } transition-colors`}\n        >\n          <ArrowDown size={24} />\n        </motion.button>\n      </div>\n    </div>\n  );\n};\n\nexport default UpvoteDownvote;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}