storybook-addon-markuplint-proto/dist/esm/components/TabContent.js

Prototype of unofficial markuplint Storybook addon

import React from "react";
import { styled } from "@storybook/theming";
import { Title, Source, Link } from "@storybook/components";
var TabWrapper = styled.div(function (_ref) {
  var theme = _ref.theme;
  return {
    background: theme.background.content,
    padding: "4rem 20px",
    minHeight: "100vh",
    boxSizing: "border-box"
  };
});
var TabInner = styled.div({
  maxWidth: 768,
  marginLeft: "auto",
  marginRight: "auto"
});
export var TabContent = function TabContent(_ref2) {
  var code = _ref2.code;
  return /*#__PURE__*/React.createElement(TabWrapper, null, /*#__PURE__*/React.createElement(TabInner, null, /*#__PURE__*/React.createElement(Title, null, "My Addon"), /*#__PURE__*/React.createElement("p", null, "Your addon can create a custom tab in Storybook. For example, the official", " ", /*#__PURE__*/React.createElement(Link, {
    href: "https://storybook.js.org/docs/react/writing-docs/introduction"
  }, "@storybook/addon-docs"), " ", "uses this pattern."), /*#__PURE__*/React.createElement("p", null, "You have full control over what content is being rendered here. You can use components from", " ", /*#__PURE__*/React.createElement(Link, {
    href: "https://github.com/storybookjs/storybook/tree/master/lib/components"
  }, "@storybook/components"), " ", "to match the look and feel of Storybook, for example the", " ", /*#__PURE__*/React.createElement("code", null, "<Source />"), " component below. Or build a completely custom UI."), /*#__PURE__*/React.createElement(Source, {
    code: code,
    language: "jsx",
    format: false
  })));
};