{"size": 1751, "ext": "js", "max_stars_repo_path": "client/src/components/Search/components/SearchBar.js", "max_stars_repo_name": "Breahem-Bedi/SEER", "max_stars_repo_stars_event_min_datetime": "2020-11-20T07:46:28.000Z", "max_stars_repo_stars_event_max_datetime": "2020-11-20T07:46:28.000Z", "max_issues_repo_path": "client/src/components/Search/components/SearchBar.js", "max_issues_repo_name": "Breahem-Bedi/SEER", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/components/Search/components/SearchBar.js", "max_forks_repo_name": "Breahem-Bedi/SEER", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 29.1833333333, "max_line_length": 86, "alphanum_fraction": 0.5185608224}
import React from "react";
import "./SearchBar.css";

const SearchBar = ({ setTextSearch }) => {
  return (
    <>
      {/* Search Terms */}
      <div className="columns is-multiline box is-desktop is-paddingless">
        <div className="column is-6-desktop is-12-tablet split-border">
          <label className="label search-label">Search Terms</label>
          <input
            id="descrinpution"
            className="input search-input"
            placeholder="TDD + Waterfall + Productivity"
            type="text"
            onChange={(e) => setTextSearch(encodeURIComponent(e.target.value))}
          />
        </div>

        {/* Year From */}
        <div className="column is-2-desktop is-12-tablet split-border">
          <label className="label search-label">From</label>
          <input
            id="fromYear"
            className="input search-input"
            placeholder="Any Year"
            type="number"
            pattern="^\d{4}$"
            min={1000}
            max={9999}
          />
        </div>

        {/* Year To */}
        <div className="column is-2-desktop is-12-tablet split-border">
          <label className="label search-label">To</label>
          <input
            id="toYear"
            className="input search-input"
            placeholder="Any Year"
            type="number"
            pattern="^\d{4}$"
            min={1000}
            max={9999}
          />
        </div>

        {/* Search Button */}
        <div className="column is-2-desktop is-12-tablet is-12-mobile is-paddingless">
          <button className="button is-primary is-large search-btn">
            Search
          </button>
        </div>
      </div>
    </>
  );
};

export default SearchBar;
