550 lines
20 KiB
TypeScript
550 lines
20 KiB
TypeScript
import { Eye, ShoppingCart } from "lucide-react";
|
|
|
|
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const STOCK_STATUS = {
|
|
IN_STOCK: "IN_STOCK",
|
|
OUT_OF_STOCK: "OUT_OF_STOCK",
|
|
} as const;
|
|
|
|
type StockStatusCode = keyof typeof STOCK_STATUS;
|
|
|
|
interface ProductPrice {
|
|
regular: number;
|
|
sale?: number;
|
|
currency: string;
|
|
}
|
|
|
|
interface Product {
|
|
name: string;
|
|
image: {
|
|
src: string;
|
|
srcset?: string;
|
|
sizes?: string;
|
|
alt: string;
|
|
};
|
|
link: string;
|
|
price: ProductPrice;
|
|
stockStatusCode: StockStatusCode;
|
|
badges?: Array<{
|
|
text: string;
|
|
color?: string;
|
|
}>;
|
|
}
|
|
|
|
type ProductCardProps = Product;
|
|
|
|
interface FeaturedPromotion {
|
|
kicker: string;
|
|
title: string;
|
|
cta: {
|
|
link: string;
|
|
label: string;
|
|
};
|
|
link: string;
|
|
image: string;
|
|
}
|
|
|
|
type FeaturedPromotionCardProps = FeaturedPromotion;
|
|
|
|
type ProductList = Array<{
|
|
featuredPromotion: FeaturedPromotion;
|
|
products: Array<Product>;
|
|
}>;
|
|
|
|
const PRODUCTS_LIST: ProductList = [
|
|
{
|
|
featuredPromotion: {
|
|
image:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/linh-le-giP0e750Dr8-unsplash-1.jpg",
|
|
title: "قطعاتی ماندگار (کلاسیک) که برای راحتی و سبک طراحی شده‌اند.",
|
|
kicker: "فضاهای روزمره‌تان را ارتقا دهید.",
|
|
cta: {
|
|
label: "خرید مبلمان و موارد دیگر",
|
|
link: "#",
|
|
},
|
|
link: "#",
|
|
},
|
|
products: [
|
|
{
|
|
name: "مبل چرمی",
|
|
price: {
|
|
regular: 899000.0,
|
|
sale: 799000.0,
|
|
currency: "ریال",
|
|
},
|
|
link: "#",
|
|
stockStatusCode: "IN_STOCK",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
},
|
|
{
|
|
name: "ماگ سرامیکی",
|
|
price: {
|
|
regular: 59900.0,
|
|
currency: "ریال",
|
|
},
|
|
link: "#",
|
|
stockStatusCode: "IN_STOCK",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
},
|
|
{
|
|
name: "کتری چای",
|
|
price: {
|
|
regular: 920000.0,
|
|
currency: "ریال",
|
|
},
|
|
link: "#",
|
|
stockStatusCode: "OUT_OF_STOCK",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
},
|
|
{
|
|
name: "شمع‌های معطر",
|
|
price: {
|
|
regular: 500000.0,
|
|
currency: "ریال",
|
|
},
|
|
link: "#",
|
|
stockStatusCode: "IN_STOCK",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
},
|
|
{
|
|
name: 'قاب چوبی ۵×۷ اینچ',
|
|
price: {
|
|
regular: 200000.0,
|
|
currency: "ریال",
|
|
},
|
|
link: "#",
|
|
stockStatusCode: "IN_STOCK",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
},
|
|
{
|
|
name: "آباژور کره‌ای",
|
|
price: {
|
|
regular: 199000.0,
|
|
currency: "ریال",
|
|
},
|
|
link: "#",
|
|
stockStatusCode: "IN_STOCK",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
},
|
|
{
|
|
name: "صندلی چرمی",
|
|
price: {
|
|
regular: 899000.0,
|
|
sale: 799000.0,
|
|
currency: "ریال",
|
|
},
|
|
link: "#",
|
|
badges: [
|
|
{
|
|
text: "بهترین انتخاب!",
|
|
color: "oklch(54.6% 0.245 262.881)",
|
|
},
|
|
{
|
|
text: "حراج",
|
|
color: "oklch(57.7% 0.245 27.325)",
|
|
},
|
|
],
|
|
stockStatusCode: "IN_STOCK",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
},
|
|
{
|
|
name: "فنجان سرامیکی",
|
|
price: {
|
|
regular: 190000.0,
|
|
currency: "ریال",
|
|
},
|
|
link: "#",
|
|
stockStatusCode: "OUT_OF_STOCK",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
featuredPromotion: {
|
|
image:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207892-1.jpg",
|
|
title: "از شمع تا قاب؛ جزئیات کوچک، اثر بزرگ.",
|
|
kicker: "جزئیاتی که خانه می‌سازند",
|
|
cta: {
|
|
label: "کاوش اکسسوری‌های خانه",
|
|
link: "#",
|
|
},
|
|
link: "#",
|
|
},
|
|
products: [
|
|
{
|
|
name: "صندلی ناهارخوری",
|
|
price: {
|
|
regular: 299000.0,
|
|
sale: 199000.0,
|
|
currency: "ریال",
|
|
},
|
|
link: "#",
|
|
stockStatusCode: "OUT_OF_STOCK",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
},
|
|
{
|
|
name: "ساعت دیواری",
|
|
price: {
|
|
regular: 159000.0,
|
|
currency: "ریال",
|
|
},
|
|
link: "#",
|
|
stockStatusCode: "IN_STOCK",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
},
|
|
{
|
|
name: "بشقاب سرامیکی",
|
|
price: {
|
|
regular: 990000.0,
|
|
sale: 890000.0,
|
|
currency: "ریال",
|
|
},
|
|
link: "#",
|
|
stockStatusCode: "IN_STOCK",
|
|
badges: [
|
|
{
|
|
text: "حراج",
|
|
color: "oklch(57.7% 0.245 27.325)",
|
|
},
|
|
],
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
},
|
|
{
|
|
name: "کابینت چوبی",
|
|
price: {
|
|
regular: 699000.0,
|
|
currency: "ریال",
|
|
},
|
|
link: "#",
|
|
stockStatusCode: "IN_STOCK",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
},
|
|
{
|
|
name: "صندلی چوبی",
|
|
price: {
|
|
regular: 490000.0,
|
|
currency: "ریال",
|
|
},
|
|
link: "#",
|
|
stockStatusCode: "IN_STOCK",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
},
|
|
{
|
|
name: "فنجان سرامیکی",
|
|
price: {
|
|
regular: 190000.0,
|
|
currency: "ریال",
|
|
},
|
|
link: "#",
|
|
stockStatusCode: "IN_STOCK",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-anna-nekrashevich-8533748-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-anna-nekrashevich-8533748-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-anna-nekrashevich-8533748-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-anna-nekrashevich-8533748-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
},
|
|
{
|
|
name: "فنجان سرامیکی",
|
|
price: {
|
|
regular: 190000.0,
|
|
currency: "ریال",
|
|
},
|
|
link: "#",
|
|
stockStatusCode: "IN_STOCK",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
},
|
|
{
|
|
name: "صندلی چوبی",
|
|
price: {
|
|
regular: 490000.0,
|
|
currency: "ریال",
|
|
},
|
|
link: "#",
|
|
stockStatusCode: "IN_STOCK",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-karolina-grabowska-7193566-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-karolina-grabowska-7193566-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-karolina-grabowska-7193566-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-karolina-grabowska-7193566-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
interface ProductList10Props {
|
|
className?: string;
|
|
}
|
|
|
|
const ProductList10 = ({ className }: ProductList10Props) => {
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="flex flex-col gap-5">
|
|
{PRODUCTS_LIST.map((item, index) => (
|
|
<div
|
|
className="flex flex-col gap-5 lg:flex-row lg:even:flex-row-reverse"
|
|
key={`product-list-10-featured-promo-${index}`}
|
|
>
|
|
<div className="flex-1/3">
|
|
<FeaturedPromotionCard {...item.featuredPromotion} />
|
|
</div>
|
|
<div className="flex-2/3">
|
|
<div className="grid grid-cols-2 gap-5 md:grid-cols-4">
|
|
{item.products.map((product, index) => (
|
|
<ProductCard
|
|
{...product}
|
|
key={`product-10-list-card-${index}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
const ProductCard = ({
|
|
link,
|
|
image,
|
|
name,
|
|
price,
|
|
stockStatusCode,
|
|
}: ProductCardProps) => {
|
|
const { regular, sale, currency } = price;
|
|
|
|
return (
|
|
<Card className="group relative block rounded-none border-none bg-background p-0 shadow-none">
|
|
<a href={link} className="absolute inset-0 z-10 size-full"></a>
|
|
<CardContent className="p-0">
|
|
<div className="relative overflow-hidden">
|
|
<AspectRatio
|
|
ratio={0.749767365}
|
|
className="overflow-hidden rounded-xl"
|
|
>
|
|
<img
|
|
srcSet={image.srcset}
|
|
alt={image.alt}
|
|
sizes={image.sizes}
|
|
className="block size-full origin-center object-cover object-center transition-transform duration-700 group-hover:scale-110"
|
|
/>
|
|
</AspectRatio>
|
|
{stockStatusCode === STOCK_STATUS.OUT_OF_STOCK && (
|
|
<div className="absolute start-2.5 top-2.5 z-60">
|
|
<Badge>فروخته شد</Badge>
|
|
</div>
|
|
)}
|
|
{stockStatusCode === STOCK_STATUS.IN_STOCK && price.sale && (
|
|
<div className="absolute start-2.5 top-2.5 z-60">
|
|
<Badge variant="destructive">حراج</Badge>
|
|
</div>
|
|
)}
|
|
<div className="absolute inset-x-5 top-1/2 z-60 hidden -translate-y-1/2 md:block">
|
|
<div className="flex flex-col gap-2 opacity-0 duration-700 lg:translate-y-4 lg:group-hover:translate-y-0 lg:group-hover:opacity-100">
|
|
<Button
|
|
disabled={stockStatusCode === STOCK_STATUS.OUT_OF_STOCK}
|
|
className="w-full"
|
|
>
|
|
<ShoppingCart />
|
|
افزودن به سبد
|
|
</Button>
|
|
<Button variant="secondary" className="w-full">
|
|
<Eye />
|
|
مشاهده سریع
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-1 pt-3">
|
|
<CardTitle className="leading-normal font-normal underline-offset-3 group-hover:underline">
|
|
{name}
|
|
</CardTitle>
|
|
<ProductCardPrice regular={regular} sale={sale} currency={currency} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const FeaturedPromotionCard = ({
|
|
kicker,
|
|
title,
|
|
cta,
|
|
link,
|
|
image,
|
|
}: FeaturedPromotionCardProps) => {
|
|
return (
|
|
<Card
|
|
style={{
|
|
backgroundImage: `url(${image})`,
|
|
}}
|
|
className="relative h-full min-h-160 border-none bg-cover bg-center bg-no-repeat p-10 shadow-none md:min-h-100"
|
|
>
|
|
<a href={link} className="absolute inset-0 z-10 size-full"></a>
|
|
<CardHeader className="gap-2.5 p-0">
|
|
<p>{kicker}</p>
|
|
<CardTitle className="text-xl font-medium">{title}</CardTitle>
|
|
<div className="relative z-20 mt-5">
|
|
<Button size="lg" asChild>
|
|
<a href={cta.link}>{cta.label}</a>
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const formatCurrency = (
|
|
value: number,
|
|
currency: string = "ریال",
|
|
locale: string = "fa-IR",
|
|
) => {
|
|
return `${value.toLocaleString(locale)} ${currency}`;
|
|
};
|
|
|
|
const ProductCardPrice = ({
|
|
regular,
|
|
sale,
|
|
currency,
|
|
}: {
|
|
regular: number;
|
|
sale?: number;
|
|
currency: string;
|
|
}) => {
|
|
const onSale = sale != null;
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-x-2 text-sm leading-normal font-bold">
|
|
{onSale ? (
|
|
<span className="leading-tight text-red-700">
|
|
{formatCurrency(sale, currency)}
|
|
</span>
|
|
) : null}
|
|
<span
|
|
className={cn(
|
|
"leading-tight",
|
|
onSale
|
|
? "text-muted-foreground line-through"
|
|
: "text-foreground",
|
|
)}
|
|
>
|
|
{formatCurrency(regular, currency)}
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { ProductList10 };
|