// Shared UI atoms for Sugar Tracker
// traffic-light color based on pct of goal (added sugar)
function statusColor(pct, palette) {
if (pct < 0.67) return palette.green;
if (pct < 1.0) return palette.amber;
return palette.red;
}
function statusLabel(pct) {
if (pct < 0.5) return 'On track';
if (pct < 0.85) return 'Watch it';
if (pct < 1.0) return 'Close to limit';
return 'Over limit';
}
// Inline SVG icons — hairline, 1.5 stroke
const Icon = {
search: (c = 'currentColor') => (
),
plus: (c = 'currentColor') => (
),
close: (c = 'currentColor') => (
),
chevron: (c = 'currentColor') => (
),
back: (c = 'currentColor') => (
),
home: (c = 'currentColor', fill = false) => (
),
chart: (c = 'currentColor', fill = false) => (
),
logIcon: (c = 'currentColor') => (
),
clock: (c = 'currentColor') => (
),
trash: (c = 'currentColor') => (
),
info: (c = 'currentColor') => (
),
};
// Food category icon (tiny colored square with letter)
function FoodBadge({ cat, palette }) {
const map = {
Fruit: { bg: '#FFF1E8', fg: '#C2410C', letter: 'F' },
Dairy: { bg: '#EEF4FB', fg: '#1E4E8C', letter: 'D' },
Drinks: { bg: '#F3EEF8', fg: '#6B21A8', letter: 'B' },
Snacks: { bg: '#FEF3C7', fg: '#92400E', letter: 'S' },
Breakfast: { bg: '#FEF9C3', fg: '#854D0E', letter: 'B' },
Condiments: { bg: '#FEE2E2', fg: '#991B1B', letter: 'C' },
Meals: { bg: '#DCFCE7', fg: '#166534', letter: 'M' },
};
const c = map[cat] || map.Fruit;
return (
{c.letter}
);
}
// Rounded-corner stacked bar used in ring and charts
function StatPill({ label, value, unit, accent, small }) {
return (
{accent && }
{label}
{value}
{unit}
);
}
window.statusColor = statusColor;
window.statusLabel = statusLabel;
window.Icon = Icon;
window.FoodBadge = FoodBadge;
window.StatPill = StatPill;