/* global React */
// Shared primitive components for Sandbox Pitch & Putt app
// ─── Display helpers ─────────────────────────────────────
// Always renders a handle with a leading @, regardless of how it's
// stored ("rob" or "@rob" both → "@rob"). Returns '' for falsy input.
function formatHandle(h) {
if (!h) return '';
const s = String(h).trim();
return s.startsWith('@') ? s : `@${s}`;
}
// ─── Icons ──────────────────────────────────────────────
const Icon = {
Flag: ({ size = 20, color = 'currentColor' }) => (
),
Home: ({ size = 22, color = 'currentColor', filled = false }) => (
),
Tee: ({ size = 22, color = 'currentColor', filled = false }) => (
),
Chart: ({ size = 22, color = 'currentColor', filled = false }) => (
),
Users: ({ size = 22, color = 'currentColor', filled = false }) => (
),
User: ({ size = 22, color = 'currentColor', filled = false }) => (
),
ArrowRight: ({ size = 16, color = 'currentColor' }) => (
),
ArrowLeft: ({ size = 16, color = 'currentColor' }) => (
),
Chevron: ({ size = 14, color = 'currentColor', dir = 'right' }) => {
const rot = { right: 0, left: 180, up: -90, down: 90 }[dir];
return (
);
},
Plus: ({ size = 18, color = 'currentColor' }) => (
),
Close: ({ size = 18, color = 'currentColor' }) => (
),
Check: ({ size = 16, color = 'currentColor' }) => (
),
Lock: ({ size = 16, color = 'currentColor' }) => (
),
Share: ({ size = 18, color = 'currentColor' }) => (
),
Bolt: ({ size = 16, color = 'currentColor' }) => (
),
Fire: ({ size = 16, color = 'currentColor' }) => (
),
Pin: ({ size = 16, color = 'currentColor' }) => (
),
Clock: ({ size = 16, color = 'currentColor' }) => (
),
Calendar: ({ size = 16, color = 'currentColor' }) => (
),
Trophy: ({ size = 18, color = 'currentColor' }) => (
),
Ball: ({ size = 14, color = 'currentColor' }) => (
),
Dot: ({ size = 6, color = 'currentColor' }) => (
),
Streak: ({ size = 16, color = 'currentColor' }) => (
),
Search: ({ size = 16, color = 'currentColor' }) => (
),
};
// ─── Live dot ────────────────────────────────────────────
function LiveDot({ color = 'var(--clay)' }) {
return (
);
}
// ─── SPP monogram (small) ────────────────────────────────
function SppMark({ size = 28, color = 'var(--cream)' }) {
// blob S monogram, approximated from deck
return (
);
}
// ─── Button ──────────────────────────────────────────────
function Button({ children, onClick, variant = 'primary', size = 'md', full, style, disabled, icon }) {
const base = {
display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
fontFamily: 'var(--font-body)', fontWeight: 700,
borderRadius: 999, cursor: disabled ? 'not-allowed' : 'pointer',
transition: 'transform .12s, opacity .15s, background .15s',
opacity: disabled ? 0.5 : 1,
letterSpacing: '0.01em',
width: full ? '100%' : 'auto',
border: 'none',
whiteSpace: 'nowrap',
};
const sizes = {
sm: { padding: '8px 14px', fontSize: 13 },
md: { padding: '13px 20px', fontSize: 15 },
lg: { padding: '17px 24px', fontSize: 16 },
};
const variants = {
primary: { background: 'var(--cream)', color: 'var(--forest)' },
paper: { background: 'var(--paper)', color: 'var(--forest)' },
forest: { background: 'var(--forest)', color: 'var(--cream)' },
clay: { background: 'var(--clay)', color: 'var(--forest-deep)' },
ghost: { background: 'rgba(234,226,206,0.12)', color: 'var(--cream)', border: '1px solid rgba(234,226,206,0.3)' },
outline: { background: 'transparent', color: 'var(--forest)', border: '1.5px solid var(--forest)' },
outlineCream: { background: 'transparent', color: 'var(--cream)', border: '1.5px solid var(--cream)' },
outlineWhite: { background: 'transparent', color: 'var(--paper)', border: '1.5px solid var(--paper)' },
};
return (
);
}
// ─── Eyebrow / Label ─────────────────────────────────────
function Eyebrow({ children, color = 'currentColor', style }) {
return (
{children}
);
}
// ─── Chip / Pill ─────────────────────────────────────────
function Chip({ children, variant = 'default', icon, style }) {
const variants = {
default: { background: 'rgba(14,28,19,0.08)', color: 'var(--forest)' },
cream: { background: 'var(--cream)', color: 'var(--forest)' },
forest: { background: 'var(--forest)', color: 'var(--cream)' },
clay: { background: 'var(--clay)', color: 'var(--forest-deep)' },
ghost: { background: 'rgba(234,226,206,0.14)', color: 'var(--cream)', border: '1px solid rgba(234,226,206,0.25)' },
ghostDark: { background: 'rgba(14,28,19,0.08)', color: 'var(--forest)', border: '1px solid rgba(14,28,19,0.12)' },
};
return (
{icon}{children}
);
}
// ─── Divider with dashes ─────────────────────────────────
function Dashed({ color = 'currentColor', style }) {
return (
);
}
// ─── Ostrich mark (uses image asset) ─────────────────────
function Ostrich({ size = 64, variant = 'cream', kind = 'full', style }) {
const src = `assets/mascot-${kind === 'S' ? 's' : 'full'}-${variant === 'forest' ? 'forest' : 'cream'}.svg`;
return 
;
}
// ─── Wordmark (brand SVG: "SANDBOX") ─────────────────────
// variant: 'forest' for cream/paper bg, 'cream' for forest bg, 'white' for photo/dark bg
function Wordmark({ size = 140, variant = 'forest', style }) {
const src = `assets/wordmark-${variant}.svg`;
return ;
}
// ─── Full Lockup (SANDBOX + Pitch & Putt) ────────────────
function Lockup({ size = 200, variant = 'forest', style }) {
const src = `assets/lockup-${variant}.svg`;
return ;
}
// ─── Score dial ──────────────────────────────────────────
function ScoreDial({ value, max = 54, min = 27, label, color = 'var(--forest)', size = 120 }) {
const pct = Math.max(0, Math.min(1, (max - value) / (max - min)));
const r = size / 2 - 6;
const circ = 2 * Math.PI * r;
return (
{value}
{label &&
{label}
}
);
}
// ─── Tiny sparkline ──────────────────────────────────────
function Spark({ data, width = 60, height = 20, color = 'currentColor' }) {
if (!data || !data.length) return null;
const mn = Math.min(...data), mx = Math.max(...data);
const rng = mx - mn || 1;
const pts = data.map((v, i) => {
const x = (i / (data.length - 1)) * (width - 2) + 1;
const y = height - 1 - ((v - mn) / rng) * (height - 2);
return `${x.toFixed(1)},${y.toFixed(1)}`;
}).join(' ');
return (
);
}
Object.assign(window, {
Icon, LiveDot, SppMark, Button, Eyebrow, Chip, Dashed, Ostrich, Wordmark, Lockup, ScoreDial, Spark,
formatHandle,
});