import React from "react"
import { Half, Third } from "./Layout"

import tw, { styled } from "twin.macro"
 

function Modal({ isOpen, onBackdropClick, ...props }) {
  if (isOpen) {
    return <div onClick={onBackdropClick} tw="fixed flex flex-col items-center inset-0 bg-gray-800 bg-opacity-75 z-50 overflow-y-auto lg:py-8">
      <Half {...props} onClick={e => e.stopPropagation()}>
        {props.children}
      </Half>
    </div>
  }
  return null;
}
export default Modal