// Shared primitives for Skillhub Builders
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// --- Mono label ---
function Label({ children, style, ...rest }) {
return (
{children}
);
}
// --- Tiny status dot ---
function Dot({ color = "var(--accent)", size = 7, pulse = false }) {
return (
);
}
// --- Terminal window chrome ---
function Terminal({ title = "skillhub@local:~/hub", children, style, ...rest }) {
return (
);
}
// --- Typed line (for terminal hero) ---
function TypedLine({ prompt = "$", text, delay = 0, speed = 22, onDone }) {
const [shown, setShown] = useState(0);
const [started, setStarted] = useState(false);
useEffect(() => {
const t = setTimeout(() => setStarted(true), delay);
return () => clearTimeout(t);
}, [delay]);
useEffect(() => {
if (!started) return;
if (shown >= text.length) { onDone && onDone(); return; }
const t = setTimeout(() => setShown(s => s + 1), speed);
return () => clearTimeout(t);
}, [started, shown, text, speed, onDone]);
return (
{prompt}
{text.slice(0, shown)}
{started && shown < text.length && }
);
}
// --- Button ---
function Btn({ children, variant = "primary", size = "md", as = "button", href, onClick, style, ...rest }) {
const base = {
display: "inline-flex", alignItems: "center", gap: 8,
fontFamily: "var(--mono)", fontSize: size === "sm" ? 11 : 12,
letterSpacing: "0.04em", textTransform: "uppercase",
padding: size === "sm" ? "8px 12px" : "12px 18px",
borderRadius: 6, border: "1px solid transparent", cursor: "pointer",
transition: "transform 120ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease",
whiteSpace: "nowrap"
};
const variants = {
primary: { background: "var(--accent)", color: "var(--accent-fg)", borderColor: "var(--accent)" },
ghost: { background: "transparent", color: "var(--fg)", borderColor: "var(--line-strong)" },
soft: { background: "var(--accent-soft)", color: "var(--accent)", borderColor: "transparent" }
};
const Cmp = as;
const props = {
onClick, href, style: { ...base, ...variants[variant], ...style },
onMouseEnter: (e) => { e.currentTarget.style.transform = "translateY(-1px)"; },
onMouseLeave: (e) => { e.currentTarget.style.transform = "translateY(0)"; },
...rest
};
return {children};
}
// --- Arrow icon ---
function Arrow({ size = 14, dir = "right" }) {
const rot = { right: 0, up: -45, down: 135, upRight: -45 }[dir] ?? 0;
return (
);
}
// --- Section heading ---
function SectionHead({ kicker, title, sub, align = "left", style }) {
return (
{kicker &&
}
{title}
{sub &&
{sub}
}
{children}
);
}
// --- Divider w/ mono caption ---
function HRule({ label }) {
return (
);
}
// --- Accordion item ---
function Accordion({ items }) {
const [open, setOpen] = useState(0);
return (
{items.map((it, i) => {
const isOpen = open === i;
return (
);
})}
{label}
);
}
Object.assign(window, { Label, Dot, Terminal, TypedLine, Btn, Arrow, SectionHead, Container, HRule, Accordion, Ticker, PlaceholderMedia });