unified-video-framework
Version:
Cross-platform video player framework supporting iOS, Android, Web, Smart TVs (Samsung/LG), Roku, and more
41 lines • 3.08 kB
JavaScript
import React from "react";
export default function ProductPanel({ products, visible, position = "right", width = 360, onProductClick, onClose }) {
console.log('[COMMERCE] 📋 ProductPanel:', { visible, products: products.length, position, width });
const handleClose = () => {
console.log('[COMMERCE] ✖️ Panel close button clicked');
onClose();
};
const style = {
position: "fixed",
top: position === "bottom" ? undefined : 0,
bottom: 0,
right: position === "right" ? 0 : undefined,
left: position === "left" ? 0 : position === "bottom" ? 0 : undefined,
width: position === "bottom" ? "100vw" : width,
height: position === "bottom" ? 300 : "100vh",
background: "rgba(18,18,18,0.92)",
backdropFilter: "blur(10px)",
borderLeft: position === "right" ? "1px solid rgba(255,255,255,0.1)" : undefined,
borderRight: position === "left" ? "1px solid rgba(255,255,255,0.1)" : undefined,
borderTop: position === "bottom" ? "1px solid rgba(255,255,255,0.1)" : undefined,
transform: visible ? "translateX(0)" : position === "right" ? "translateX(100%)" : position === "left" ? "translateX(-100%)" : "translateY(100%)",
transition: "transform 240ms ease",
zIndex: 500,
overflowY: "auto",
pointerEvents: visible ? "auto" : "none",
};
return (React.createElement("aside", { style: style, "aria-hidden": !visible, "aria-label": "Products in this video" },
React.createElement("div", { style: { display: "flex", alignItems: "center", padding: "12px 16px", borderBottom: "1px solid rgba(255,255,255,0.1)" } },
React.createElement("div", { style: { color: "#fff", fontWeight: 700 } }, "Products"),
React.createElement("button", { onClick: handleClose, style: { marginLeft: "auto", background: "transparent", color: "#fff", border: 0, fontSize: 20, cursor: "pointer", pointerEvents: "auto" }, "aria-label": "Close products" }, "\u00D7")),
React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr", gap: 12, padding: 16 } }, products.map(p => (React.createElement("button", { key: p.id, onClick: () => onProductClick(p), style: {
display: "grid", gridTemplateColumns: "64px 1fr", gap: 12, textAlign: "left",
background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)",
borderRadius: 12, padding: 8, cursor: "pointer"
} },
React.createElement("img", { src: p.thumbnails.square, alt: "", width: 64, height: 64, style: { borderRadius: 8, objectFit: "cover" } }),
React.createElement("div", { style: { display: "grid", gap: 4 } },
React.createElement("div", { style: { color: "#fff", fontWeight: 600, fontSize: 14 } }, p.title),
React.createElement("div", { style: { color: "#FFD166", fontSize: 13 } }, p.pricing.priceText ?? `${p.pricing.currency} ${p.pricing.amount}`))))))));
}
//# sourceMappingURL=ProductPanel.js.map