// Shared UI components for the Atelier Koolmees rebuild.
// ── Placeholder ────────────────────────────────────────────────────────────
// Striped SVG placeholder with a monospace caption — used in lieu of real photos.
function Placeholder({ aspect = "4 / 5", tone = "warm", caption, label, dense = false }) {
// Tone-tinted neutrals so categories feel different without using real color.
const palettes = {
warm: { bg: "#efe9df", stripe: "#e2d8c8", text: "#7a6a52" },
cool: { bg: "#e6e8eb", stripe: "#d3d6db", text: "#6a737d" },
ink: { bg: "#1a1816", stripe: "#23211e", text: "#c9bfae" }
};
const p = palettes[tone] || palettes.warm;
const stripeId = React.useId();
return (
{(caption || label) &&
{label &&
{label}
}
{caption &&
{caption}
}
}
);
}
// ── Nav ─────────────────────────────────────────────────────────────────────
function Nav({ route, lang, setLang, onNav, accent, dark }) {
const c = COPY[lang];
const linkStyle = (active) => ({
color: "inherit",
textDecoration: "none",
opacity: active ? 1 : 0.55,
cursor: "pointer",
fontWeight: 400,
transition: "opacity .2s ease",
borderBottom: active ? `1px solid currentColor` : "1px solid transparent",
paddingBottom: 1
});
const onLinkEnter = (active) => (e) => { e.currentTarget.style.opacity = active ? ".55" : "1"; };
const onLinkLeave = (active) => (e) => { e.currentTarget.style.opacity = active ? "1" : ".55"; };
const onWerk = () => onNav({ kind: "home" });
const onOver = () => onNav({ kind: "about" });
const isHome = route.kind === "home";
const isAbout = route.kind === "about";
return (
e.currentTarget.style.opacity = ".55"}
onMouseLeave={(e) => e.currentTarget.style.opacity = "1"}
style={{
cursor: "pointer", display: "flex", alignItems: "center", gap: 12,
textDecoration: "none", color: "inherit",
opacity: 1, transition: "opacity .2s ease"
}}>
{SITE.artist}
{c.tagline}
);
}
// ── Footer ──────────────────────────────────────────────────────────────────
function Footer({ dark }) {
const iconStyle = {
width: 18, height: 18, opacity: .55, transition: "opacity .15s ease"
};
return (
);
}
// ── Project list rows (homepage layouts) ───────────────────────────────────
function ListRow({ project, lang, onClick, layout, hovered, setHovered, index, total }) {
const t = project.titles[lang];
const c = COPY[lang];
if (layout === "grid") {
return (
setHovered(project.slug)}
onMouseLeave={() => setHovered(null)}
style={{
display: "block", cursor: "pointer", color: "inherit",
textDecoration: "none", transition: "transform .25s ease",
transform: hovered === project.slug ? "translateY(-2px)" : "none"
}}>
{t}
{project.year}
);
}
// text-list (default)
return (
setHovered(project.slug)}
onMouseLeave={() => setHovered(null)}
style={{
display: "grid",
gridTemplateColumns: "60px 1fr auto",
gap: 24,
alignItems: "baseline",
padding: "26px 0",
borderBottom: "0.5px solid currentColor",
borderColor: "rgba(0,0,0,.08)",
color: "inherit", textDecoration: "none", cursor: "pointer",
opacity: hovered && hovered !== project.slug ? .4 : 1,
transition: "opacity .2s ease"
}}>
{String(index + 1).padStart(2, "0")} / {String(total).padStart(2, "0")}
{t}
{project.year}
);
}
function cap(s) {return s.charAt(0).toUpperCase() + s.slice(1);}
// ── Hover preview (for text-list with image-on-hover) ──────────────────────
// Renders ALL project thumbnails up front (preloaded by the browser) and
// fades between them via opacity. No re-mounting → no flash, no layout jump.
function HoverPreview({ projects, hoveredSlug, mouse }) {
// Smoothed cursor position so the preview doesn't lag/jitter
const [pos, setPos] = React.useState({ x: mouse.x, y: mouse.y });
React.useEffect(() => {
let raf;
const tick = () => {
setPos((p) => ({
x: p.x + (mouse.x - p.x) * 0.18,
y: p.y + (mouse.y - p.y) * 0.18
}));
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [mouse.x, mouse.y]);
return (
{projects.map((p) => (
))}