{"size": 1977, "ext": "js", "max_stars_repo_path": "src/components/highlight-card.js", "max_stars_repo_name": "jasonkylesmith/jasonkylesmith.com", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/highlight-card.js", "max_issues_repo_name": "jasonkylesmith/jasonkylesmith.com", "max_issues_repo_issues_event_min_datetime": "2022-01-10T07:04:25.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-21T16:56:10.000Z", "max_forks_repo_path": "src/components/highlight-card.js", "max_forks_repo_name": "jasonkylesmith/jasonkylesmith.com", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 10, "max_forks_count": null, "avg_line_length": 30.4153846154, "max_line_length": 73, "alphanum_fraction": 0.5235204856}
import { library } from "@fortawesome/fontawesome-svg-core"
import { fas } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { Link } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"
import React from "react"

library.add(fas)

const HighlightCard = props => {
  const { title, body, highlight } = props.node
  const { gatsbyImageData } = highlight.featuredImage
  const { slug } = highlight

  const category = highlight.category
    ? highlight.category.toLowerCase().replace(/\s+/g, "")
    : "blog"

  return (
    <div className="card highlight">
      <div className="card-body">
        <div className="row">
          <div className="col-12">
            <Link to={`/${category}/${slug}`} className="gallery-link">
              <div>
                <GatsbyImage
                  className=""
                  imgStyle={{ borderRadius: ".25rem" }}
                  image={gatsbyImageData}
                  alt={highlight.title}
                />
                <div className="highlight__caption">
                  <span className="small">{highlight.title}</span>
                </div>
              </div>
            </Link>
          </div>
          <div className="col-12">
            <h4 className="m-0">{title}</h4>
          </div>
        </div>
        <div className="row">
          <div className="col-12 highlight__body">
            <div
              dangerouslySetInnerHTML={{
                __html: body.childrenMarkdownRemark[0].html,
              }}
            />
          </div>
        </div>
        <div className="row">
          <div className="col-12 highlight__body highlight__body--right">
            <Link to={`/${category}`} className="">
              {title}
            </Link>
            <FontAwesomeIcon icon={["fas", "angle-right"]} size="md" />
          </div>
        </div>
      </div>
    </div>
  )
}

export default HighlightCard
