A versatile product card component suitable fro showcasing the product image, name, description, price, condition, and discount.
For the disclaimer, credit information, and the Vue Version, please visit https://namer-ui-for-vue.netlify.app/components/product-card
This component (Next.js version) is also available on Namer UI https://namer-ui.netlify.app
Vanilla HTML/CSS/JS version: https://codepen.io/Northstrix/pen/WbeYvKg
"use client";
import React from "react";
import { ProductCard } from "@/components/ui/product-card";
// RTL discount tag swap example
const originalDiscountTag = "הנחה 40%";
const discountTagParts = originalDiscountTag.split(' ');
const swappedDiscountTag = discountTagParts.reverse().join(' ');
const ProductCardDemo = () => (
<section>
<div className="min-h-[300px] flex flex-wrap gap-8 items-center justify-center relative">
<ProductCard
id="0"
imageSrc="https://cdn.21st.dev/assets/mirror/bd/bd972cddf34798e383da83b94dd435fb93d782a0b63053eac766a8529212966f.jpg"
altText="iPhone 15 Pro"
oldPrice="$1,199"
price="$1,079"
condition="Brand new"
discountTag="10% OFF"
title="iPhone 15 Pro"
description="Titanium smartphone with an advanced camera system, offering stunning photography capabilities and a sleek design."
onFilledButtonClick={(id) => console.log(`Filled button clicked for ID: ${id}`)}
onOutlinedButtonClick={(id) => console.log(`Outlined button clicked for ID: ${id}`)}
/>
{/* LIGHT THEME CARD */}
<ProductCard
id="1"
imageSrc="https://cdn.21st.dev/assets/mirror/9c/9c4eb5c7182ef82482892beea8b7bf09050fe0e485b7f2f2de96d528307d8bf1.jpg"
altText="iPhone 7"
oldPrice="$199"
price="$159"
condition="Refurbished"
discountTag="20% OFF"
title="iPhone 7"
description="Classic iPhone model with 12MP camera and water resistance, offering reliable performance and essential features for everyday smartphone users."
onFilledButtonClick={(id) => console.log(`Filled button clicked for ID: ${id}`)}
onOutlinedButtonClick={(id) => console.log(`Outlined button clicked for ID: ${id}`)}
showOutlinedButton={false}
accentColor="#FF3900"
textColor="#181818"
outlineColor="#d7d7df"
backgroundColor="#fff"
patternColor="#eee"
buttonBackground="#181818"
buttonForeground="#f8f8fa"
outerWidth={392}
outerHeight={414}
borderWidth={4}
containerRounding={14}
innerContainerRounding={14}
buttonRounding={14}
activeComponentScale={1.048}
conditionTagTextColor="#FF3900"
/>
<ProductCard
id="2"
imageSrc="https://cdn.21st.dev/assets/mirror/05/0555681485e363283a04488c19c01a70270b5123eb15d11b971cbdd9ceb4a2a9.jpg"
altText="Samsung Galaxy Flip 6"
oldPrice="$999"
price="$499"
condition="Pre-owned"
discountTag="50% OFF"
title="Samsung Galaxy Flip 6"
description="Innovative foldable smartphone with a sleek design that enhances portability while providing a large display for immersive viewing experiences and multitasking."
onFilledButtonClick={(id) => console.log(`Filled button clicked for ID: ${id}`)}
onOutlinedButtonClick={(id) => console.log(`Outlined button clicked for ID: ${id}`)}
accentColor="#00A6FB"
buttonRounding={50}
tagTextColor="#141414"
/>
<ProductCard
id="3"
imageSrc="https://cdn.21st.dev/assets/mirror/5e/5e93d581626671f9f8b23e85d2456a0e410c420d12a1c163bc9016e7981a3cf7.jpg"
altText="iPhone X"
oldPrice="₪999"
price="₪599"
condition="משומש"
discountTag={swappedDiscountTag}
title="iPhone X"
description="סמארטפון אייקוני עם תצוגת Super Retina בגודל 5.8 אינץ', טכנולוגיית Face ID מתקדמת, מצלמות כפולות של 12MP ועיצוב חדשני שמהפכני בצילום הסלולרי."
onFilledButtonClick={(id) => console.log(`Filled button clicked for ID: ${id}`)}
onOutlinedButtonClick={(id) => console.log(`Outlined button clicked for ID: ${id}`)}
showOutlinedButton={true}
outlineColor="#f1f1f7"
accentColor="#00A6FB"
containerRounding={36}
innerContainerRounding={21}
buttonRounding={50}
lightenButtonColor={0.47}
filledButtonInscription="קנה עכשיו"
outlinedButtonInscription="הוסף לעגלה"
swapButtons={true}
activeComponentScale={1.08}
mirrorTags={true}
/>
</div>
</section>
);
export { ProductCardDemo };