➕ feat: pokedex

pokedex/src/App.jsx

@@ -5,10 +5,26 @@ import pokeSearch from "./assets/poke-search.svg";
 function App() {
   const [inputValue, setInputValue] = useState("");
 
+  const [pokemon, setPokemon] = useState(null);
+
   const handleInputValue = (event) => {
     setInputValue(event.target.value);
   };
 
+  const fetchPokemon = async () => {
+    const url = `https://pokeapi.co/api/v2/pokemon/${inputValue}`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      alert("Hubo un error");
+      return;
+    }
+
+    const data = await response.json();
+
+    setPokemon(data);
+  };
+
   return (
     <>
       <main className="p-6">
@@ -27,7 +43,10 @@ function App() {
             />
           </div>
           <div>
-            <button className="bg-white px-3 py-2 rounded-lg text-primary font-semibold">
+            <button
+              onClick={fetchPokemon}
+              className="bg-white px-3 py-2 rounded-lg text-primary font-semibold"
+            >
               Buscar
             </button>
           </div>
@@ -37,7 +56,7 @@ function App() {
             <div className="flex items-center justify-center gap-5">
               <img
                 width={150}
-                src="https://www.pokemon.com/static-assets/content-assets/cms2/img/pokedex/full/001.png"
+                src={pokemon?.sprites.other["official-artwork"].front_default}
                 alt=""
               />
               <div>
@@ -48,7 +67,9 @@ function App() {
               </div>
             </div>
             <div className="mt-3 bg-gray-200 flex justify-center items-center h-[60px] rounded-b-lg">
-              <h2 className="text-center font-semibold text-2xl">Bulbasaur</h2>
+              <h2 className="text-center font-semibold text-2xl">
+                {pokemon?.name}
+              </h2>
             </div>
           </div>
         </div>