102 lines
4.2 KiB
TypeScript
102 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useRef } from "react";
|
|
import { ArrowUpLeft, ChevronLeft, ChevronRight } from "lucide-react";
|
|
import { Container } from "@/components/Container";
|
|
import { Placeholder } from "@/components/Placeholder";
|
|
import { SlotLink } from "@/components/SlotLink";
|
|
import { glossyBar } from "@/lib/glossy";
|
|
import { parseAspectRatio } from "@/lib/static-images";
|
|
import type { SlotMediaItem } from "@/lib/static-images";
|
|
|
|
export function CategoryShowcase({ items, aspectRatio }: { items: SlotMediaItem[]; aspectRatio?: string }) {
|
|
const scroller = useRef<HTMLDivElement>(null);
|
|
const ratio = parseAspectRatio(aspectRatio);
|
|
|
|
const scrollByCard = (direction: number) => {
|
|
const node = scroller.current;
|
|
if (!node) return;
|
|
const card = node.querySelector("article");
|
|
const amount = card ? card.getBoundingClientRect().width + 20 : 300;
|
|
node.scrollBy({ left: direction * amount, behavior: "smooth" });
|
|
};
|
|
|
|
return (
|
|
<section id="parts" className="scroll-mt-28 bg-paper py-16 sm:py-20">
|
|
<Container>
|
|
<div className="mb-10 text-center">
|
|
<div className="flex items-center justify-center gap-3">
|
|
<span className="h-px w-10 bg-brand" />
|
|
<p className="text-[13px] font-medium text-brand">دسته بندی ها</p>
|
|
<span className="h-px w-10 bg-brand" />
|
|
</div>
|
|
<h2 className="mt-3 text-[22px] font-extrabold leading-snug sm:text-[28px]">
|
|
دسته بندی فروشگاه لوازم خانگی برادران برقعی
|
|
</h2>
|
|
</div>
|
|
</Container>
|
|
|
|
<div className="relative">
|
|
<button
|
|
type="button"
|
|
onClick={() => scrollByCard(1)}
|
|
className="absolute top-1/2 right-3 z-10 hidden size-10 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm sm:grid lg:right-6"
|
|
aria-label="قبلی"
|
|
>
|
|
<ChevronRight className="size-4" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => scrollByCard(-1)}
|
|
className="absolute top-1/2 left-3 z-10 hidden size-10 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm sm:grid lg:left-6"
|
|
aria-label="بعدی"
|
|
>
|
|
<ChevronLeft className="size-4" />
|
|
</button>
|
|
|
|
<div
|
|
ref={scroller}
|
|
className="no-scrollbar flex snap-x snap-mandatory gap-5 overflow-x-auto px-4 sm:px-6 lg:px-[max(1.5rem,calc((100vw-1280px)/2+1.5rem))]"
|
|
>
|
|
{items.map((item) => (
|
|
<article
|
|
key={item.id}
|
|
className="group relative w-[min(78vw,280px)] shrink-0 snap-start overflow-hidden rounded-2xl"
|
|
style={ratio ? { aspectRatio: ratio } : { height: 460 }}
|
|
>
|
|
<SlotLink href={item.href} className="block h-full">
|
|
<Placeholder
|
|
src={item.image}
|
|
fallbackSrc={item.fallbackSrc}
|
|
alt={item.title ?? ""}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
<div
|
|
className="absolute right-3 bottom-3 left-3 overflow-hidden rounded-2xl px-4 py-3.5"
|
|
style={glossyBar}
|
|
>
|
|
<div className="flex h-8 items-center justify-between gap-3" dir="ltr">
|
|
<span className="grid size-8 shrink-0 place-items-center rounded-full border border-white/45 text-white">
|
|
<ArrowUpLeft className="size-3.5" />
|
|
</span>
|
|
<h3 className="truncate text-[14px] font-bold text-white" dir="rtl">
|
|
{item.title}
|
|
</h3>
|
|
</div>
|
|
{item.text ? (
|
|
<div className="grid grid-rows-[0fr] transition-[grid-template-rows] duration-500 ease-out group-hover:grid-rows-[1fr]">
|
|
<div className="min-h-0 overflow-hidden">
|
|
<p className="pt-3 text-right text-[13px] leading-7 text-white/75">{item.text}</p>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</SlotLink>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|