kitchen-color-studio/es/useSketchJSON/demo/index.js

an open-source color editor for designing color system

import { Button, Space } from 'antd';
import { useSketchJSON } from "../..";
import { memo, useRef } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export default /*#__PURE__*/memo(function () {
  var ref = useRef();
  var _useSketchJSON = useSketchJSON(),
    generateGroup = _useSketchJSON.generateGroup,
    generateSymbol = _useSketchJSON.generateSymbol;
  return /*#__PURE__*/_jsxs("div", {
    children: [/*#__PURE__*/_jsx("div", {
      ref: ref,
      style: {
        width: 100,
        height: 100,
        background: 'blue',
        marginBottom: 24
      }
    }), /*#__PURE__*/_jsxs(Space, {
      children: [/*#__PURE__*/_jsx(Button, {
        onClick: function onClick() {
          return generateGroup(ref.current);
        },
        type: "primary",
        children: "\u590D\u5236\u4E3A Sketch \u56FE\u5C42"
      }), /*#__PURE__*/_jsx(Button, {
        onClick: function onClick() {
          return generateSymbol(ref.current);
        },
        children: "\u590D\u5236\u4E3A Sketch \u7EC4\u4EF6"
      })]
    })]
  });
});