// components.jsx — shared UI components: Logo, Icons, Wordmark, Pill, etc.
const Wordmark = ({ height = 16, className = "", style = {} }) => (
);
// Tiny circular paddock mark — accent dot inside ring. Used favicon-style.
const PaddockMark = ({ size = 22, className = "" }) => (
);
// --- Icons (stroke, currentColor, hairline) ---
const Icon = {
Whatsapp: ({ size = 16 }) => (
),
Phone: ({ size = 16 }) => (
),
Telegram: ({ size = 16 }) => (
),
Arrow: ({ size = 14, dir = "right" }) => (
),
Plus: ({ size = 14 }) => (
),
Check: ({ size = 14 }) => (
),
Close: ({ size = 14 }) => (
),
Pin: ({ size = 14 }) => (
),
Clock: ({ size = 14 }) => (
),
ChevDown: ({ size = 12 }) => (
),
};
// A thin label/tab with leading dot. Used everywhere as section kickers.
const Kicker = ({ children, dotted = true }) => (
{dotted && }
{children}
);
// Outlined-pill button + filled-accent variant
const Btn = ({ variant = "ghost", as: Tag = "button", children, icon, iconRight, className = "", ...rest }) => (
{icon && {icon}}
{children}
{iconRight && {iconRight}}
);
Object.assign(window, { Wordmark, PaddockMark, Icon, Kicker, Btn });