mdx-deck/docs/Counter.js

import React from 'react'
import styled from 'styled-components'
import { space, color } from 'styled-system'

const Root = styled.div([], {
  display: 'flex',
  alignItems: 'center'
})

const Button = styled.button([], {
  appearance: 'none',
  fontFamily: 'inherit',
  fontSize: 'inherit',
  fontWeight: 'bold',
  borderRadius: '4px',
  border: 'none',
  width: '2em',
  '&:focus': {
    outline: 'none',
    boxShadow: '0 0 0 2px magenta'
  }
}, space, color)
Button.defaultProps = {
  m: 0,
  px: 3,
  py: 2,
  color: 'background',
  bg: 'text'
}

const Samp = styled.samp([], {
}, space)


export default class Counter extends React.Component {
  state = {
    count: 0
  }

  inc = () => {
    this.setState(state => ({count: state.count + 1}))
  }

  dec = () => {
    this.setState(state => ({count: state.count - 1}))
  }

  render() {
    return (
      <Root>
        <Button ml='auto' onClick={this.dec}>-</Button>
        <Samp mx={3}>{this.state.count}</Samp>
        <Button mr='auto' onClick={this.inc}>+</Button>
      </Root>
    )
  }
}