text: import React, { useState } from "react"
  import { Link } from "gatsby"
  import PropTypes from "prop-types"
  import IdentityModal from "react-netlify-identity-widget"
  
  const Header = ({ siteTitle }) => {
    const [showDialog, setShowDialog] = useState(false)
    return (
      <header
        style={{
          background: `rebeccapurple`,
          marginBottom: `1.45rem`,
        }}
      >
        <div
          style={{
            margin: `0 auto`,
            maxWidth: 960,
            padding: `1.45rem 1.0875rem`,
          }}
        >
          <h1 style={{ margin: 0 }}>
            <Link
              to="/"
              style={{
                color: `white`,
                textDecoration: `none`,
              }}
            >
              {siteTitle}
            </Link>
          </h1>
          <button onClick={() => setShowDialog(true)}>Log in</button>
        </div>
        <IdentityModal
          showDialog={showDialog}
          onCloseDialog={() => setShowDialog(false)}
        />
      </header>
    )
  }
  
  Header.propTypes = {
    siteTitle: PropTypes.string,
  }
  
  Header.defaultProps = {
    siteTitle: ``,
  }
  
  export default Header
  