text: import React, { useState, useEffect } from "react";
  import api from "./services/api";
  import Header from "./components/Header";
  import CharacterGrid from "./components/CharacterGrid";
  import Search from "./components/Search";
  
  import "./App.css";
  
  const App = () => {
    const [items, setItems] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [query, setQuery] = useState("");
  
    useEffect(() => {
      const fetchItems = async () => {
        const response = await api.get(`/characters?name=${query}`);
  
        setItems(response.data);
        setIsLoading(false);
      };
  
      fetchItems();
    }, [query]);
  
    return (
      <div className="container">
        <Header />
        <Search getQuery={(q) => setQuery(q)} />
        <CharacterGrid isLoading={isLoading} items={items} />
      </div>
    );
  };
  
  export default App;
  