{"size": 1174, "ext": "js", "max_stars_repo_path": "src/components/Announcement.js", "max_stars_repo_name": "Anish-kumar7641/website-6", "max_stars_repo_stars_event_min_datetime": "2018-02-01T21:12:02.000Z", "max_stars_repo_stars_event_max_datetime": "2021-04-01T07:20:19.000Z", "max_issues_repo_path": "src/components/Announcement.js", "max_issues_repo_name": "Anish-kumar7641/website-6", "max_issues_repo_issues_event_min_datetime": "2017-12-19T07:59:39.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-12T23:09:11.000Z", "max_forks_repo_path": "src/components/Announcement.js", "max_forks_repo_name": "Anish-kumar7641/website-6", "max_forks_repo_forks_event_min_datetime": "2018-01-05T04:15:26.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-12T22:52:54.000Z"}
{"max_stars_count": 9, "max_issues_count": 271, "max_forks_count": 77, "avg_line_length": 21.3454545455, "max_line_length": 71, "alphanum_fraction": 0.6235093697}
import React from "react"
import { graphql, StaticQuery } from "gatsby"
import { Alert } from "reactstrap"
import PropTypes from "prop-types"

import { Close } from "./Icons"

const AnnouncementTemplate = ({ body, onClose }) => (
  <Alert color="info" className="announcement">
    <div className="body" dangerouslySetInnerHTML={{ __html: body }} />
    <button className="close-btn" onClick={onClose}>
      <Close size={16} />
    </button>
  </Alert>
)

AnnouncementTemplate.propTypes = {
  body: PropTypes.string,
  onClose: PropTypes.func,
}

// Query for announcement
export const query = graphql`
  query Announcement {
    allMarkdownRemark(
      filter: { frontmatter: { template: { eq: "announcement" } } }
    ) {
      edges {
        node {
          html
        }
      }
    }
  }
`

const Announcement = ({ onClose }) => (
  <StaticQuery
    query={query}
    render={(data) => {
      const body = data.allMarkdownRemark.edges[0].node.html
      if (!body) {
        return null
      }
      return <AnnouncementTemplate body={body} onClose={onClose} />
    }}
  />
)

Announcement.propTypes = {
  onClose: PropTypes.func,
}

export default Announcement
