{"size": 2834, "ext": "js", "max_stars_repo_path": "components/HomePageComponents/HomeHero/index.js", "max_stars_repo_name": "dpla/dpla-frontend", "max_stars_repo_stars_event_min_datetime": "2018-02-07T17:27:29.000Z", "max_stars_repo_stars_event_max_datetime": "2021-09-04T15:08:10.000Z", "max_issues_repo_path": "components/HomePageComponents/HomeHero/index.js", "max_issues_repo_name": "dpla/dpla-frontend", "max_issues_repo_issues_event_min_datetime": "2018-02-07T18:28:51.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-30T14:40:26.000Z", "max_forks_repo_path": "components/HomePageComponents/HomeHero/index.js", "max_forks_repo_name": "dpla/dpla-frontend", "max_forks_repo_forks_event_min_datetime": "2018-09-24T20:03:26.000Z", "max_forks_repo_forks_event_max_datetime": "2021-09-04T15:08:33.000Z"}
{"max_stars_count": 29, "max_issues_count": 428, "max_forks_count": 8, "avg_line_length": 30.4731182796, "max_line_length": 80, "alphanum_fraction": 0.5553987297}
import React from "react";
import Link from "next/link";

import Button from "components/shared/Button";

import { SITE_ENV, LOCAL_ID } from "constants/env";
import { LOCALS } from "constants/local";

import css from "./HomeHero.module.scss";
import utils from "stylesheets/utils.module.scss"

const getHeroLogo = () => {
  if (SITE_ENV !== "local") {
    return ""
  }
  const local = LOCALS[LOCAL_ID]
  if ('heroLogo' in local) {
    return local.heroLogo
  } else {
    return local.logo
  }
}

const heroLogo = getHeroLogo()

const bgImage = SITE_ENV !== "local"
  ? "/static/images/home-hero-bg.png"
  : `/static/local/${LOCALS[LOCAL_ID].theme}/${LOCALS[LOCAL_ID].background}`;

const HomeHero = ({ headerDescription, feature }) =>
  <div
    data-cy="home-hero"
    className={`${css.wrapper} ${feature ? css.withFeature : ""}`}
    style={{ backgroundImage: `url(${bgImage})` }}
  >
    <div data-cy="dpla-logo" className={`${css.header} ${utils.siteMaxWidth}`}>
      {SITE_ENV !== "local" &&
        <div className={`${css.homeLogo} ${css.dplaLogo}`}>
          <h1>Digital Public Library of America</h1>
        </div>}
      {SITE_ENV === "local" &&
        <div className={`${css.homeLogo} `}>
          <img
            className={css.localLogo}
            src={`/static/local/${LOCALS[LOCAL_ID].theme}/${heroLogo}`}
          />
          <h1 className={css.localText}>{LOCALS[LOCAL_ID].name}</h1>
        </div>}
      {SITE_ENV !== "local" &&
        <Button type="primary" size="large" url="/donate">
          Donate
        </Button>}
    </div>
    <div className={`${css.content} ${utils.homeSearchForm}`}>
      {headerDescription && <p className={css.headline}>{headerDescription}</p>}
      <form action="/search">
        <div className={css.search}>
          <input
            className={css.searchInput}
            aria-label="Search the collection"
            placeholder="Search the collection"
            name="q"
            autoComplete="off"
            type="search"
          />
          <button type="submit" className={css.searchButton}>
            <span>Search</span>
          </button>
        </div>
      </form>
      {SITE_ENV !== "local" &&
        <div className={css.links}>
          <Link href="/browse-by-topic">
            <a title="Browse DPLA by a curated set of topics">
              Browse by Topic
            </a>
          </Link>
          <Link href="/guides">
            <a title="View our Getting Started Guides">New? Start Here</a>
          </Link>
        </div>}
      {SITE_ENV === "local" &&
        LOCALS[LOCAL_ID].hasAbout &&
        <div className={css.links}>
          <Link href="/local/about" as="/about">
            <a>Learn more about {LOCALS[LOCAL_ID].name}</a>
          </Link>
        </div>}
    </div>
  </div>;

export default HomeHero;
