// Shared UI primitives used inside phones
// Big pill button — the Resume Aura signature
function PillButton({ children, variant = 'primary', onClick, style = {}, icon }) {
const variants = {
primary: { background: '#1a0d2e', color: '#fae14b', border: 'none' },
lemon: { background: '#fae14b', color: '#1a0d2e', border: 'none' },
aura: { background: 'linear-gradient(90deg, #ff4db8, #8a5cf6, #4dd6ff)', color: '#fff', border: 'none' },
ghost: { background: 'transparent', color: '#1a0d2e', border: '1.5px solid #1a0d2e' },
cream: { background: '#fffdf7', color: '#1a0d2e', border: '1px solid rgba(26,13,46,0.1)' },
};
return (
);
}
// Chip/tag
function Chip({ children, color = '#1a0d2e', bg = '#fffdf7', style = {} }) {
return {children};
}
// Sparkle icon (particle shape — used inside the orb halo, not as a button accent)
function Sparkle({ size = 14, color = 'currentColor' }) {
return ;
}
// SF Symbols approximations — matches the iconography used in the iOS app
// (Image(systemName: ...)) so the web prototype reads as the same surface.
// All paths drawn on a 24x24 grid; `color` flows through via currentColor.
const SF_SYMBOLS = {
'star.fill': (
),
'pencil.line': (
<>
),
'clock': (
<>
),
'person.crop.circle': (
<>
),
'bolt.fill': (
),
'number': (
),
'arrow.left.arrow.right': (
<>
),
'textformat.abc': (
Aa
),
'questionmark': (
<>
),
'plus': (
),
'ruler': (
<>
),
'arrow.up.doc': (
<>
),
'arrow.down.to.line': (
),
'square.and.arrow.up': (
<>
),
'bubble.left.fill': (
),
'ellipsis': (
<>
),
'xmark': (
),
'checkmark': (
),
'arrow.right': (
),
'arrow.up.right': (
),
'gearshape': (
<>
),
'chevron.right': (
),
'chevron.left': (
),
'chevron.down': (
),
'arrow.clockwise': (
<>
),
'arrow.counterclockwise': (
<>
),
'exclamationmark.circle.fill': (
<>
),
'exclamationmark.triangle.fill': (
<>
),
'questionmark.circle': (
<>
),
'crown.fill': (
),
'doc.badge.plus': (
<>
),
'gift.fill': (
<>
),
'trash': (
<>
),
'infinity': (
),
};
function SFIcon({ name, size = 18, color = 'currentColor', style = {} }) {
const body = SF_SYMBOLS[name];
if (!body) return null;
return (
);
}
// Issue dot
function IssueDot({ type, size = 8 }) {
return ;
}
// Back chevron
function Chevron({ dir = 'left', size = 16, color = '#1a0d2e' }) {
const d = { left: 'M11 3 L5 9 L11 15', right: 'M5 3 L11 9 L5 15', down: 'M3 5 L9 11 L15 5' }[dir];
return ;
}
// Phone header (custom, used inside screens instead of default nav bar)
function PhoneHeader({ platform, title, onBack, right, dark = false, sub }) {
const isIOS = platform === 'ios';
return (
);
}
Object.assign(window, { PillButton, Chip, Sparkle, SFIcon, IssueDot, Chevron, PhoneHeader });