antd-color-editor
Version:
An open-source color editor for designing color system
88 lines (87 loc) • 3.65 kB
JavaScript
var _templateObject, _templateObject2, _templateObject3;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { Segmented, Space, Tag } from 'antd';
import { memo } from 'react';
import styled from 'styled-components';
import PkgInfo from "../../../package.json";
/******************************************************
*********************** Style *************************
******************************************************/
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var NavBarView = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n height: 46px;\n padding: 0 24px;\n\n background: ", ";\n border-bottom: 1px solid ", ";\n"])), function (_ref) {
var theme = _ref.theme;
return theme.colorBgContainer;
}, function (_ref2) {
var theme = _ref2.theme;
return theme.colorBorder;
});
var LogoText = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-size: 16px;\n font-weight: 600;\n line-height: 18px;\n color: ", ";\n white-space: nowrap;\n\n > span {\n background-image: linear-gradient(\n to left,\n ", ",\n ", "\n );\n background-clip: text;\n\n -webkit-text-fill-color: transparent;\n }\n"])), function (_ref3) {
var theme = _ref3.theme;
return theme.colorText;
}, function (_ref4) {
var theme = _ref4.theme;
return theme.colorPrimary;
}, function (_ref5) {
var theme = _ref5.theme;
return theme.colorPrimaryHover;
});
var AddonView = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 240px;\n"])));
export var TabKey = /*#__PURE__*/function (TabKey) {
TabKey[TabKey["colors"] = 0] = "colors";
TabKey[TabKey["config"] = 1] = "config";
TabKey[TabKey["token"] = 2] = "token";
TabKey[TabKey["three"] = 3] = "three";
return TabKey;
}({});
var tabsList = [{
label: '色板',
value: TabKey.colors
}, {
label: '模型',
value: TabKey.three
}, {
label: '变量',
value: TabKey.token
}, {
label: '配置',
value: TabKey.config
}];
var NavBar = /*#__PURE__*/memo(function (_ref6) {
var tabKey = _ref6.tabKey,
setTabKey = _ref6.setTabKey,
_ref6$logo = _ref6.logo,
logo = _ref6$logo === void 0 ? 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' : _ref6$logo,
_ref6$title = _ref6.title,
title = _ref6$title === void 0 ? PkgInfo.name : _ref6$title,
_ref6$logoHref = _ref6.logoHref,
logoHref = _ref6$logoHref === void 0 ? PkgInfo.homepage : _ref6$logoHref;
// @ts-ignore
return /*#__PURE__*/_jsxs(NavBarView, {
children: [/*#__PURE__*/_jsx(AddonView, {
children: /*#__PURE__*/_jsx("a", {
href: logoHref,
rel: "noreferrer",
target: "_blank",
children: /*#__PURE__*/_jsxs(Space, {
align: "center",
children: [/*#__PURE__*/_jsx("img", {
alt: 'logo',
height: 18,
src: logo
}), /*#__PURE__*/_jsx(LogoText, {
children: title
}), (PkgInfo === null || PkgInfo === void 0 ? void 0 : PkgInfo.version) && /*#__PURE__*/_jsxs(Tag, {
color: "blue",
children: ["v", PkgInfo.version]
})]
})
})
}), /*#__PURE__*/_jsx(Segmented, {
onChange: setTabKey,
options: tabsList,
value: tabKey
}), /*#__PURE__*/_jsx(AddonView, {})]
});
});
export default NavBar;