// Makora โ€” UI primitives shared across the catalog // Imagen de producto: usa foto real si existe `img`, si no rayas diagonales + label mono function ProductPlaceholder({ label, sub, ratio = "4/5", accent, dense = false, big = false, img }) { const a = accent || "var(--ink)"; if (img) { return (
{label} { e.currentTarget.style.display = "none"; }} /> {/* Sutil vignette para legibilidad de badges */}
); } return (
IMG ยท {label}
{label}
{sub}
{/* corner mark */}
); } function StateBadge({ state }) { if (!state) return null; const map = { nuevo: { label: "Nuevo", bg: "var(--accent)", fg: "#fff" }, popular: { label: "Popular", bg: "var(--ink)", fg: "#fff" }, bestseller: { label: "Bestseller", bg: "var(--mustard)", fg: "#fff" }, destacado: { label: "Destacado", bg: "var(--mustard)", fg: "#fff" }, }; const c = map[state]; if (!c) return null; return ( {c.label} ); } function PersonalizableTag() { return ( Personalizable ); } // Inline svg icon set (1.5px, lineal, monocromo) const Icon = { search: (p) => , cart: (p) => , whatsapp: (p) => , arrow: (p) => , close: (p) => , filter: (p) => , grid: (p) => , rows: (p) => , sun: (p) => , moon: (p) => , share: (p) => , bookmark: (p) => , check: (p) => , menu: (p) => , chevron: (p) => , }; // Logo de Makora โ€” usa el lockup PNG oficial (con fallback filter para modo oscuro) function MakoraLogo({ size = 28, mono = false, dark = false }) { const h = Math.round(size * 1.8); return ( Makora โ€” Ideas que toman forma ); } Object.assign(window, { ProductPlaceholder, StateBadge, PersonalizableTag, Icon, MakoraLogo, });