How to use docz - 10 common examples

primaryDark: '#0046a3', // link (hovered)
    secondary: '#62ddbd', // props table shape type, brand background, <hr>, search result
    highlight: '#ec5564', // matched search query
    error: 'rgba(200,0,0,0.8)', // preview error background
  },
  fonts: {
    body: 'Lato, sans-serif',
    title: 'Oswald, sans-serif',
  },
  logo: {
    src: null,
    width: 40,
  },
};

export default theme(defaultThemeConfig)(Theme);

export const Logo = () => {
  const config = useConfig();
  return (
    
      
        <a href="{config.website}">
          
        </a>
      

      
        
          <a href="{config.repository}">Contribute</a>
        

        
          <a href="{`${config.website}/about`}">Contact</a>

export const Logo = () => {
  const config = useConfig()
  return (
    
      
        <span>Grafana Tanka</span>
        <span>{config.description}</span>
      
    
  )

export const Editor: React.SFC = ({
  mode,
  children,
  actions,
  onChange,
  className,
  editorClassName,
  language: defaultLanguage,
  ...props
}) => {
  const config = useConfig()
  const initialCode = useMemo(() => getChildren(children), [children])
  const [code, setCode] = useState(initialCode)
  const language = defaultLanguage || getLanguage(children)
  const options = {
    ...props,
    tabSize: 2,
    mode: language || mode,
    lineNumbers: true,
    lineWrapping: true,
    autoCloseTags: true,
    theme: 'docz-light',
  }

  const onEditorDidMount = (editor: any) => {
    if (editor) removeLastLine(editor)
  }

export const Layout = props => {
  const config = useConfig()
  return (
    
       div': { flex: '1 1 auto' } })}>
        
        {props.children}
      
    
  )
}

export const Header = () => {
  const config = useConfig();
  const { edit = true, ...doc } = useCurrentDoc();

  return (
    <div>
      <div>
        
        
          {config.repository &amp;&amp; (
            
              <a rel="noopener noreferrer" href="{config.repository}">
                </a></div></div>

const Theme: React.SFC = ({ children }) => {
  const config = useConfig()
  return (
    
      
        <main>
          
          {children}
        </main>
      
    
  )
}

const Theme = ({ children }) => {
  const config = useConfig()
  return (
    
      
        {children}
      
    
  )
}

export const Header = () => {
  const config = useConfig();

  return (
    <div>
      <div>
        
          
          
            <a rel="noopener noreferrer" href="{config.repository}">
              
            </a>
          </div></div>

export const Logo = () => {
  const config = useConfig();
  return (
    <div>
      
        <img alt="{config.title}" src="{logo}">
      
      <div>
        {config.description}
      </div>
    </div>
  );
};