opendash/dist/components/OpenDashFrontpage.layout.js

open.DASH data visualization framework

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import * as React from "react";
import styled from "styled-components";
import { Icon as LegacyIcon } from "@ant-design/compatible";
import { useTranslation } from "..";
export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  overflow: hidden;\n\n  height: 100%;\n  width: 100%;\n"], ["\n  position: absolute;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  overflow: hidden;\n\n  height: 100%;\n  width: 100%;\n"])));
export var Tile = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /* ", " */\n  width: 200px;\n  height: 200px;\n\n  margin: 10px;\n\n  background: ", ";\n  color: white;\n\n  z-index: 2;\n\n  border: 3px solid ", ";\n  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  cursor: pointer;\n\n  :hover {\n    background: white;\n    color: ", ";\n  }\n"], ["\n  /* ", " */\n  width: 200px;\n  height: 200px;\n\n  margin: 10px;\n\n  background: ", ";\n  color: white;\n\n  z-index: 2;\n\n  border: 3px solid ", ";\n  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  cursor: pointer;\n\n  :hover {\n    background: white;\n    color: ", ";\n  }\n"])), function (props) { return (props.size === "small" ? "100px" : "200px"); }, function (props) { return props.color || "#676767"; }, function (props) { return props.color || "#676767"; }, function (props) { return props.color || "#676767"; });
export var TileInner = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
export var LabelHolder = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-align: center;\n  font-size: 16px;\n  padding: 10px;\n"], ["\n  text-align: center;\n  font-size: 16px;\n  padding: 10px;\n"])));
export var IconHolder = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-align: center;\n  font-size: 60px;\n"], ["\n  text-align: center;\n  font-size: 60px;\n"])));
export var Element = function (_a) {
    var label = _a.label, icon = _a.icon, color = _a.color, onClick = _a.onClick;
    var t = useTranslation(["opendash"])[0];
    return (React.createElement(Tile, { color: color, onClick: onClick },
        React.createElement(TileInner, null,
            React.createElement(IconHolder, null,
                React.createElement(LegacyIcon, { type: icon })),
            React.createElement(LabelHolder, null, t(label)))));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
//# sourceMappingURL=OpenDashFrontpage.layout.js.map