{"size": 1067, "ext": "js", "max_stars_repo_path": "src/components/Header.js", "max_stars_repo_name": "vpasamic/employee-directory", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Header.js", "max_issues_repo_name": "vpasamic/employee-directory", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Header.js", "max_forks_repo_name": "vpasamic/employee-directory", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.4047619048, "max_line_length": 58, "alphanum_fraction": 0.4789128397}
import React from "react";

function Header(props) {
  return (
    <div className="jumbotron">
      <h1 className="display-4">Employee Tracker</h1>
      <p className="lead"></p>
      <div className="row">
        <div className="col"></div>
        <div className="col">
        <nav
          className="navbar"
          onSubmit={(e) => e.preventDefault()}
        >
          <form className="form-inline position-relative">
            <input
              className="form-control"
              style={{ width: "500px" }}
              name="search"
              onChange={props.handleSearch}
              type="search"
              placeholder="Search Directory"
              autoComplete="off"
              aria-label="Search"
            />
            <button
              className="btn-primary"
              onClick={props.clearSearchBar}
            >
              Clear Searchbar
            </button>
          </form>
        </nav>
        </div>
        <div className="col"></div>
      </div>
    </div>
  );
}

export default Header;
