// Shared primitives for the ITCONNECT profile redesign. // All sized for ~390px mobile artboard width. Pure presentational; no state. const { useState: useStatePrim } = React; // ───────────────────────────────────────────────────────────── // Icons — Lucide stroke 1.75 / 2 // ───────────────────────────────────────────────────────────── const Icon = { Arrow: (p = {}) => , ArrowUR: (p = {}) => , Mail: (p = {}) => , Check: (p = {}) => , Phone: (p = {}) => , Building: (p = {}) => , Book: (p = {}) => , Box: (p = {}) => , Play: (p = {}) => , Spark: (p = {}) => , Kakao: () => , YouTube: () => , Linkedin: () => , Insta: () => , Threads: () => , Send: () => , Dot: () => , }; // ───────────────────────────────────────────────────────────── // Eyebrow — small uppercase mono label // ───────────────────────────────────────────────────────────── function Eyebrow({ children, onDark = false, rule = false, color }) { const c = color || (onDark ? "var(--accent-highlight)" : "var(--brand-blue)"); return (
{children} {rule && }
); } // ───────────────────────────────────────────────────────────── // Highlight mark — yellow underline behind keyword // ───────────────────────────────────────────────────────────── function Mark({ children, color = "var(--brand-ink)", bar = "rgba(255,224,102,0.55)" }) { return ( {children} ); } // ───────────────────────────────────────────────────────────── // Pill — small rounded tag // ───────────────────────────────────────────────────────────── function Pill({ children, variant = "default", small = false }) { const styles = { default: { bg: "rgba(62,94,146,0.06)", fg: "var(--brand-blue)", bd: "rgba(62,94,146,0.18)" }, teal: { bg: "rgba(111,137,132,0.10)", fg: "#4d6863", bd: "rgba(111,137,132,0.22)" }, yellow: { bg: "rgba(255,224,102,0.35)", fg: "#7a5f12", bd: "rgba(200,158,30,0.32)" }, ink: { bg: "rgba(31,36,48,0.06)", fg: "var(--brand-ink)", bd: "rgba(31,36,48,0.12)" }, onDark: { bg: "rgba(255,255,255,0.07)", fg: "rgba(255,255,255,0.92)", bd: "rgba(255,255,255,0.12)" }, highlight: { bg: "var(--accent-highlight)", fg: "#5a4506", bd: "transparent" }, }[variant]; return ( {children} ); } // ───────────────────────────────────────────────────────────── // Btn — primary / secondary / yellow / ghost // ───────────────────────────────────────────────────────────── function Btn({ children, variant = "primary", size = "md", iconRight, iconLeft, full = true, href, target = "_self" }) { const sizes = { md: { p: "14px 20px", fs: 15, r: 10 }, sm: { p: "10px 14px", fs: 13.5, r: 8 }, lg: { p: "17px 22px", fs: 15.5, r: 12 }, }[size]; const variants = { primary: { bg: "var(--brand-blue)", c: "#fff", bd: "transparent", sh: "0 4px 14px rgba(62,94,146,0.28)" }, yellow: { bg: "var(--accent-highlight)", c: "var(--brand-ink)", bd: "transparent", sh: "0 4px 14px rgba(200,158,30,0.25)" }, dark: { bg: "var(--brand-ink)", c: "#fff", bd: "transparent", sh: "0 4px 14px rgba(31,36,48,0.25)" }, ghost: { bg: "transparent", c: "var(--brand-ink)", bd: "1px solid var(--line)", sh: "none" }, ghostOnDark: { bg: "transparent", c: "#fff", bd: "1px solid rgba(255,255,255,0.18)", sh: "none" }, light: { bg: "#fff", c: "var(--brand-ink)", bd: "1px solid var(--line-light)", sh: "0 1px 2px rgba(31,36,48,0.04)" }, kakao: { bg: "#FEE500", c: "#191919", bd: "transparent", sh: "0 4px 14px rgba(254,229,0,0.35)" }, }[variant]; const Tag = href ? "a" : "span"; const linkProps = href ? { href, target, rel: target === "_blank" ? "noopener noreferrer" : undefined, } : {}; return ( {iconLeft} {children} {iconRight} ); } // ───────────────────────────────────────────────────────────── // Card — warm off-white panel // ───────────────────────────────────────────────────────────── function Card({ children, dark = false, padding = 20, style }) { return (
{children}
); } // ───────────────────────────────────────────────────────────── // Dot grid background pattern (very faint) // ───────────────────────────────────────────────────────────── function DotGrid({ opacity = 0.5, size = 22, dark = false }) { const c = dark ? "rgba(255,255,255,0.12)" : "rgba(31,36,48,0.13)"; return (
); } // ───────────────────────────────────────────────────────────── // Stat tile — large number + label // ───────────────────────────────────────────────────────────── function Stat({ num, suffix, label, onDark = false }) { return (
{num} {suffix && {suffix}}
{label}
); } // ───────────────────────────────────────────────────────────── // MobileFrame — simulated phone (status bar + content area + home indicator) // ───────────────────────────────────────────────────────────── function MobileFrame({ children, width = 390, theme = "paper", showHome = true, showStatus = true }) { const bg = theme === "paper" ? "var(--paper)" : (theme === "navy" ? "var(--accent-navy)" : "#fff"); return (
{showStatus && (
9:41
)} {children} {showHome && (
)}
); } // ───────────────────────────────────────────────────────────── // Brand wordmark — ITCONNECT in Pretendard 700 // ───────────────────────────────────────────────────────────── function Wordmark({ size = 16, color = "var(--brand-ink)" }) { return ( ITCONNECT ); } Object.assign(window, { Icon, Eyebrow, Mark, Pill, Btn, Card, DotGrid, Stat, MobileFrame, Wordmark });