kitchen-color-studio
Version:
an open-source color editor for designing color system
96 lines (95 loc) • 3.47 kB
JavaScript
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.withConfig({
displayName: "NavBarView",
componentId: "kitchen-color-studio__sc-3nfhyg-0"
})(["display:flex;align-items:center;justify-content:space-between;height:46px;padding:0 24px;background:", ";border-bottom:1px solid ", ";"], function (_ref) {
var theme = _ref.theme;
return theme.colorBgContainer;
}, function (_ref2) {
var theme = _ref2.theme;
return theme.colorBorder;
});
var LogoText = styled.div.withConfig({
displayName: "LogoText",
componentId: "kitchen-color-studio__sc-3nfhyg-1"
})(["font-size:16px;font-weight:600;line-height:18px;color:", ";> span{background-image:-webkit-linear-gradient( left,", ",", " );-webkit-background-clip:text;-webkit-text-fill-color:transparent;}"], 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.withConfig({
displayName: "AddonView",
componentId: "kitchen-color-studio__sc-3nfhyg-2"
})(["width:240px;"]);
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/bmw-prod/af1ea898-bf02-45d1-9f30-8ca851c70a5b.svg' : _ref6$logo,
_ref6$title = _ref6.title,
title = _ref6$title === void 0 ? 'Kitchen' : _ref6$title,
_ref6$logoHref = _ref6.logoHref,
logoHref = _ref6$logoHref === void 0 ? 'https://github.com/canisminor1990/kitchen-color-studio' : _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", {
height: 18,
src: logo
}), /*#__PURE__*/_jsxs(LogoText, {
children: [title, " ", /*#__PURE__*/_jsx("span", {
children: "ColorStudio"
})]
}), (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;