Add Arjmand Pharmacy Next.js homepage.
Initial RTL storefront with header, slider, product sections, and local image assets. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -0,0 +1,44 @@
|
||||
import Link from "next/link";
|
||||
import { ShoppingBag } from "lucide-react";
|
||||
import { Placeholder } from "@/components/Placeholder";
|
||||
import { faDigits, formatPrice } from "@/lib/format";
|
||||
import type { Product } from "@/lib/data";
|
||||
|
||||
export function ProductCard({ product }: { product: Product }) {
|
||||
return (
|
||||
<article className="group flex h-full flex-col rounded-2xl bg-white p-3">
|
||||
<Link href="#" className="relative overflow-hidden rounded-xl bg-sky">
|
||||
{product.discount ? (
|
||||
<span className="absolute top-2 right-2 z-10 rounded-md bg-sale px-1.5 py-0.5 text-[11px] font-bold text-white">
|
||||
{faDigits(product.discount)}٪
|
||||
</span>
|
||||
) : null}
|
||||
<Placeholder src={product.image} className="aspect-square w-full object-cover transition group-hover:scale-[1.03]" />
|
||||
</Link>
|
||||
<p className="font-latin mt-3 text-[11px] tracking-wide text-primary">{product.brand}</p>
|
||||
<h3 className="mt-1 line-clamp-2 min-h-[40px] text-[13px] leading-5 text-ink">
|
||||
<Link href="#">{product.title}</Link>
|
||||
</h3>
|
||||
<div className="mt-auto pt-3">
|
||||
{product.oldPrice ? (
|
||||
<p className="text-[11px] text-muted line-through">{formatPrice(product.oldPrice)} تومان</p>
|
||||
) : (
|
||||
<p className="h-[16px]" />
|
||||
)}
|
||||
<div className="mt-1 flex items-end justify-between gap-2">
|
||||
<p className="text-[14px] font-bold text-navy">
|
||||
{formatPrice(product.price)}
|
||||
<span className="mr-1 text-[11px] font-medium text-muted">تومان</span>
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
className="grid size-9 place-items-center rounded-xl bg-primary text-white transition hover:bg-primary-hover"
|
||||
aria-label="افزودن به سبد خرید"
|
||||
>
|
||||
<ShoppingBag className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user