// lib.jsx — shared atoms and tiny helpers for Electric EATS
// ─── icons (inline SVG — no external deps) ─────────────────────────
const Icon = {
scan: (p = {}) => (
),
swap: (p = {}) => (
),
pin: (p = {}) => (
),
stats: (p = {}) => (
),
arrow: (p = {}) => (
),
plus: (p = {}) => (
),
close: (p = {}) => (
),
check: (p = {}) => (
),
search: (p = {}) => (
),
sparkle: (p = {}) => (
),
bolt: (p = {}) => (
),
alert: (p = {}) => (
),
copy: (p = {}) => (
),
filter: (p = {}) => (
),
upArrow: (p = {}) => (
),
downArrow: (p = {}) => (
),
cart: (p = {}) => (
),
flame: (p = {}) => (
),
};
// ─── flag dot ─────────────────────────────────────────────────
function FlagDot({ flag, size = 9 }) {
const color = flag === "red" ? "var(--flag-red)" : flag === "yellow" ? "var(--flag-yellow)" : "var(--flag-green)";
return ;
}
// ─── label/eyebrow kicker ─────────────────────────────────────
function Kicker({ children, gold = false, style }) {
return (
{children}
);
}
// ─── score badge (number + delta) ─────────────────────────────
function ScoreBadge({ score, size = "lg" }) {
// Color band: red <50, amber 50-69, green 70+
const tone = score >= 70 ? "green" : score >= 50 ? "yellow" : "red";
const color =
tone === "green" ? "var(--flag-green)" :
tone === "yellow" ? "var(--flag-yellow)" : "var(--flag-red)";
const fs = size === "xl" ? 84 : size === "lg" ? 56 : size === "md" ? 36 : 22;
return (
{score}
/100
);
}
// ─── radial score ring (for hero) ─────────────────────────────
function ScoreRing({ score, size = 160, stroke = 8 }) {
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const off = c * (1 - Math.max(0, Math.min(100, score)) / 100);
const tone = score >= 70 ? "green" : score >= 50 ? "yellow" : "red";
const color =
tone === "green" ? "var(--primary)" :
tone === "yellow" ? "var(--flag-yellow)" : "var(--flag-red)";
return (
);
}
// ─── sparkline ─────────────────────────────────────────────────
function Sparkline({ data, height = 56, area = true, animate = true }) {
const w = 320, h = height, p = 4;
const min = Math.min(...data) - 5, max = Math.max(...data) + 5;
const range = Math.max(1, max - min);
const pts = data.map((v, i) => {
const x = p + (i * (w - p * 2)) / (data.length - 1);
const y = h - p - ((v - min) / range) * (h - p * 2);
return [x, y];
});
const path = "M " + pts.map((q) => q.join(",")).join(" L ");
const areaPath = `${path} L ${w - p},${h - p} L ${p},${h - p} Z`;
return (
);
}
// ─── pill / chip / hairline divider ────────────────────────────
function Pill({ children, tone = "default", icon, onClick, active }) {
const cls = "ee-pill ee-pill-" + tone + (active ? " is-active" : "");
return (
);
}
function Hairline({ gold }) {
return ;
}
// ─── card shell ────────────────────────────────────────────────
function Card({ children, pad = 16, style, className = "", onClick, gold = false }) {
return (
{children}
);
}
// ─── number with delta arrow ───────────────────────────────────
function Delta({ value }) {
const up = value >= 0;
return (
{up ? : }
{up ? "+" : ""}{value}
);
}
Object.assign(window, {
Icon, FlagDot, Kicker, ScoreBadge, ScoreRing, Sparkline, Pill, Hairline, Card, Delta,
});