d2-ui/node_modules-v25.0.x/react-color/docs/components/home/HomeDocumentation.js

d2-ui

'use strict'

import React from 'react'
import ReactCSS from 'reactcss'

import { Container, Grid } from 'react-basic-layout'
import { Raised } from 'react-material-design'
import Docs from 'react-docs'
import Markdown from '../../../modules/react-docs/lib/components/Markdown'

import documentation from '../../documentation'
import { Button, buttonmd, Sketch, sketchmd } from '../../../examples'

class HomeDocumentation extends ReactCSS.Component {

  classes() {
    return {
      'default': {
        body: {
          paddingTop: '50px',
          paddingBottom: '50px',
        },
        examples: {
          paddingTop: '30px',
        },
        example: {
          paddingBottom: '40px',
        },
        playground: {
          background: '#ddd',
          boxShadow: 'inset 0 2px 3px rgba(0,0,0,.1)',
          position: 'relative',
          height: '200px',
          borderRadius: '4px 4px 0 0',
        },
        exampleButton: {
          width: '90px',
          height: '24px',
          margin: '-12px 0 0 -45px',
          position: 'absolute',
          left: '50%',
          top: '50%',
        },
        exampleSketch: {
          width: '46px',
          height: '24px',
          margin: '-12px 0 0 -23px',
          position: 'absolute',
          left: '50%',
          top: '50%',
        },
      },
    }
  }

  render() {
    var bottom = <iframe src="https://ghbtns.com/github-btn.html?user=casesandberg&repo=react-color&type=star&count=true&size=large" scrolling="0" width="160px" height="30px" frameBorder="0"></iframe>

    // return <div></div>;
    return (
      <div is="body">
        <Container width={ 780 }>
          <Docs markdown={ documentation } primaryColor={ this.props.primaryColor } bottom={ bottom } />
          <Grid>
            <div />
            <div is="examples">

              <div is="example">
                <div is="playground">
                  <div is="exampleButton">
                    <Button />
                  </div>
                </div>
                <Markdown>{ buttonmd }</Markdown>
              </div>


              <div is="example">
                <div is="playground">
                  <div is="exampleSketch">
                    <Sketch />
                  </div>
                </div>
                <Markdown>{ sketchmd }</Markdown>
              </div>

            </div>
          </Grid>
        </Container>
      </div>
    )
  }
}

export default HomeDocumentation