meshkee-websites/sanihome
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: unify catalog and improve detail pages

Browse Source
This commit is contained in:
amirhosein.ashourloo
2026-09-28 09:35:40 +03:30
parent 3af4e04bdd
commit 804eb8702f
17 changed files with 953 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/product/ProductGallery.tsx
+4 -9
View File
@@ -33,11 +33,8 @@ function Lightbox({
onIndexChange: (i: number) => void;
onClose: () => void;
}) {
const [mounted, setMounted] = useState(false);
const hasMultiple = images.length > 1;
useEffect(() => setMounted(true), []);
useEffect(() => {
document.body.style.overflow = "hidden";
const onKeyDown = (event: KeyboardEvent) => {
@@ -52,8 +49,6 @@ function Lightbox({
};
}, [index, images.length, onClose, onIndexChange]);
if (!mounted) return null;
return createPortal(
<div className="fixed inset-0 z-[120] flex flex-col bg-black/95" onClick={onClose}>
<button
@@ -77,7 +72,7 @@ function Lightbox({
aria-label="تصویر بعدی"
className="absolute top-1/2 right-4 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20"
>
<ChevronIcon direction="prev" className="h-6 w-6" />
<ChevronIcon direction="next" className="h-6 w-6" />
</button>
<button
type="button"
@@ -85,7 +80,7 @@ function Lightbox({
aria-label="تصویر قبلی"
className="absolute top-1/2 left-4 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20"
>
<ChevronIcon direction="next" className="h-6 w-6" />
<ChevronIcon direction="prev" className="h-6 w-6" />
</button>
</>
)}
@@ -164,7 +159,7 @@ export function ProductGallery({ images, alt }: { images: string[]; alt: string
aria-label="تصویر بعدی"
className="absolute top-1/2 right-3 z-10 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-surface/90 text-foreground shadow-sm transition-colors hover:border-red hover:text-red"
>
<ChevronIcon direction="prev" className="h-5 w-5" />
<ChevronIcon direction="next" className="h-5 w-5" />
</button>
<button
type="button"
@@ -172,7 +167,7 @@ export function ProductGallery({ images, alt }: { images: string[]; alt: string
aria-label="تصویر قبلی"
className="absolute top-1/2 left-3 z-10 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-surface/90 text-foreground shadow-sm transition-colors hover:border-red hover:text-red"
>
<ChevronIcon direction="next" className="h-5 w-5" />
<ChevronIcon direction="prev" className="h-5 w-5" />
</button>
</>
)}