hh-ui-components
Version:
24 lines • 2.15 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.QuantitySelector = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var classnames_1 = tslib_1.__importDefault(require("classnames"));
var QuantitySelector = function (_a) {
var _b = _a.className, className = _b === void 0 ? "" : _b;
var classes = (0, classnames_1["default"])({
"": true
});
return (react_1["default"].createElement("div", { className: "".concat(classes, " ").concat(className, " transition-all duration-300 flex bg-warmTone-2 rounded-[50px] w-[100px] h-[40px] px-20 md:px-20-md lg:px-20 2xl:px-20-2xl border border-warmTone-2 hover:border-black 2xl:w-[6.944vw] 2xl:h-[2.778vw] 2xl:rounded-[3.472vw] ") },
react_1["default"].createElement("button", { className: "outline-none", "aria-label": "decrease" },
react_1["default"].createElement("svg", { className: "", width: "100%", height: "100%", viewBox: "0 0 14 14", fill: "none", role: "img", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": "Minus" },
react_1["default"].createElement("path", { d: "M0 7H14", stroke: "#000" }))),
react_1["default"].createElement("div", { className: "flex items-center justify-center" },
react_1["default"].createElement("input", { type: "text", value: "1", readOnly: true, "aria-label": "Quantity", className: "input-var w-full text-center text-body-large-lg md:text-body-large-lg 2xl:text-body-large-16-2xl text-lnk outline-none bg-transparent" })),
react_1["default"].createElement("button", { className: "outline-none", "aria-label": "decrease" },
react_1["default"].createElement("svg", { className: className, width: "100%", height: "100%", viewBox: "0 0 14 14", role: "img", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": "Plus" },
react_1["default"].createElement("path", { d: "M0 7H14", stroke: "#000" }),
react_1["default"].createElement("path", { d: "M7 0V14", stroke: "#000" })))));
};
exports.QuantitySelector = QuantitySelector;
//# sourceMappingURL=QuantitySelector.js.map