hh-ui-components
Version:
31 lines • 3.06 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.SingleGiftItem = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var ProductHelper_1 = require("../../../helper/ProductHelper");
var Button_1 = require("../../Button");
var ColorSwatch_1 = require("../../ColorSwatch");
var ProgressBar_1 = tslib_1.__importDefault(require("../../ProgressBar"));
var SingleGiftItem = function (_a) {
var onClick = _a.onClick, price = _a.price, discountedPrice = _a.discountedPrice, img = _a.img, colors = _a.colors, title = _a.title;
return (react_1["default"].createElement("div", { className: "flex items-stretch justify-between bg-white rounded-10 px-20 w-full 2xl:px-20-2xl 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" },
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 === null || title === void 0 ? void 0 : title.toLocaleUpperCase()),
react_1["default"].createElement("div", { className: "text-body-text md:text-body-text-md lg:text-body-text-lg 2xl:text-body-text-2xl" },
react_1["default"].createElement("div", { className: "flex align-baseline" },
react_1["default"].createElement("div", { className: "mr-10 text-body-text md:text-body-text-md lg:text-body-text-lg 2xl:text-body-text-2xl" }, (0, ProductHelper_1.formatPrice)(Number(price))),
discountedPrice ? (react_1["default"].createElement("del", { className: " text-subdued" }, (0, ProductHelper_1.formatPrice)(Number(discountedPrice)))) : null))),
react_1["default"].createElement("div", null,
react_1["default"].createElement(Button_1.Button, { label: "Add", variants: "primary", size: "small", onClick: onClick }))),
react_1["default"].createElement("div", { className: "flex flex-wrap mb-4 items-center" }, colors.map(function (e, i) { return (react_1["default"].createElement(ColorSwatch_1.ColorSwatch, { color: e, variants: "product", className: "", active: i === 0 ? true : false, key: i })); })),
react_1["default"].createElement("div", { className: "" },
react_1["default"].createElement(ProgressBar_1["default"], { width: 30 }))),
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.SingleGiftItem = SingleGiftItem;
exports["default"] = exports.SingleGiftItem;
//# sourceMappingURL=SingleGiftItem.js.map