// Shared UI components
const { useState, useEffect, useRef, useMemo } = React;
const StatusBar = ({ light = false }) => (
);
const Logo = ({ size = 44 }) => (
);
const Brand = ({ size = 18, color = 'var(--c-ink)' }) => (
);
const Confetti = () => {
const colors = ['#1b9a5f', '#ff6b3d', '#ffc845', '#d4385e', '#6fd6b2', '#142340'];
const bits = Array.from({ length: 36 }, (_, i) => ({
left: Math.random() * 100,
color: colors[i % colors.length],
delay: Math.random() * 0.6,
duration: 1.2 + Math.random() * 1.2,
rotate: Math.random() * 360
}));
return (
{bits.map((b, i) => (
))}
);
};
const ScreenHeader = ({ onBack, title, right }) => (
{onBack && (
)}
{title &&
{title}
}
{right}
);
const ProductImg = ({ kind = 'green', label, size = 'md' }) => {
const dim = size === 'lg' ? { width: '100%', height: 130 } : size === 'sm' ? { width: 54, height: 54 } : { width: 72, height: 72 };
// Pseudo product shape per kind
const shape = ({
green: , // avocado-ish
navy: , // carton
orange: , // bottle/can
yellow: ,
berry: ,
mint: ,
})[kind] || ;
return (
{label &&
{label}
}
);
};
const Money = ({ value, struck = false }) => (
${value.toFixed(2)}
);
const StoreDot = ({ color, short, size = 28 }) => (
{short}
);
Object.assign(window, { StatusBar, Logo, Brand, Confetti, ScreenHeader, ProductImg, Money, StoreDot });