1  import React from 'react';
 2  import { PropTypes } from 'prop-types';
 3  import getConfig from 'next/config';
 4  import './style.scss';
 5  
 6  const { publicRuntimeConfig } = getConfig();
 7  
 8  const SearchBar = props => (
 9    <div
10      className={`search-bar ${props.isSearchActive ? 'search-active' : ''}`}
11      style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg)` }}
12    >
13      <div className="container">
14        <h3 className="main-heading" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/heading-textured-bg.jpg)` }}>
15          Archives
16        </h3>
17        <form className="search-form">
18          <input
19            className="search-input"
20            type="search"
21            placeholder="Search"
22            value={props.term}
23            onChange={props.onSearchInputChange}
24          />
25          <img className="search-icon" src={`${publicRuntimeConfig.subDirPath}/static/img/search-icon.svg`} alt="Search" />
26          { props.isSearchActive && (
27            <button
28              className="search-clear-button"
29              onClick={props.clearSearchInput}
30            >
31              <img src={`${publicRuntimeConfig.subDirPath}/static/img/clear-search-icon.svg`} alt="Clear search" />
32            </button>
33            )
34          }
35        </form>
36        {props.numResults > 0 && props.numResults[0] !== null ?
37          <p className="search-count">{ props.numMatchedTerms } search term matches | { props.numResults } interview matches</p> :
38        ''}
39      </div>
40    </div>
41  );
42  
43  SearchBar.propTypes = {
44    term: PropTypes.string.isRequired,
45    isSearchActive: PropTypes.bool.isRequired,
46    onSearchInputChange: PropTypes.func.isRequired,
47    clearSearchInput: PropTypes.func.isRequired,
48    numResults: PropTypes.number.isRequired,
49    numMatchedTerms: PropTypes.number.isRequired,
50  };
51  
52  export default SearchBar;