Initial commit: BRB Store Next.js storefront with Meshkee image slots.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
@@ -0,0 +1,156 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { Placeholder } from "@/components/Placeholder";
|
||||
import { SlotLink } from "@/components/SlotLink";
|
||||
import { parseAspectRatio } from "@/lib/static-images";
|
||||
import type { SlotMediaItem } from "@/lib/static-images";
|
||||
|
||||
function circularOffset(index: number, active: number, length: number) {
|
||||
let diff = index - active;
|
||||
if (diff > length / 2) diff -= length;
|
||||
if (diff < -length / 2) diff += length;
|
||||
return diff;
|
||||
}
|
||||
|
||||
const slideWidth = "min(1280px, calc(100vw - 5rem))";
|
||||
|
||||
export function Hero({ slides, aspectRatio }: { slides: SlotMediaItem[]; aspectRatio?: string }) {
|
||||
const [active, setActive] = useState(0);
|
||||
const [paused, setPaused] = useState(false);
|
||||
const ratio = parseAspectRatio(aspectRatio);
|
||||
|
||||
useEffect(() => {
|
||||
setActive(0);
|
||||
}, [slides.length]);
|
||||
|
||||
useEffect(() => {
|
||||
if (slides.length < 2 || paused) return;
|
||||
const timer = setInterval(() => {
|
||||
setActive((current) => (current + 1) % slides.length);
|
||||
}, 6000);
|
||||
return () => clearInterval(timer);
|
||||
}, [paused, slides.length]);
|
||||
|
||||
const go = (direction: number) => {
|
||||
if (slides.length < 2) return;
|
||||
setActive((current) => (current + direction + slides.length) % slides.length);
|
||||
};
|
||||
|
||||
if (slides.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="relative overflow-x-clip bg-white pt-5 pb-8">
|
||||
<div
|
||||
className={ratio ? "relative min-h-[340px]" : "relative h-[min(62vh,640px)] min-h-[340px]"}
|
||||
style={ratio ? { aspectRatio: ratio, maxHeight: 640 } : undefined}
|
||||
dir="ltr"
|
||||
onMouseEnter={() => setPaused(true)}
|
||||
onMouseLeave={() => setPaused(false)}
|
||||
>
|
||||
{slides.map((item, i) => {
|
||||
const offset = circularOffset(i, active, slides.length);
|
||||
const isCenter = offset === 0;
|
||||
const isPeek = Math.abs(offset) === 1;
|
||||
|
||||
return (
|
||||
<article
|
||||
key={item.id}
|
||||
className="absolute top-0 h-full w-[min(1280px,calc(100vw-5rem))]"
|
||||
style={{
|
||||
left: `calc(50% - (${slideWidth}) / 2 + ${offset} * ((${slideWidth}) + 1rem))`,
|
||||
zIndex: isCenter ? 3 : isPeek ? 2 : 1,
|
||||
opacity: isCenter || isPeek ? 1 : 0,
|
||||
pointerEvents: isCenter || isPeek ? "auto" : "none",
|
||||
transition: "left 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease",
|
||||
}}
|
||||
>
|
||||
{isCenter ? (
|
||||
<SlotLink href={item.href} className="relative block h-full overflow-hidden rounded-2xl">
|
||||
<Placeholder
|
||||
src={item.image}
|
||||
fallbackSrc={item.fallbackSrc}
|
||||
alt={item.title ?? ""}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-x-4 bottom-4 z-10 rounded-2xl px-5 py-3.5 sm:inset-x-5 sm:bottom-5 sm:px-7 sm:py-4"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(180deg, rgb(48 52 56 / 0.72) 0%, rgb(18 20 22 / 0.82) 100%)",
|
||||
backdropFilter: "blur(22px) saturate(180%)",
|
||||
WebkitBackdropFilter: "blur(22px) saturate(180%)",
|
||||
border: "1px solid rgb(255 255 255 / 0.22)",
|
||||
boxShadow:
|
||||
"inset 0 1px 0 rgb(255 255 255 / 0.28), 0 10px 28px rgb(0 0 0 / 0.28)",
|
||||
}}
|
||||
>
|
||||
<div dir="rtl" className="flex items-center justify-between gap-4">
|
||||
<div className="flex min-w-0 items-center gap-3 sm:gap-5">
|
||||
<h1 className="truncate text-[16px] font-extrabold text-white sm:text-[22px]">
|
||||
{item.title}
|
||||
</h1>
|
||||
<span className="hidden h-[3px] w-10 shrink-0 rounded-full bg-brand sm:block" />
|
||||
<span className="hidden h-6 w-px shrink-0 bg-white/20 sm:block" />
|
||||
{item.kicker ? (
|
||||
<p className="font-latin hidden shrink-0 text-[11px] tracking-[0.2em] text-white/60 uppercase sm:block">
|
||||
{item.kicker}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
<span className="inline-flex shrink-0 rounded-xl bg-brand px-5 py-2.5 text-[13px] font-medium text-white sm:px-6 sm:py-3 sm:text-[14px]">
|
||||
مشاهده قطعات
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</SlotLink>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="relative block h-full w-full overflow-hidden rounded-2xl"
|
||||
onClick={() => setActive(i)}
|
||||
aria-label={item.title}
|
||||
>
|
||||
<Placeholder src={item.image} fallbackSrc={item.fallbackSrc} alt="" className="h-full w-full object-cover" />
|
||||
<span className="absolute inset-0 bg-white/35" />
|
||||
</button>
|
||||
)}
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
|
||||
<div className="pointer-events-none absolute inset-y-0 left-1/2 z-10 w-[min(1280px,calc(100vw-5rem))] -translate-x-1/2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => go(1)}
|
||||
className="pointer-events-auto absolute top-1/2 right-3 grid size-11 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm"
|
||||
aria-label="اسلاید راست"
|
||||
>
|
||||
<ChevronRight className="size-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => go(-1)}
|
||||
className="pointer-events-auto absolute top-1/2 left-3 grid size-11 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm"
|
||||
aria-label="اسلاید چپ"
|
||||
>
|
||||
<ChevronLeft className="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mt-5 flex justify-center gap-2">
|
||||
{slides.map((item, i) => (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
onClick={() => setActive(i)}
|
||||
className={`h-1.5 rounded-full transition-all ${i === active ? "w-8 bg-brand" : "w-3 bg-ink/20"}`}
|
||||
aria-label={`اسلاید ${i + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user