// shared.jsx — icons, wave dividers, helper components shared across pages
const { useState, useEffect, useRef } = React;
/* ---- Inline stroke icons (Lucide-style, 1.75 stroke, currentColor) ---- */
const Icon = {
check: (p) => (
),
bolt: (p) => (
),
refresh: (p) => (
),
sun: (p) => (
),
drop: (p) => (
),
lock: (p) => (
),
unlock: (p) => (
),
flame: (p) => (
),
play: (p) => (),
userplus: (p) => (
),
gift: (p) => (
),
camera: (p) => (
),
instagram: (p) => (),
tiktok: (p) => (),
facebook: (p) => (),
};
/* ---- Wave divider. fill = wave colour, sits at boundary of two surfaces ---- */
function Wave({ fill = "var(--hyro-red)", flip = false, height = 46 }) {
return (
);
}
/* ---- Circular milestone ring with day number + fill fraction ---- */
function MilestoneRing({ day, frac, size = 76 }) {
const r = size / 2 - 6;
const c = 2 * Math.PI * r;
return (
);
}
/* ---- Hyro 750ml bottle icon (uses the line-art asset). Empty by default;
red liquid rises + tick appears when done. state: future|missable|today|done ---- */
function Bottle({ state }) {
const done = state === "done";
return (
{done && (
{Icon.check({ style: { width: "62%", height: "62%", stroke: "var(--hyro-red)", strokeWidth: 3.2, fill: "none" } })}
)}
);
}
Object.assign(window, { Icon, Wave, MilestoneRing, Bottle });
