UNPKG

hh-ui-components

Version:
33 lines 4.16 kB
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