NFT Card

1"use client";
2 
3import React from "react";
4import {
5  Card,
6  CardContent,
7  CardDescription,
8  CardFooter,
9  CardHeader,
10  CardTitle,
11} from "@/components/ui/card";
12import { Skeleton } from "@/components/ui/skeleton";
13import { cn } from "@/lib/utils";
14 
15interface NFTCardProps extends React.ComponentProps<typeof Card> {
16  name: string;
17  image: string;
18  collection?: string;
19  price?: string;
20  currency?: string;
21}
22 
23const NFTCard = ({
24  name,
25  image,
26  collection,
27  price,
28  currency = "SOL",
29  className,
30  ...props
31}: NFTCardProps) => {
32  const [status, setStatus] = React.useState<"loading" | "loaded" | "error">(
33    "loading",
34  );
35 
36  return (
37    <Card
38      className={cn("w-full max-w-xs py-0 gap-0 overflow-hidden", className)}
39      {...props}
40    >
41      <CardContent className="p-0">
42        <div className="relative aspect-square w-full bg-muted overflow-hidden">
43          {status === "loading" && (
44            <Skeleton className="absolute inset-0 rounded-none" />
45          )}
46          {status === "error" ? (
47            <div className="absolute inset-0 flex items-center justify-center bg-muted text-muted-foreground text-sm">
48              Failed to load
49            </div>
50          ) : (
51            <img
52              src={image}
53              alt={name}
54              className={cn(
55                "absolute inset-0 w-full h-full object-cover",
56                status === "loading" && "opacity-0",
57              )}
58              onLoad={() => setStatus("loaded")}
59              onError={() => setStatus("error")}
60            />
61          )}
62        </div>
63      </CardContent>
64      <CardHeader className="bg-muted/50 py-3 px-4 border-t">
65        {collection && (
66          <CardDescription className="text-xs text-muted-foreground">
67            {collection}
68          </CardDescription>
69        )}
70        <CardTitle className="text-base font-medium">{name}</CardTitle>
71      </CardHeader>
72      {price && (
73        <CardFooter className="bg-muted/50 px-4 pb-3 pt-0">
74          <span className="text-sm font-medium">
75            {price} {currency}
76          </span>
77        </CardFooter>
78      )}
79    </Card>
80  );
81};
82 
83export type { NFTCardProps };
84export { NFTCard };