hh-ui-components
Version:
28 lines • 1.97 kB
JavaScript
;
exports.__esModule = true;
exports.ColorSwatch = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var classnames_1 = tslib_1.__importDefault(require("classnames"));
var ColorSwatch = function (_a) {
var color = _a.color, _b = _a.variants, variants = _b === void 0 ? "collection" : _b, active = _a.active, className = _a.className, handle = _a.handle, onClick = _a.onClick, isWhite = _a.isWhite;
var classes = (0, classnames_1["default"])({
"": true,
"w-[14px] h-[14px] 2xl:w-[0.972vw] 2xl:h-[0.972vw]": variants === "collection",
"w-[18px] h-[18px] 2xl:w-[1.250vw] 2xl:h-[1.250vw]": variants === "product"
});
var styles = {
popup: {
backgroundColor: color,
border: isWhite ? "1px solid #B8B8B8" : "none"
}
};
return (react_1["default"].createElement("div", null, handle ? (react_1["default"].createElement("a", { href: "/products/".concat(handle) },
react_1["default"].createElement("div", { className: "p-[3px] 2xl:p-[0.208vw] 2xl:mr-[0.069vw] rounded-full cursor-pointer ".concat(active
? "ring-1 2xl:ring-[0.069vw] ring-graphite"
: "ring-gray-200", " hover:ring-1 2xl:hover:ring-[0.069vw] transition ").concat(className || "") },
react_1["default"].createElement("div", { className: "rounded-full ".concat(classes), style: styles.popup })))) : (react_1["default"].createElement("div", { onClick: onClick, className: "p-[3px] 2xl:p-[0.208vw] mr-1 2xl:mr-[0.069vw] rounded-full cursor-pointer mb-[1px] ".concat(active ? "ring-1 2xl:ring-[0.069vw] ring-graphite" : "ring-gray-200", " hover:ring-1 2xl:hover:ring-[0.069vw] transition ").concat(className || "") },
react_1["default"].createElement("div", { className: "rounded-full ".concat(classes), style: styles.popup })))));
};
exports.ColorSwatch = ColorSwatch;
//# sourceMappingURL=ColorSwatch.js.map