wat.jsx

import React from "react";
import ReactModal from "react-modal";
import styled from "react-emotion";

export interface ModalProps {
  open: boolean;
  contentLabel?: string;
  onClose: Function;
}

const Wrap = styled.div({
  padding: "8px"
});

const Header = styled.div({
  position: "relative",
  paddingTop: "25px"
});

const Close = styled.img({
  position: "absolute",
  top: "0px",
  right: "0px",
  cursor: "pointer"
});


const CloseButton = styled.button({
  outline: "none",
  border: "none"
});

const Modal: React.StatelessComponent<ModalProps> = ({
  open,
  contentLabel,
  children,
  onClose
}) => {
  
  // It complains about the onClick={onClose} :(
  return (
    <ReactModal isOpen={open} contentLabel={contentLabel}>
      <Wrap>
        <Header>
          <CloseButton onClick={onClose}>
            <Close src="/static/close.svg" />
          </CloseButton>
        </Header>
        {children}
      </Wrap>
    </ReactModal>
  );
};

export default Modal;