Product Card

• Component: <ProductCard/>

• Path: /components/layout/product-card.tsx

• Import:

import { ProductCard } from "@/components/layout/product-card";

The card displays:

• Label

• "Owner" (links to X if it starts with @)

• Image

• Tagline

• Category

• Options (links/filters)

• Rating / favorite actions if flip effect is selected

It's clickable and will get you to the product own page.

Sizing

Different sizes are available to fit your products, simply set the "cards" value to "large" in metadata file:

const metadata = {
 ...
cards: "large", // "default" | "large" | "vertical"
...
};

module.exports = { metadata };

Flip Effect

For a clean minimalist deign, you can opt for flipping cards.

Front card will show image only, and back will appear on hover with all infos and actions (rating & favorite):

const metadata = {
 ...
enableFlipCards: true, // Set to true to enable flip functionality
...
};

module.exports = { metadata };