product-card-grid-demo

1import {
2  ProductCard,
3  ProductCardContent,
4  ProductCardHeader,
5  ProductCardImage,
6  ProductCardTitle,
7} from "@/components/ui/product-card"
8 
9const essays = [
10  {
11    title: "Buy Wisely",
12    image: "/images/essays/buy-wisely.jpg",
13    author: "Paul Graham",
14    url: "https://stephango.com/buy-wisely",
15  },
16  {
17    title: "On Becoming Competitive",
18    image: "/images/essays/on-becoming-competitive.jpg",
19    author: "Naval Ravikant",
20    url: "https://ludwigabap.bearblog.dev/on-becoming-competitive-when-joining-a-new-company/",
21  },
22  {
23    title: "Salary Negotiations",
24    image: "/images/essays/salary-negotiations.jpg",
25    author: "Patrick McKenzie",
26    url: "https://www.kalzumeus.com/2012/01/23/salary-negotiation/",
27  },
28  {
29    title: "Solution Space & Taste",
30    image: "/images/essays/solution-space-taste.jpg",
31    author: "Jessica Livingston",
32    url: "https://grantslatton.com/solution-space-taste",
33  },
34  {
35    title: "The Bear Manifesto",
36    image: "/images/essays/the-bear-manifesto.jpg",
37    author: "Nassim Taleb",
38    url: "https://herman.bearblog.dev/manifesto/",
39  },
40  {
41    title: "Write Like You Talk",
42    image: "/images/essays/write-like-you-talk.jpg",
43    author: "Paul Graham",
44    url: "https://paulgraham.com/talk.html",
45  },
46]
47 
48export default function ProductCardGridDemo() {
49  return (
50    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
51      {essays.map((essay) => (
52        <a
53          key={essay.title}
54          href={essay.url}
55          target="_blank"
56          rel="noopener noreferrer"
57          className="block"
58        >
59          <ProductCard className="w-full rounded-sm">
60            <ProductCardImage
61              src={essay.image}
62              alt={essay.title}
63              className="rounded-sm"
64            />
65            <ProductCardContent>
66              <ProductCardHeader>
67                <ProductCardTitle>{essay.title}</ProductCardTitle>
68                <div className="text-muted-foreground text-sm">
69                  by {essay.author}
70                </div>
71              </ProductCardHeader>
72            </ProductCardContent>
73          </ProductCard>
74        </a>
75      ))}
76    </div>
77  )
78}