product-card-inner-demo

1"use client"
2 
3import * as React from "react"
4 
5import {
6  ProductCard,
7  ProductCardBadge,
8  ProductCardContent,
9  ProductCardHeader,
10  ProductCardImage,
11  ProductCardMetric,
12  ProductCardSubtitle,
13  ProductCardTitle,
14} from "@/components/ui/product-card"
15 
16export function ProductCardInnerDemo() {
17  const [isWishlisted, setIsWishlisted] = React.useState(false)
18 
19  return (
20    <div className="w-full max-w-xs">
21      <ProductCard variant="inner">
22        <ProductCardImage
23          src="https://what-i-love-now.vercel.app/_next/image?url=%2Fimages%2Ftwemco-clock.png&w=3840&q=75"
24          alt="Twemco Clock"
25        >
26          <ProductCardBadge
27            icon="✦"
28            isActive={isWishlisted}
29            onClick={() => setIsWishlisted(!isWishlisted)}
30            aria-label={
31              isWishlisted ? "Remove from wishlist" : "Add to wishlist"
32            }
33          >
34            Wishlist
35          </ProductCardBadge>
36 
37          <ProductCardContent>
38            <ProductCardHeader>
39              <ProductCardTitle>Twemco Clock</ProductCardTitle>
40              <ProductCardSubtitle>Clock</ProductCardSubtitle>
41            </ProductCardHeader>
42            <ProductCardMetric>12</ProductCardMetric>
43          </ProductCardContent>
44        </ProductCardImage>
45      </ProductCard>
46    </div>
47  )
48}