hh-ui-components
Version:
33 lines • 4.16 kB
JavaScript
import React from "react";
import classNames from "classnames";
export var GridView = function (_a) {
var _b = _a.label, label = _b === void 0 ? "view" : _b, _c = _a.active, active = _c === void 0 ? false : _c, _d = _a.strokeColor, strokeColor = _d === void 0 ? "#1A1817" : _d, onClick = _a.onClick;
var classes = classNames({
"relative w-6 h-4 flex items-center justify-center 2xl:h-[1.111vw] 2xl:w-[1.667vw]": true
});
return (React.createElement("div", { className: "flex flex-row items-center bg-transparent" },
React.createElement("span", { className: "capitalize text-body-large lg:text-body-large-lg 2xl:text-body-large-2xl text-subdued" }, label),
React.createElement("button", { "aria-label": "Grid", type: "button", className: "".concat(classes, " mx-10 2xl:mx-10-2xl"), onClick: onClick },
React.createElement("svg", { className: "hidden h-[1rem] w-[1.5rem] cursor-pointer md:h-[2.083vw] md:w-[3.125vw] lg:block lg:h-[1rem] lg:w-[1.5rem] 2xl:h-[1.111vw] 2xl:w-[1.667vw]", viewBox: "0 0 25 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-labelledby": "Grid icon" },
React.createElement("rect", { x: "1.19531", y: "1", width: "5.66667", height: "15", stroke: strokeColor }),
React.createElement("rect", { x: "9.86328", y: "1", width: "5.66667", height: "15", stroke: strokeColor }),
React.createElement("rect", { x: "18.5273", y: "1", width: "5.66667", height: "15", stroke: strokeColor })),
React.createElement("svg", { className: "block h-[1.5rem] w-[1.5rem] cursor-pointer md:h-[3.125vw] md:w-[3.125vw] lg:hidden", width: "100%", height: "100%", viewBox: "0 0 25 24", role: "img", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": "Grid icon" },
React.createElement("rect", { x: "1", y: "0.5", width: "10", height: "10", stroke: strokeColor }),
React.createElement("rect", { x: "14", y: "0.5", width: "10", height: "10", stroke: strokeColor }),
React.createElement("rect", { x: "1", y: "13.5", width: "10", height: "10", stroke: strokeColor }),
React.createElement("rect", { x: "14", y: "13.5", width: "10", height: "10", stroke: strokeColor }))),
React.createElement("button", { "aria-label": "Grid", type: "button", className: "".concat(classes), onClick: onClick },
React.createElement("svg", { className: "hidden h-[1rem] w-[1.5rem] cursor-pointer md:h-[2.083vw] md:w-[3.125vw] lg:block lg:h-[1rem] lg:w-[1.5rem] 2xl:h-[1.111vw] 2xl:w-[1.667vw]", width: "100%", height: "100%", viewBox: "0 0 25 17", fill: "none", role: "img", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": "Grid icon" },
React.createElement("rect", { x: "1.19531", y: "1", width: "3.5", height: "6", stroke: strokeColor }),
React.createElement("rect", { x: "7.69531", y: "1", width: "3.5", height: "6", stroke: strokeColor }),
React.createElement("rect", { x: "14.1953", y: "1", width: "3.5", height: "6", stroke: strokeColor }),
React.createElement("rect", { x: "20.6953", y: "1", width: "3.5", height: "6", stroke: strokeColor }),
React.createElement("rect", { x: "1.19531", y: "10", width: "3.5", height: "6", stroke: strokeColor }),
React.createElement("rect", { x: "7.69531", y: "10", width: "3.5", height: "6", stroke: strokeColor }),
React.createElement("rect", { x: "14.1953", y: "10", width: "3.5", height: "6", stroke: strokeColor }),
React.createElement("rect", { x: "20.6953", y: "10", width: "3.5", height: "6", stroke: strokeColor })),
React.createElement("svg", { className: "block h-[1.5rem] w-[1.5rem] cursor-pointer md:h-[3.125vw] md:w-[3.125vw] lg:hidden", width: "100%", height: "100%", viewBox: "0 0 25 24", fill: "none", role: "img", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": "Grid icon" },
React.createElement("rect", { x: "1", y: "0.5", width: "23", height: "23", stroke: strokeColor })))));
};
//# sourceMappingURL=GridView.js.map