+
+ );
+ }
+
+ if (error) {
+ return (
+ Procurando Pokémons! Aguarde...
+
+
+
+ );
+ }
+
+ return (
+
+ Houve um erro ao buscar os Pokémons.
+
Mensagem de erro: {error}
+
+
+ Opa, sortudo(a)! Você pegou um erro. Que tal{" "} + + me avisar + + ? +
+Vai me ajudar muito a corrigi-lo :D
+
+ {pokemons.length > 0 ? (
+ pokemons.map((pokemon, idx) => (
+ goToPokemonDetailsPage(pokemon.name)}
+ onKeyPress={() => goToPokemonDetailsPage(pokemon.name)}
+ >
+
+ ))
+ ) : (
+
+ );
+};
diff --git a/src/components/SearchPokemonByNameOrId/SearchPokemonByNameOrId.tsx b/src/components/SearchPokemonByNameOrId/SearchPokemonByNameOrId.tsx
new file mode 100644
index 000000000..471d55f86
--- /dev/null
+++ b/src/components/SearchPokemonByNameOrId/SearchPokemonByNameOrId.tsx
@@ -0,0 +1,44 @@
+import { InfoIcon, Search } from "lucide-react";
+import { type ChangeEvent, type KeyboardEvent, useState } from "react";
+import { usePokemonsList } from "@/hooks/usePokemonsList";
+
+export const SearchPokemonByNameOrId = () => {
+ const [searchTerm, setSearchTerm] = useState("");
+ const { filterPokemonsByPokemonName } = usePokemonsList();
+
+ function handleInputOnChange(e: ChangeEvent
+
+ 
+
+ {prettifyPokemonId(pokemon.id)}
+
+
+
+
+ + {pokemon.name} +
+
+ {pokemon.types.map((type) => (
+
+ {type}
+
+ ))}
+
+
+
+ )}
+ + Nenhum Pokémon com esse nome foi encontrado. +
+
+
+ );
+};
diff --git a/src/contexts/PokemonsList.tsx b/src/contexts/PokemonsList.tsx
new file mode 100644
index 000000000..498134313
--- /dev/null
+++ b/src/contexts/PokemonsList.tsx
@@ -0,0 +1,77 @@
+import { createContext, useCallback, useEffect, useState } from "react";
+import type { Pokemon } from "@/types/pokedex";
+import { getAllPokemons, getPokemonByName } from "../services/pokedex";
+
+export const PokemonsListContext = createContext(
+ {} as {
+ pokemons: Pokemon[];
+ loading: boolean;
+ error: string | null;
+ filterPokemonsByPokemonName: (name: string) => Promise
+
+
+
+
+ + Se buscar vazio, retorna alguns Pokémons +
+Hello {pokemonName}!
;
+}
diff --git a/src/routes/details/index.tsx b/src/routes/details/index.tsx
new file mode 100644
index 000000000..a94727a45
--- /dev/null
+++ b/src/routes/details/index.tsx
@@ -0,0 +1,14 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/details/")({
+ component: PokemonDetailsPage,
+ beforeLoad: () => {
+ throw Route.redirect({
+ to: "/home",
+ });
+ },
+});
+
+function PokemonDetailsPage() {
+ return Hello "/details/"!
;
+}
diff --git a/src/routes/home.tsx b/src/routes/home.tsx
new file mode 100644
index 000000000..f630b77fd
--- /dev/null
+++ b/src/routes/home.tsx
@@ -0,0 +1,41 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { motion } from "motion/react";
+import { PokemonsList } from "@/components/PokemonsList/PokemonsList";
+import { SearchPokemonByNameOrId } from "@/components/SearchPokemonByNameOrId/SearchPokemonByNameOrId";
+
+export const Route = createFileRoute("/home")({
+ component: HomePage,
+});
+
+function HomePage() {
+ return (
+
+
+
+
+
+
+
+ + POKÉDEX +
+
+
+
+ FEITO COM{" "}
+