product-card-custom-demo

1"use client"
2 
3import Link from "next/link"
4import { ArrowUpRight } from "lucide-react"
5 
6import {
7  ProductCard,
8  ProductCardContent,
9  ProductCardHeader,
10  ProductCardImage,
11  ProductCardMetric,
12  ProductCardSubtitle,
13  ProductCardTitle,
14} from "@/components/ui/product-card"
15import { Badge } from "@/components/ui/badge"
16 
17export function ProductCardCustomDemo() {
18  const amazonUrl =
19    "https://www.amazon.com/Creative-Act-Way-Being/dp/0593652886"
20 
21  return (
22    <div className="flex w-full justify-center">
23      <Link href={amazonUrl} target="_blank" rel="noopener noreferrer">
24        <ProductCard size="small">
25          <ProductCardImage
26            src="https://pictures.abebooks.com/isbn/9781838858636-uk.jpg"
27            alt="The Creative Act: A Way of Being"
28          >
29            <div className="absolute top-3 right-3 z-10">
30              <span
31                className="bg-secondary text-secondary-foreground flex size-8 items-center justify-center rounded-full"
32                aria-label="View on Amazon"
33              >
34                <ArrowUpRight className="size-4" />
35              </span>
36            </div>
37          </ProductCardImage>
38 
39          <ProductCardContent>
40            <ProductCardHeader>
41              <ProductCardTitle>
42                The Creative Act: A Way of Being
43              </ProductCardTitle>
44              <ProductCardSubtitle className="flex flex-wrap gap-1 pt-1">
45                <Badge variant="secondary" className="px-2 py-0.5 text-xs">
46                  Creativity
47                </Badge>
48                <Badge variant="secondary" className="px-2 py-0.5 text-xs">
49                  Self-Help
50                </Badge>
51                <Badge variant="secondary" className="px-2 py-0.5 text-xs">
52                  Art
53                </Badge>
54              </ProductCardSubtitle>
55            </ProductCardHeader>
56            <ProductCardMetric>$18</ProductCardMetric>
57          </ProductCardContent>
58        </ProductCard>
59      </Link>
60    </div>
61  )
62}