post-it search

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import './search.css'

function SearchBar() {
  const [query, setQuery] = useState('');
  const [showSearchBar, setShowSearchBar] = useState(false);

  const toggleSearchBar = () => {
    setShowSearchBar(!showSearchBar);
  };

  const navigate = useNavigate();

  const handleSearch = async (e) => {
    e.preventDefault();
    const response = await axios.get(`https://api.example.com/search?q=${query}`);
    navigate('/results', { state: { results: response.data } });
  };

  return (
    <form onSubmit={handleSearch}>
    <div className="search-bar-container">
      <div onClick={toggleSearchBar}>
      <ion-icon class="search" name="search-outline"></ion-icon>

      </div>
      {showSearchBar && (
        <div className="search-bar">
          <input type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Search..." />
          <button type="submit">Search</button>
        </div>
      )}
    </div>

    </form>

  );
}

export default SearchBar;