defi-nft-card

1"use client";
2 
3import React from 'react';
4 
5// TypeScript interface for the props of each NFT card
6export interface NftCardProps {
7    id: string;
8    imageUrl: string;
9    title: string;
10    highestBid: string;
11    price: string;
12    timeLeft?: string;
13    onFavorite?: () => void;
14    isFavorited?: boolean;
15    className?: string;
16}
17 
18// SVG Icon Components
19const ClockIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
20    <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
21        <circle cx="12" cy="12" r="10"></circle>
22        <polyline points="12,6 12,12 16,14"></polyline>
23    </svg>
24);
25 
26const HeartIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
27    <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
28        <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>
29    </svg>
30);
31 
32const EthIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
33    <svg {...props} viewBox="0 0 24 24" fill="currentColor">
34        <path d="M12 1.75L5.75 12.25L12 16L18.25 12.25L12 1.75Z" opacity="0.6"/>
35        <path d="M12 17.5L5.75 13.5L12 22.25L18.25 13.5L12 17.5Z"/>
36    </svg>
37);
38 
39// The NFT Card Component
40export const NftCard: React.FC<NftCardProps> = ({ 
41    imageUrl, 
42    title, 
43    highestBid, 
44    price, 
45    timeLeft,
46    onFavorite,
47    isFavorited = false,
48    className = ""
49}) => {
50    return (
51        <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}`}>
52            <div className="relative p-2 sm:p-2.5">
53                {/* Card Image Section */}
54                <div className="relative">
55                    <img 
56                        src={imageUrl} 
57                        alt={title} 
58                        className="w-full h-auto rounded-xl sm:rounded-2xl object-cover aspect-square" 
59                    />
60 
61                    {/* Time Left Overlay */}
62                    {timeLeft && (
63// … truncated