63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { LIST_PAGE_META } from "@/data/products";
|
|
|
|
type Crumb = { label: string; href?: string };
|
|
|
|
type ProductDetailHeroProps = {
|
|
heroImage?: string;
|
|
breadcrumbs: readonly Crumb[];
|
|
};
|
|
|
|
/** Shorter list-style title band — home hero image, breadcrumbs only. */
|
|
export default function ProductDetailHero({
|
|
heroImage = LIST_PAGE_META.heroImage,
|
|
breadcrumbs,
|
|
}: ProductDetailHeroProps) {
|
|
return (
|
|
<section className="relative h-[min(28vw,220px)] min-h-[140px] w-full overflow-hidden bg-[#ebe6df] sm:min-h-[160px]">
|
|
<Image
|
|
src={heroImage}
|
|
alt=""
|
|
fill
|
|
priority
|
|
sizes="100vw"
|
|
className="object-cover object-[center_20%]"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-l from-white/20 via-transparent to-transparent" />
|
|
|
|
<div className="absolute inset-x-0 bottom-4 z-10 px-4 sm:bottom-5 sm:px-6 lg:bottom-6 lg:px-[120px]">
|
|
<nav
|
|
dir="rtl"
|
|
aria-label="مسیر صفحه"
|
|
className="flex flex-wrap items-center gap-1.5 text-[11px] font-light text-ink sm:text-[13px]"
|
|
>
|
|
{breadcrumbs.map((crumb, i) => (
|
|
<span
|
|
key={`${crumb.label}-${i}`}
|
|
className="inline-flex items-center gap-1.5 sm:gap-2"
|
|
>
|
|
{i > 0 ? (
|
|
<Image
|
|
src="/images/home/icons/caret-left-dark.svg"
|
|
alt=""
|
|
width={12}
|
|
height={12}
|
|
unoptimized
|
|
/>
|
|
) : null}
|
|
{crumb.href ? (
|
|
<Link href={crumb.href} className="transition-opacity hover:opacity-70">
|
|
{crumb.label}
|
|
</Link>
|
|
) : (
|
|
<span>{crumb.label}</span>
|
|
)}
|
|
</span>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|