hh-ui-components
Version:
34 lines • 3.36 kB
JavaScript
;
exports.__esModule = true;
exports.GiftBox = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var ProductHelper_1 = require("../../../helper/ProductHelper");
var Button_1 = require("../../Button");
var GiftBox = function (_a) {
var title = _a.title, size = _a.size, discountedPrice = _a.discountedPrice, img = _a.img;
var _b = (0, react_1.useState)(""), sizes = _b[0], setSizes = _b[1];
return (react_1["default"].createElement("div", { className: "flex items-stretch justify-between bg-white rounded-[10px] w-full 2xl:rounded-[0.694vw] " },
react_1["default"].createElement("div", { className: "pr-[17px] 2xl:pr-[1.181vw] w-[calc(100%-90px)] 2xl:w-[calc(100%-6.250vw)]" },
react_1["default"].createElement("div", { className: "flex justify-between items-start" },
react_1["default"].createElement("div", { className: "mb-10 mr-10 2xl:mb-10-2xl 2xl:mr-10-2xl w-[80%]" },
react_1["default"].createElement("div", { className: "text-body-text md:text-body-text-md lg:text-body-text-lg 2xl:text-body-text-2xl " }, title),
react_1["default"].createElement("div", { className: "flex align-baseline items-center" },
react_1["default"].createElement("div", { className: "mr-10 text-center text-body-text md:text-body-text-md lg:text-body-text-lg 2xl:text-body-text-2xl" }, "FREE"),
react_1["default"].createElement("del", { className: "text-subdued text-body-text md:text-body-text-md lg:text-body-text-lg 2xl:text-body-text-2xl" }, (0, ProductHelper_1.formatPrice)(Number(discountedPrice))))),
react_1["default"].createElement("div", null,
react_1["default"].createElement(Button_1.Button, { label: "add", variants: "primary", size: "small" }))),
react_1["default"].createElement("div", { className: " mr-10 w-full 2xl:mr-10-2xl" },
react_1["default"].createElement("div", { className: "mt-10 text-body-text md:text-body-text-md lg:text-body-text-lg 2xl:text-body-text-2xl " }, "Select a size")),
react_1["default"].createElement("div", { className: "flex justify-start mt-10" }, size &&
size.map(function (e) {
return (react_1["default"].createElement("button", { key: String(e), className: sizes === e
? "rounded text-[14px] ".concat(sizes ? "bg-quaternary" : null, " 2xl:text-[0.972vw] leading-[19.6px] 2xl:leading-[1.361vw] py-[10px] 2xl:py-[0.694vw] pl-[12px] pr-[10px] 2xl:px-[0.833vw] ").concat(!sizes ? "text-neutral" : "hover:bg-quaternary")
: "rounded text-[14px] 2xl:text-[0.972vw] leading-[19.6px] 2xl:leading-[1.361vw] py-[10px] 2xl:py-[0.694vw] pl-[12px] pr-[10px] 2xl:px-[0.833vw] ".concat(!sizes ? "text-neutral" : "hover:bg-quaternary"), onClick: function () { return setSizes(e); } }, String(e)));
}))),
react_1["default"].createElement("div", { className: "bg-light w-[90px] h-[120px] 2xl:w-[6.250vw] 2xl:h-[8.333vw]" },
react_1["default"].createElement("img", { src: img, className: "w-[90px] h-[120px] 2xl:w-[6.250vw] 2xl:h-[8.333vw]" }))));
};
exports.GiftBox = GiftBox;
exports["default"] = exports.GiftBox;
//# sourceMappingURL=GiftBox.js.map