// ==============================================
// Shared UI: Icons, Layout, ProductCard, Toast
// ==============================================
const { useState, useEffect, useMemo, useRef, useCallback, createContext, useContext } = React;
/* ----- ICONS (inline strokes, no external) ----- */
const Icon = ({ name, size = 18, className = "" }) => {
const s = size;
const common = {
width: s, height: s, viewBox: "0 0 24 24", fill: "none",
stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round",
className
};
switch (name) {
case "search":return ;
case "cart":return ;
case "user":return ;
case "phone":return ;
case "mail":return ;
case "heart":return ;
case "trash":return ;
case "plus":return ;
case "minus":return ;
case "x":return ;
case "chevron-right":return ;
case "chevron-down":return ;
case "check":return ;
case "download":return ;
case "print":return ;
case "send":return ;
case "file-text":return ;
case "tag":return ;
case "filter":return ;
case "grid":return ;
case "list":return ;
case "package":return ;
case "truck":return ;
case "shield":return ;
case "users":return ;
case "trending-up":return ;
case "dashboard":return ;
case "box":return ;
case "log-out":return ;
case "log-in":return ;
case "star":return ;
case "edit":return ;
case "settings":return ;
case "map-pin":return ;
case "clock":return ;
case "menu":return ;
case "arrow-up":return ;
case "arrow-down":return ;
case "image":return ;
case "save":return ;
case "eye":return ;
case "external":return ;
case "zap":return ;
case "info":return ;
case "wrench":return ;
case "refresh":return ;
case "more":return ;
case "calendar":return ;
case "globe":return ;
case "dollar":return ;
case "facebook":return ;
case "line":return ;
default:return ;
}
};
/* ----- Product image: rich SVG photo when ProductPhoto available ----- */
const ProductImg = ({ product, size = "md" }) => {
if (window.ProductPhoto) {
return ;
}
const hue = HUE[(product.id - 1) % HUE.length];
const bg = `hsl(${hue}, 30%, 95%)`;
const stripe = `hsl(${hue}, 60%, 60%)`;
const bgInline = {
backgroundImage: `repeating-linear-gradient(135deg, transparent 0 14px, ${stripe}26 14px 16px), linear-gradient(180deg, ${bg}, #fff)`,
backgroundColor: bg
};
return (
);
};
/* simple stylized tool glyphs */
const ToolGlyph = ({ cat, hue }) => {
const color = `hsl(${hue}, 50%, 40%)`;
const acc = `hsl(${hue}, 70%, 55%)`;
const common = { width: 64, height: 64, viewBox: "0 0 64 64", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
switch (cat) {
case "power":
return (
);
case "hand":
return (
);
case "measure":
return (
);
case "fasten":
return (
);
case "safety":
return (
);
case "storage":
return (
);
default:
return null;
}
};
/* ----- TOPBAR + NAV ----- */
function TopBar({ session, cart, route, navigate, openLogin, logout, query, setQuery }) {
const cartCount = cart.reduce((s, i) => s + i.qty, 0);
return (
navigate("home")}>
อินเตอร์ ซัพพลาย (1992)
INTER SUPPLY (1992) CO., LTD.
setQuery(e.target.value)}
onFocus={() => navigate("catalog")}
placeholder="ค้นหาสินค้า, SKU, รหัส / Search products, SKU..." />
{session ?
:
}
{session &&
}
);
}
/* ----- PRODUCT CARD ----- */
function ProductCard({ product: p, onAdd, onView, inCart, isDealer }) {
const stockLabel = p.stock > 20 ? "พร้อมส่ง" : p.stock > 5 ? `เหลือ ${p.stock} ชิ้น` : p.stock > 0 ? `เหลือ ${p.stock} ชิ้น` : "หมดชั่วคราว";
const stockClass = p.stock > 20 ? "" : p.stock > 0 ? "low" : "out";
const [fav, setFav] = useState(false);
return (
onView(p)}>
{p.tag &&
{p.tag === "new" ? "NEW" : p.tag === "sale" ? "SALE" : "HOT"}}
{p.sku} · {p.brand}
{p.th}
{p.desc}
฿{fmtMoney(isDealer ? p.dealerPrice : p.price)}/ชิ้น
{p.oldPrice &&
฿{fmtMoney(p.oldPrice)}
}
0 ? "check" : "x"} size={12} />
{stockLabel}
{isDealer &&
Dealer Price
฿{fmtMoney(p.dealerPrice)} · -15%
}
{items.map((t) =>
{t.msg}
)}
e.stopPropagation()}>
{title}
{children}
{footer &&
{footer}
}
);
}
/* ----- QTY STEPPER ----- */
function QtyStepper({ value, onChange, min = 1, max = 999 }) {
return (
{
const v = parseInt(e.target.value || "0", 10);
if (!Number.isNaN(v)) onChange(Math.max(min, Math.min(max, v)));
}} />
);
}
Object.assign(window, { Icon, ProductImg, ToolGlyph, TopBar, ProductCard, ToastProvider, useToast, Modal, QtyStepper }); 