function SearchView({ inboundSearchText }) {
  let [searchText, setSearchText] = useState('');
  let [searchResults, setSearchResults] = useState(null);
  let [similarResults, setSimilarResults] = useState(null);

  useEffect(() => {
    inboundSearchText && setSearchText(inboundSearchText);
  }, [inboundSearchText]);

  useEffect(() => {
    let searchColor = tinycolor(searchText);

    if (searchColor.isValid()) {
      // search input is valid.
      let hex = searchColor.toHexString();
      let alpha = searchColor.getAlpha();
      let results = getSearchableValuesByHex(hex);

      if (results.length) {
        // material color
        setSearchResults(results.map(value => ({
          // update material color with alpha.
          alpha: alpha ? alpha : value.alpha,
          ...value,
        })));
        setSimilarResults(null);
      } else {
        setSearchResults([{ hex, alpha }]);
        setSimilarResults(getCloseSearchableValues(searchColor));
      }
    } else {
      setSearchResults(null);
      setSimilarResults(null);
    }
  }, [searchText]);

  return <>
    <div className={styles.valueHeading}>Search</div>
    <input className={styles.searchInput}
      ref={node => node && node.focus()}
      value={searchText}
      onInput={ev => setSearchText(ev.currentTarget.value)}
      placeholder="Color code or name" />
    {searchText && <>
      {searchResults && searchResults.map(value =>
        <ValueTile large key={`${value.name},${value.hex}`} value={value} />)}
      {similarResults && <>
        <div className={styles.matchingMaterialLabel}>Similar colors</div>
        {similarResults.map(value =>
          <ValueTile large key={`${value.name},${value.hex}`} value={value} />)}
      </>}
      {!searchResults && <div className={styles.searchResultsEmptyContainer}>
        <UnknownIcon className={styles.searchResultsEmptyIcon} />
        <p className={styles.searchResultsEmptyText}>
          No colors found
        </p>
      </div>}
    </>}
    {!searchText && <div className={styles.searchResultsEmptyContainer}>
      <SearchIcon className={styles.searchResultsEmptyIcon} />
      <p className={styles.searchResultsEmptyText}>
        Search by name or hex. Copy a color to the clipboard to find its name.
      </p>
    </div>}
  </>;
}
Renders the search + search results view