hh-ui-components
Version:
26 lines • 2.54 kB
JavaScript
import React from "react";
import { formatPrice } from "../../../helper/ProductHelper";
import { Button } from "../../Button";
import { ColorSwatch } from "../../ColorSwatch";
import ProgressBar from "../../ProgressBar";
export 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.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.createElement("div", { className: "pr-[17px] 2xl:pr-[1.181vw] w-[calc(100%-90px)] 2xl:w-[calc(100%-6.250vw)]" },
React.createElement("div", { className: "flex justify-between items-start " },
React.createElement("div", { className: "mb-10 mr-10 2xl:mb-10-2xl 2xl:mr-10-2xl" },
React.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.createElement("div", { className: "text-body-text md:text-body-text-md lg:text-body-text-lg 2xl:text-body-text-2xl" },
React.createElement("div", { className: "flex align-baseline" },
React.createElement("div", { className: "mr-10 text-body-text md:text-body-text-md lg:text-body-text-lg 2xl:text-body-text-2xl" }, formatPrice(Number(price))),
discountedPrice ? (React.createElement("del", { className: " text-subdued" }, formatPrice(Number(discountedPrice)))) : null))),
React.createElement("div", null,
React.createElement(Button, { label: "Add", variants: "primary", size: "small", onClick: onClick }))),
React.createElement("div", { className: "flex flex-wrap mb-4 items-center" }, colors.map(function (e, i) { return (React.createElement(ColorSwatch, { color: e, variants: "product", className: "", active: i === 0 ? true : false, key: i })); })),
React.createElement("div", { className: "" },
React.createElement(ProgressBar, { width: 30 }))),
React.createElement("div", { className: "bg-light w-[90px] h-[120px] 2xl:w-[6.250vw] 2xl:h-[8.333vw]" },
React.createElement("img", { src: img, className: "w-90px h-[120px] 2xl:w-[6.250vw] 2xl:h-[8.333vw]" }))));
};
export default SingleGiftItem;
//# sourceMappingURL=SingleGiftItem.js.map