Method render

lib/components/searchBox.tsx:31–79

()

  };

  render() {
    return (
      <div style={searchBoxStyling}>
        <input type="text" className="search-box" onKeyUp={this.handleChange} ref={(input) => input?.focus()} />
        <svg className="search-button" onClick={() => this.props.prev(this.searchTerm)}>
          <use xlinkHref="./renderer/assets/search-icons.svg#left-arrow" />
        </svg>
        <svg className="search-button" onClick={() => this.props.next(this.searchTerm)}>
          <use xlinkHref="./renderer/assets/search-icons.svg#right-arrow" />
        </svg>
        <svg className="search-button" onClick={() => this.props.close()}>
          <use xlinkHref="./renderer/assets/search-icons.svg#cancel" />
        </svg>
        <style jsx>
          {`
            .search-box {
              font-size: 18px;
              padding: 3px 6px;
              width: 152px;
              border: none;
              float: left;
            }

            .search-box:focus {
              outline: none;
            }

            .search-button {
              background-color: #ffffff;
              color: black;
              padding: 7px 5.5px;
              text-align: center;
              text-decoration: none;
              display: inline-block;
              font-size: 16px;
              transition-duration: 0.4s;
              cursor: pointer;
              height: 27px;
              width: 24px;
              float: left;
            }
            .search-button:hover {
              background-color: #e7e7e7;
            }
          `}
        </style>
      </div>
    );
  }
}