{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "defi-nft-card",
  "type": "registry:ui",
  "description": "Defi nft-card component",
  "files": [
    {
      "path": "packages/defi/nft-card.tsx",
      "content": "\"use client\";\n\nimport React from 'react';\n\n// TypeScript interface for the props of each NFT card\nexport interface NftCardProps {\n    id: string;\n    imageUrl: string;\n    title: string;\n    highestBid: string;\n    price: string;\n    timeLeft?: string;\n    onFavorite?: () => void;\n    isFavorited?: boolean;\n    className?: string;\n}\n\n// SVG Icon Components\nconst ClockIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\n    <svg {...props} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n        <polyline points=\"12,6 12,12 16,14\"></polyline>\n    </svg>\n);\n\nconst HeartIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\n    <svg {...props} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"></path>\n    </svg>\n);\n\nconst EthIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\n    <svg {...props} viewBox=\"0 0 24 24\" fill=\"currentColor\">\n        <path d=\"M12 1.75L5.75 12.25L12 16L18.25 12.25L12 1.75Z\" opacity=\"0.6\"/>\n        <path d=\"M12 17.5L5.75 13.5L12 22.25L18.25 13.5L12 17.5Z\"/>\n    </svg>\n);\n\n// The NFT Card Component\nexport const NftCard: React.FC<NftCardProps> = ({ \n    imageUrl, \n    title, \n    highestBid, \n    price, \n    timeLeft,\n    onFavorite,\n    isFavorited = false,\n    className = \"\"\n}) => {\n    return (\n        <div className={`relative group overflow-hidden rounded-2xl sm:rounded-3xl bg-white dark:bg-black border border-gray-200 dark:border-gray-800 shadow-lg shadow-gray-200/50 dark:shadow-black/20 transition-all duration-300 hover:shadow-xl hover:shadow-gray-300/50 dark:hover:shadow-black/40 hover:-translate-y-1 hover:border-gray-300 dark:hover:border-gray-700 w-full ${className}`}>\n            <div className=\"relative p-2 sm:p-2.5\">\n                {/* Card Image Section */}\n                <div className=\"relative\">\n                    <img \n                        src={imageUrl} \n                        alt={title} \n                        className=\"w-full h-auto rounded-xl sm:rounded-2xl object-cover aspect-square\" \n                    />\n\n                    {/* Time Left Overlay */}\n                    {timeLeft && (\n                        <div className=\"absolute top-2 left-2 sm:top-4 sm:left-4 bg-black/70 dark:bg-black/70 text-white text-xs sm:text-sm font-semibold px-2 py-1 sm:px-4 sm:py-2 rounded-full flex items-center space-x-1 sm:space-x-2 backdrop-blur-sm border border-white/20\">\n                            <ClockIcon className=\"w-3 h-3 sm:w-5 sm:h-5 text-cyan-300\" />\n                            <span className=\"hidden sm:inline\">{timeLeft}</span>\n                            <span className=\"sm:hidden\">{timeLeft.split(':')[0]}h</span>\n                        </div>\n                    )}\n\n                    {/* Favorite Button */}\n                    <button \n                        onClick={onFavorite}\n                        className={`absolute top-2 right-2 sm:top-4 sm:right-4 bg-black/70 dark:bg-black/70 text-white p-1.5 sm:p-2.5 rounded-full transition-colors backdrop-blur-sm border border-white/20 ${\n                            isFavorited ? 'text-red-500' : 'hover:text-red-500'\n                        }`}\n                    >\n                        <HeartIcon className={`w-4 h-4 sm:w-6 sm:h-6 ${isFavorited ? 'fill-current' : ''}`} />\n                    </button>\n                </div>\n\n                {/* Card Content Section */}\n                <div className=\"mt-3 sm:mt-4 px-1 sm:px-1.5 pb-2 sm:pb-3 pt-1 sm:pt-2\">\n                    <div className=\"flex justify-between items-center\">\n                        <h3 className=\"text-base sm:text-xl font-bold text-gray-900 dark:text-white truncate pr-2\" title={title}>\n                            {title}\n                        </h3>\n                        <EthIcon className=\"w-5 h-5 sm:w-6 sm:h-6 text-gray-500 dark:text-gray-400 flex-shrink-0\" />\n                    </div>\n\n                    <p className=\"text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-1\">\n                        Highest Bid {highestBid}\n                    </p>\n\n                    <div className=\"mt-3 sm:mt-4 flex justify-between items-center\">\n                        <p className=\"text-xs sm:text-sm font-bold text-gray-700 dark:text-gray-300\">Price</p>\n                        <p className=\"text-sm sm:text-lg font-bold text-cyan-600 dark:text-cyan-400\">{price}</p>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default NftCard;\n",
      "type": "registry:component"
    }
  ]
}