hh-ui-components
Version:
23 lines • 1.68 kB
JavaScript
import React from "react";
import classNames from "classnames";
export 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 = classNames({
"": 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.createElement("div", null, handle ? (React.createElement("a", { href: "/products/".concat(handle) },
React.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.createElement("div", { className: "rounded-full ".concat(classes), style: styles.popup })))) : (React.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.createElement("div", { className: "rounded-full ".concat(classes), style: styles.popup })))));
};
//# sourceMappingURL=ColorSwatch.js.map