87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
import { Price, PriceValue } from "@/components/shadcnblocks/price";
|
|
import { Rating } from "@/components/shadcnblocks/rating";
|
|
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;
|
|
brand: string;
|
|
rate: number;
|
|
image: {
|
|
src: string;
|
|
alt: string;
|
|
};
|
|
link: string;
|
|
price: ProductPrice;
|
|
}
|
|
|
|
const PRODUCT_CARD: Product = {
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/clothes/Sporty-Casual-Portrait-1.png",
|
|
alt: "تاپ کراپ صورتی با طراحی شیک",
|
|
},
|
|
name: "تاپ کراپ رز",
|
|
brand: "آتلیه رز",
|
|
link: "#",
|
|
price: {
|
|
regular: 590000.0,
|
|
currency: "ریال",
|
|
},
|
|
rate: 5,
|
|
};
|
|
|
|
interface ProductCard4Props {
|
|
className?: string;
|
|
}
|
|
|
|
const ProductCard4 = ({ className }: ProductCard4Props) => {
|
|
const { regular, sale, currency } = PRODUCT_CARD.price;
|
|
|
|
return (
|
|
<div className={cn("flex w-full justify-center", className)}>
|
|
<a
|
|
href={PRODUCT_CARD.link}
|
|
className="block min-w-47.5 md:max-w-64"
|
|
>
|
|
<Card className="group h-full min-h-105 gap-3.5 rounded-sm border-none bg-card p-2 shadow-none">
|
|
<CardHeader className="block p-0">
|
|
<div className="h-80 w-full overflow-hidden rounded-sm">
|
|
<img
|
|
src={PRODUCT_CARD.image.src}
|
|
alt={PRODUCT_CARD.image.alt}
|
|
className="block size-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="flex h-full flex-col gap-2 px-2 pb-1">
|
|
<div className="mb-1.5 flex justify-between gap-2">
|
|
<div className="text-xs font-medium text-muted-foreground uppercase">
|
|
{PRODUCT_CARD.brand}
|
|
</div>
|
|
<Rating
|
|
rate={PRODUCT_CARD.rate}
|
|
className="[&_svg]:size-3.5 [&_svg]:fill-yellow-500 [&_svg]:stroke-yellow-500 [&>div]:size-3.5"
|
|
/>
|
|
</div>
|
|
<CardTitle className="text-lg leading-tight font-semibold">
|
|
{PRODUCT_CARD.name}
|
|
</CardTitle>
|
|
<Price onSale={sale != null} className="text-lg font-semibold">
|
|
<PriceValue price={regular} currency={currency} variant="regular" />
|
|
<PriceValue price={sale} currency={currency} variant="sale" />
|
|
</Price>
|
|
</CardContent>
|
|
</Card>
|
|
</a>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { ProductCard4 };
|