// Shared atoms: logo mark, icons, placeholders
const { useState, useEffect, useRef, useMemo } = React;
const LogoMark = ({ size = 40, className = "" }) => (
);
const Brand = ({ dark = false, href = "/", onClick }) => (
);
const Arrow = ({ size = 14 }) => (
);
// Image placeholder — subtly striped, monospace label
const Placeholder = ({ label = "image", ratio = "4/5", tone = "paper", className = "", style = {} }) => {
const isDark = tone === "ink";
return (
{label}
);
};
// Headshot placeholder — monogram in a circle with gold ring
const Headshot = ({ name = "", size = 88 }) => {
const initials = name.split(" ").map(w => w[0]).join("").slice(0,2).toUpperCase();
// deterministic soft hue per name
const hash = name.split("").reduce((a,c) => a + c.charCodeAt(0), 0);
const hues = [30, 210, 195, 40, 220, 180];
const hue = hues[hash % hues.length];
return (
{initials}
);
};
// Monochrome pillar icon — thin line glyphs
const PillarIcon = ({ name, size = 28 }) => {
const s = size;
const common = { width: s, height: s, viewBox: "0 0 32 32", fill: "none", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" };
const glyphs = {
development: (),
network: (),
mentor: (),
referral: (),
visibility: (),
global: (),
bridge: (),
future: (),
};
return {glyphs[name] || glyphs.network};
};
Object.assign(window, { LogoMark, Brand, Arrow, Placeholder, Headshot, PillarIcon });