// arcai-components.jsx — Shared design system components
// ── Pill / Chip ──────────────────────────────────────────────────────────
function StreakChip({ days }) {
return (
🔥
{days} hari
);
}
function XPChip({ xp, animating }) {
return (
⚡ {xp}
);
}
function EyebrowChip({ children, style }) {
return (
{children}
);
}
function LevelChip({ level, label }) {
const intensities = ['','rgba(212,255,58,0.12)','rgba(212,255,58,0.2)','rgba(212,255,58,0.3)','rgba(212,255,58,0.4)','rgba(212,255,58,0.5)'];
return (
LEVEL {level}{label ? ` · ${label}` : ''}
);
}
function StatusChip({ status }) {
const map = {
success: { bg: 'rgba(123,237,111,0.15)', color: '#7BED6F', label: 'Benar' },
partial: { bg: 'rgba(255,196,0,0.15)', color: '#FFC400', label: 'Sebagian' },
retry: { bg: 'rgba(255,75,145,0.15)', color: '#FF4B91', label: 'Coba Lagi' },
};
const s = map[status] || map.success;
return (
{s.label}
);
}
// ── Button ───────────────────────────────────────────────────────────────
function BtnPrimary({ children, onClick, disabled, fullWidth, size = 'lg' }) {
const [pressed, setPressed] = React.useState(false);
const pad = size === 'lg' ? '14px 24px' : '10px 18px';
const fs = size === 'lg' ? 15 : 14;
return (
);
}
function BtnGhost({ children, onClick, danger, small }) {
const [hover, setHover] = React.useState(false);
return (
);
}
// ── Progress Bar ─────────────────────────────────────────────────────────
function ProgressBar({ value, max = 100, height = 6, style }) {
const pct = Math.min(100, Math.max(0, (value / max) * 100));
return (
);
}
// ── Radar Chart ──────────────────────────────────────────────────────────
function RadarChart({ data, size = 200, animated }) {
// data: [{label, value (0-1)}] — 5 points
const cx = size / 2, cy = size / 2, r = size * 0.38;
const n = data.length;
const [progress, setProgress] = React.useState(animated ? 0 : 1);
React.useEffect(() => {
if (!animated) return;
let start = null;
const dur = 900;
const frame = (ts) => {
if (!start) start = ts;
const t = Math.min(1, (ts - start) / dur);
setProgress(t);
if (t < 1) requestAnimationFrame(frame);
};
const id = requestAnimationFrame(frame);
return () => cancelAnimationFrame(id);
}, [animated]);
const angle = (i) => (Math.PI * 2 * i) / n - Math.PI / 2;
const pt = (i, val) => {
const a = angle(i);
const rv = val * r * progress;
return [cx + rv * Math.cos(a), cy + rv * Math.sin(a)];
};
const labelPt = (i) => {
const a = angle(i);
const lr = r + 22;
return [cx + lr * Math.cos(a), cy + lr * Math.sin(a)];
};
// grid circles
const gridLevels = [0.25, 0.5, 0.75, 1];
const gridPoly = (level) => {
return Array.from({ length: n }, (_, i) => {
const [x, y] = pt(i, level);
return `${x},${y}`;
}).join(' ');
};
const fillPoints = data.map((d, i) => pt(i, d.value)).map(([x, y]) => `${x},${y}`).join(' ');
return (
);
}
// ── Mini Sparkline ───────────────────────────────────────────────────────
function Sparkline({ data, width = 60, height = 24, color = 'var(--accent)' }) {
const max = Math.max(...data), min = Math.min(...data);
const range = max - min || 1;
const pts = data.map((v, i) => {
const x = (i / (data.length - 1)) * width;
const y = height - ((v - min) / range) * height;
return `${x},${y}`;
}).join(' ');
return (
);
}
// ── Mini Line Chart ──────────────────────────────────────────────────────
function LineChart({ data, width = 320, height = 120, label }) {
const maxV = Math.max(...data.map(d => d.value));
const minV = Math.min(...data.map(d => d.value));
const range = maxV - minV || 1;
const pad = { t: 16, r: 12, b: 28, l: 32 };
const W = width - pad.l - pad.r;
const H = height - pad.t - pad.b;
const pts = data.map((d, i) => {
const x = pad.l + (i / (data.length - 1)) * W;
const y = pad.t + H - ((d.value - minV) / range) * H;
return { x, y, ...d };
});
const polyline = pts.map(p => `${p.x},${p.y}`).join(' ');
const area = `${pts[0].x},${pad.t + H} ${polyline} ${pts[pts.length-1].x},${pad.t + H}`;
return (
);
}
// ── Phone Frame ──────────────────────────────────────────────────────────
function PhoneFrame({ children, width = 375, height = 812 }) {
const scale = Math.min(1, 560 / height, 320 / width);
return (
{/* Dynamic island */}
{/* Screen */}
{/* Status bar */}
{children}
{/* Home indicator */}
isHoverable && setHover(true)}
onMouseLeave={() => isHoverable && setHover(false)}
style={{
background: 'var(--surface-1)',
border: `1px solid ${hover ? 'var(--accent-deep)' : 'var(--border)'}`,
borderRadius: 18,
transition: 'transform 0.2s, border-color 0.2s',
transform: hover && isHoverable ? 'translateY(-3px)' : 'none',
cursor: onClick ? 'pointer' : 'default',
...style
}}
>{children}
);
}
// ── Section separator ─────────────────────────────────────────────────────
function Divider() {
return ;
}
// ── Avatar / Monogram ─────────────────────────────────────────────────────
function Avatar({ name, size = 32, src }) {
const initials = name ? name.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase() : '?';
const hue = name ? (name.charCodeAt(0) * 37 + name.charCodeAt(1 || 0) * 17) % 360 : 200;
return (
{src ?
: initials}