hello-world page edit

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/docz.iml" filepath="$PROJECT_DIR$/docz.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

docz.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

hello-world.jsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import styled from 'styled-components'
+import t from 'prop-types'
+
+const scales = {
+  small: `
+    padding: 5px 10px;
+    font-size: 14px;
+  `,
+  normal: `
+    padding: 10px 20px;
+    font-size: 16px;
+  `,
+  big: `
+    padding: 20px 30px;
+    font-size: 18px;
+  `,
+}
+
+const kind = outline => (bg, color) => {
+  const boxShadowColor = outline ? bg : 'transparent'
+  const backgroundColor = outline ? 'transparent' : bg
+
+  return `
+    background: ${backgroundColor};
+    box-shadow: inset 0 0 0 1px ${boxShadowColor};
+    color: ${outline ? bg : color};
+    transition: all .3s;
+
+    &:hover {
+      box-shadow: inset 0 0 0 1000px ${boxShadowColor};
+      color: ${color};
+    }
+  `
+}
+
+const kinds = outline => {
+  const get = kind(outline)
+
+  return {
+    primary: get('#1FB6FF', 'white'),
+    secondary: get('#5352ED', 'white'),
+    cancel: get('#FF4949', 'white'),
+    dark: get('#273444', 'white'),
+    gray: get('#8492A6', 'white'),
+  }
+}
+
+const getScale = ({ scale = 'normal' }) => scales[scale]
+const getKind = ({ kind = 'primary', outline = false }) => kinds(outline)[kind]
+
+const ButtonStyled = styled('button')`
+  ${getKind};
+  ${getScale};
+  cursor: pointer;
+  margin: 3px 5px;
+  border: none;
+  border-radius: 3px;
+`
+
+export const Button = ({ children, ...props }) => (
+  <ButtonStyled {...props}>{children}</ButtonStyled>
+)
+
+Button.propTypes = {
+  /**
+   * This is a pretty good description for this prop
+   */
+  scales: t.oneOf(['small', 'normal', 'big']),
+  kind: t.oneOf(['primary', 'secondary', 'cancel', 'dark', 'gray']),
+  outline: t.bool.isRequired,
+}
+
+Button.defaultProps = {
+  scales: 'normal',
+  kind: 'primary',
+  outline: false,
+}
+
+export function EditButton(props) {
+  let encodedStatus = encodeURIComponent(
+    "This live editor looks pretty darn handy #JavaScript"
+  )
+  let encodedURL = encodeURIComponent(
+    "https://ecs.chenxixian.cn/chenxixian/docz/src/master"
+  )
+
+  return (
+    <a
+      href={`https://ecs.chenxixian.cn/chenxixian/docz/_edit/master/hello-world.mdx`}
+      target="_blank"
+      className="EditButton">
+      Edit This Page!
+    </a>
+  )
+}
+