// ─────────────────────────────────────────────────────────────────────────
// store-shapes.jsx
// SVG-силуэты упаковки. Один компонент
// возвращает аккуратную фронт-проекцию (бутылка / банка / тюбик / спрей /
// пипетка / помпа). Цвет — заливка стекла/пластика; на каждой бутылке
// печатается мини-этикетка с брендом и названием.
// ─────────────────────────────────────────────────────────────────────────
function ProductShape({ shape = 'bottle', color = '#EFE3C8', label = 'ECOPROF', sub = '', style }) {
const stroke = 'rgba(0,0,0,0.16)';
const inner = 'rgba(0,0,0,0.06)';
// Затемнить цвет для контраста этикетки
const labelColor = '#2a241e';
const sublabelColor = 'rgba(42,36,30,0.55)';
const Label = ({ x = 50, y = 60, w = 50, h = 26 }) => (
{label}
{sub && (
{sub}
)}
);
if (shape === 'bottle') {
// классическая бутылка
return (
);
}
if (shape === 'jar') {
return (
);
}
if (shape === 'dropper') {
// пипетка-флакон
return (
);
}
if (shape === 'tube') {
return (
);
}
if (shape === 'spray') {
// мист
return (
);
}
if (shape === 'pump') {
return (
);
}
return null;
}
// Минималистическая иконка категории (упрощённая) — для кружков
function CategoryIcon({ shape, color = '#2a241e' }) {
const s = { fill: 'none', stroke: color, strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
if (shape === 'pump') return (
);
if (shape === 'jar') return (
);
if (shape === 'dropper') return (
);
if (shape === 'tube') return (
);
if (shape === 'spray') return (
);
if (shape === 'bottle') return (
);
return null;
}
Object.assign(window, { ProductShape, CategoryIcon, ProductMedia });
// ProductMedia — рендерить реальне фото товара (якщо є p.image), інакше
// фолбек на SVG-силует. Обробляє onError → теж переключається на силует.
function ProductMedia({ p, alt = '', fit = 'contain' }) {
const [failed, setFailed] = React.useState(false);
if (p && p.image && !failed) {
return (
setFailed(true)}
/>
);
}
// fallback
return ;
}