{/* An uploaded picture when there is one; the initial otherwise, and
again if the image fails to load rather than a broken-image icon. */}
{src
? setBroken(true)}
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
: creator.avatar}
);
}
// ─── Product image (real photo or silhouette fallback) ────────────────────
// Raw store photos (.jpg/.webp on white) are run through DripcheckBG to produce
// a true transparent cutout so only the product shows. Already-transparent
// items (data: PNGs / transparentImage) render as-is.
function ProductImage({ item, shadow = true }) {
const [src, setSrc] = React.useState(() => {
if (!item || !item.image) return null;
if (item.transparentImage) return item.transparentImage;
return item.image;
});
const alreadyClean = !!item?.transparentImage || (item?.image || '').startsWith('data:');
const [cut, setCut] = React.useState(alreadyClean);
React.useEffect(() => {
if (!item || !item.image || alreadyClean) { setSrc(item?.transparentImage || item?.image || null); setCut(alreadyClean); return; }
let alive = true;
setSrc(item.image); setCut(false);
if (window.DripcheckBG) {
window.DripcheckBG.removeBackground(item.image)
.then(png => { if (alive && png) { setSrc(png); setCut(true); } })
.catch(() => {});
}
return () => { alive = false; };
}, [item && item.image, item && item.transparentImage]);
if (item && item.image) {
return ;
}
return ;
}
// ─── Outfit board (visual collage of items at percent coords) ──────────────
function OutfitBoard({ outfit, interactive = false, scale = 1 }) {
return (
{outfit.items.map((it) => (
))}
);
}
// ─── Outfit card (used on home + explore + profile grids) ──────────────────
function OutfitCard({ outfit, onClick, density = 'regular' }) {
const [hover, setHover] = useState(false);
const [saved, setSaved] = useState(false);
return (
);
}
function IconButton({ children, onClick, title, active }) {
return (
);
}
// ─── Logo wordmark ─────────────────────────────────────────────────────────
function Logo({ size = 18, onClick }) {
return (
modaBoard
);
}
// ─── Top nav ───────────────────────────────────────────────────────────────
function Nav({ screen, go, signedIn, onSignOut, onStudio }) {
const [menuOpen, setMenuOpen] = useState(false);
const items = [
{ id: 'home', label: 'Home' },
{ id: 'explore', label: 'Explore' },
{ id: 'creators', label: 'Creators' },
{ id: 'brands', label: 'Brands' },
];
const goClose = (s) => { setMenuOpen(false); go(s); };
return (
);
}
// The avatar in the nav is the signed-in account's own initial. It is only
// rendered when signed in, so there is no demo creator to fall back to.
function navCreator() {
const s = window.MBAuth?.get?.();
if (!s) return null;
const name = s.creatorName || s.fullName || s.email || '';
const profile = window.MBProfile && window.MBProfile.cachedProfile
? window.MBProfile.cachedProfile()
: null;
return {
handle: (profile && profile.username) || s.handle || 'me',
avatar: ((profile && profile.displayName) || name || 'M')[0].toUpperCase(),
avatarUrl: profile ? profile.avatarUrl : null,
};
}
// ─── Public share link ─────────────────────────────────────────────────────
// Shown wherever an outfit is listed. A published outfit gets its real, live
// URL — clickable and copyable. An unpublished one gets a hint, never a URL:
// showing a link that 404s would be worse than showing none.
// The username half of every share URL. Cached in MBProfile, so the several
// places this renders don't each hit the network.
function useMyUsername() {
const [username, setUsername] = useState(() => (window.MBProfile ? window.MBProfile.cached() : null));
useEffect(() => {
if (username) return;
if (!window.MBAuth || !window.MBAuth.isSignedIn()) return;
let cancelled = false;
(async () => {
const res = await window.MBProfile.get();
if (!cancelled && res && res.username) setUsername(res.username);
})();
return () => { cancelled = true; };
}, [username]);
return username;
}
function PublicUrl({ published, slug, compact = false, hint = true }) {
const username = useMyUsername();
const [copied, setCopied] = useState(false);
if (!published || !slug) {
if (!hint) return null;
return (
Publish to get a shareable link
);
}
// Published, but the username hasn't resolved yet — say so rather than
// rendering half a URL.
if (!username) {
return
Loading link…
;
}
const url = window.MBOutfits.shareUrl(username, slug);
const copy = async (e) => {
e.preventDefault();
e.stopPropagation();
try {
await navigator.clipboard.writeText(url);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch { /* clipboard blocked — the URL is on screen to copy by hand */ }
};
return (