// products-page.jsx — tüm ürünleri listeleyen ayrı katalog sayfası (header'daki // "Ürünler" linki artık anasayfadaki bölüme kaymak yerine buraya yönlendirir) const { useState: useStateAllP, useEffect: useEffectAllP } = React; function AllProductCard({ p, orient, lang }) { const imgUrl = p.imagePath ? productImageUrl(p.imagePath) : null; const soldOut = (p.stock || 0) <= 0; // Dikey fotoğraflar 3:4, yataylar 4:3 ortak kutuda gösterilir; gruplar // sıralamada bir arada tutulduğu için satırlar hizalı kalır. const aspect = orient === "portrait" ? "aspect-[3/4]" : "aspect-[4/3]"; return (
{imgUrl ? {p.label} : } {soldOut && ( {lang === "en" ? "Sold out" : "Tükendi"} )}

{p.name}

{p.price} · {p.meta}

 ); } function AllProductsPage({ lang, setLang }) { const c = window.CONTENT[lang]; const [items, setItems] = useStateAllP(null); // null = yükleniyor const [search, setSearch] = useStateAllP(""); const [catFilter, setCatFilter] = useStateAllP("all"); const [orients, setOrients] = useStateAllP({}); // slug -> "portrait" | "landscape" useEffectAllP(() => { let cancelled = false; fetchCatalog(lang).then((list) => { if (!cancelled) setItems(list); }); window.scrollTo(0, 0); return () => { cancelled = true; }; }, [lang]); // Fotoğraf yönünü (dikey/yatay) ölçüp ürünleri gruplamak için önden yükle useEffectAllP(() => { if (!items) return; items.forEach((p) => { const url = p.imagePath ? productImageUrl(p.imagePath) : null; if (!url) return; const im = new Image(); im.onload = () => setOrients((o) => (o[p.slug] ? o : { ...o, [p.slug]: im.naturalHeight >= im.naturalWidth ? "portrait" : "landscape" })); im.src = url; }); }, [items]); const categories = Array.from(new Set((items || []).map((p) => p.cat).filter(Boolean))); const visible = (items || []).filter((p) => { const matchesSearch = !search.trim() || p.name.toLowerCase().includes(search.trim().toLowerCase()); const matchesCat = catFilter === "all" || p.cat === catFilter; return matchesSearch && matchesCat; }); // Dikey fotoğraflılar önce, yataylar sonra; grup içinde mevcut sıra korunur const orientRank = (p) => (orients[p.slug] === "portrait" ? 0 : orients[p.slug] === "landscape" ? 1 : 2); const grouped = [...visible].sort((a, b) => orientRank(a) - orientRank(b)); return (
); } Object.assign(window, { AllProductsPage });