{"size": 1842, "ext": "js", "max_stars_repo_path": "src/Block.js", "max_stars_repo_name": "djD-REK/HeroImageModalBlock", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/Block.js", "max_issues_repo_name": "djD-REK/HeroImageModalBlock", "max_issues_repo_issues_event_min_datetime": "2021-05-11T14:31:37.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-11T14:31:37.000Z", "max_forks_repo_path": "src/Block.js", "max_forks_repo_name": "djD-REK/HeroImageModalBlock", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 30.1967213115, "max_line_length": 87, "alphanum_fraction": 0.5238870793}
import React from "react"
import { css, StyleSheet } from "aphrodite/no-important"
import { getStyles } from "./getStyles"
import { defaultConfig } from "./configs"

const Block = (props) => {
  const classes = StyleSheet.create(getStyles(props))
  const { joinClasses } = props // Helper function to combine Atomic CSS with Aphrodite
  const { image, lineOneText, lineTwoText, buttonText, buttonLink } = props

  return (
    <div className={joinClasses("w-100 center", css(classes.wrapper))}>
      <div className="relative">
        <div className="absolute absolute--fill w-100 h-100">
          {image.uriBase && (
            <img
              className={joinClasses("dib w-100 h-100", css(classes.image))}
              src={image.uriBase + image.imagePath}
              alt={image.altText}
              width={image.width}
              height={image.height}
            />
          )}
        </div>
        <div
          className={joinClasses(
            "v-mid ph3 pv4 pv5-m pv6-l relative tc",
            css(classes.modalWrapper)
          )}
        >
          <div
            className={joinClasses(
              "w-80-m w-60-l center ph3 pv4 pa5-ns dib",
              css(classes.modal)
            )}
          >
            <div>
              <h2 className={joinClasses("ma0", css(classes.lineOne))}>
                {lineOneText}
              </h2>
              <h3 className={css(classes.lineTwo)}>{lineTwoText}</h3>
            </div>

            <a href={buttonLink} className={css(classes.buttonLink)}>
              <h4
                className={joinClasses("ph4 pv3 dib ma0", css(classes.button))}
              >
                {buttonText}
              </h4>
            </a>
          </div>
        </div>
      </div>
    </div>
  )
}

Block.defaultProps = defaultConfig

export default Block
