CodepenButton.js

import React from 'react'
import { CodepenIcon } from '../icons'

const CodepenButton = ({ code, className }) => {
  const codepenObject = {
    title: 'Title',
    description: 'Some description',
    editors: '100',
    ...code,
  }
  
  return (
    <form 
      className={className}
      action="https://codepen.io/pen/define" 
      method="POST" 
      target="_blank">
      <input 
        type="hidden" 
        name="data" 
        value={JSON.stringify(codepenObject)} />
      <button style={buttonStyles}>
        <CodepenIcon />
      </button>
    </form>
  )
}

const buttonStyles = {
  border: 0,
  outline: 0,
  background: 'none',
  width: '100%',
  height: '100%',
  color: 'inherit',
  cursor: 'pointer',
}

export default CodepenButton