// components.jsx — UI partagée : icônes, anneaux, cartes, segmented, toggles
const { useState, useEffect, useRef } = React;
// ── Icônes (line, 24×24) ──────────────────────────────────────
const ICON_PATHS = {
today: <>,
meals: <>,
courses: <>,
progress:<>,
supps: <>,
flame: <>,
camera: <>,
plus: <>,
minus: <>,
check: <>,
drop: <>,
chevron: <>,
scan: <>,
scale: <>,
info: <>,
close: <>,
spark: <>,
sunrise: <>,
bowl: <>,
apple: <>,
moon: <>,
fish: <>,
milk: <>,
box: <>,
lock: <>,
user: <>,
};
function Icon({ name, size = 22, color = 'currentColor', sw = 1.8, fill = false, style }) {
const p = ICON_PATHS[name] || null;
return (
);
}
// ── Anneau de progression ─────────────────────────────────────
function Ring({ value, max, size = 132, stroke = 13, color, track, children, delay = 120 }) {
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const pct = Math.min(value / max, 1);
const [draw, setDraw] = useState(0);
// rAF tween (CSS transitions on SVG dash can freeze at the start frame)
useEffect(() => {
let raf, start;
const dur = 1000, from = 0, to = pct;
const ease = x => 1 - Math.pow(1 - x, 3);
const tick = (ts) => {
if (start == null) start = ts;
const k = Math.min((ts - start) / dur, 1);
setDraw(from + (to - from) * ease(k));
if (k < 1) raf = requestAnimationFrame(tick);
};
const t = setTimeout(() => { raf = requestAnimationFrame(tick); }, delay);
return () => { clearTimeout(t); cancelAnimationFrame(raf); };
}, [pct, delay]);
return (
);
}
// ── Mini barre (glucides / lipides) ──────────────────────────
function MacroBar({ label, value, max, color, t }) {
const pct = Math.min(value / max, 1) * 100;
return (
);
}
// ── Carte ─────────────────────────────────────────────────────
function Card({ children, t, style, onClick, pad = 18 }) {
return (
{children}
);
}
// ── Pastille checkbox ronde ──────────────────────────────────
function CheckDot({ on, color, t, size = 26 }) {
return (
{on && }
);
}
// ── Segmented / chips ─────────────────────────────────────────
function Chips({ items, active, onPick, t }) {
return (
{items.map(it => {
const on = active === it.id;
return (
);
})}
);
}
// ── Image de plat (générée IA via backend, fallback icône) ────
function useMealImage(mealName) {
const [url, setUrl] = useState(null);
useEffect(() => {
let alive = true;
if (!window.FuelFitAPI) return;
window.FuelFitAPI.getMealImage(mealName)
.then(u => { if (alive) setUrl(u); })
.catch(() => {}); // fallback silencieux sur l'icône
return () => { alive = false; };
}, [mealName]);
return url;
}
function MealImage({ meal, t, size = 54, radius = 15 }) {
const url = useMealImage(meal.name);
return (
{url
?
:
}