79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import { Price, PriceValue } from "@/components/shadcnblocks/price";
|
|
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ProductPrice {
|
|
regular: number;
|
|
sale?: number;
|
|
currency: string;
|
|
}
|
|
|
|
interface Product {
|
|
name: string;
|
|
image: {
|
|
src: string;
|
|
alt: string;
|
|
};
|
|
link: string;
|
|
collection: string;
|
|
price: ProductPrice;
|
|
}
|
|
|
|
const PRODUCT_CARD: Product = {
|
|
collection: "ساعت طلایی",
|
|
name: "گوشواره بلوم و گلیم",
|
|
link: "#",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/accessories/Elegant-Floral-Earrings-1.png",
|
|
alt: "گوشواره گلدار شیک",
|
|
},
|
|
price: {
|
|
regular: 4000000.0,
|
|
currency: "ریال",
|
|
},
|
|
};
|
|
|
|
interface ProductCard5Props {
|
|
className?: string;
|
|
}
|
|
|
|
const ProductCard5 = ({ className }: ProductCard5Props) => {
|
|
const { regular, currency } = PRODUCT_CARD.price;
|
|
|
|
return (
|
|
<div className={cn("flex w-full justify-center", className)}>
|
|
<a
|
|
href={PRODUCT_CARD.link}
|
|
className="block w-full max-w-80 min-w-47.5"
|
|
>
|
|
<Card className="group gap-3.5 rounded-md border-none bg-card p-2 shadow-none">
|
|
<CardHeader className="block p-0">
|
|
<AspectRatio ratio={1} className="w-full overflow-hidden rounded-2xl">
|
|
<img
|
|
src={PRODUCT_CARD.image.src}
|
|
alt={PRODUCT_CARD.image.alt}
|
|
className="block size-full object-cover object-center"
|
|
/>
|
|
</AspectRatio>
|
|
</CardHeader>
|
|
<CardContent className="flex h-full flex-col gap-2 px-2 pb-1">
|
|
<p className="text-xs text-muted-foreground uppercase">
|
|
{PRODUCT_CARD.collection}
|
|
</p>
|
|
<CardTitle className="leading-tight font-medium">
|
|
{PRODUCT_CARD.name}
|
|
</CardTitle>
|
|
<Price className="text-lg font-semibold">
|
|
<PriceValue price={regular} currency={currency} variant="regular" />
|
|
<PriceValue currency={currency} variant="sale" />
|
|
</Price>
|
|
</CardContent>
|
|
</Card>
|
|
</a>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { ProductCard5 };
|