47 | );
48 | }
49 |
50 | export default Dex;
51 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JPOKE
2 |
3 | 
4 |
5 | Este é um projeto em React para buscar e visualizar informações sobre Pokémon utilizando a API pública do [PokeAPI](https://pokeapi.co/).
6 |
7 | ## Funcionalidades
8 |
9 | - **Busca de Pokémon**: Permite que o usuário busque um Pokémon pelo nome, exibindo a imagem, tipos e outras informações.
10 | - **Lista de Pokémons**: Exibe uma lista de 151 Pokémons com suas imagens e tipos.
11 | - **Design Responsivo**: Interface adaptável para diferentes tamanhos de tela utilizando TailwindCSS.
12 |
13 | ## Tecnologias Utilizadas
14 |
15 | 
16 | 
17 | 
18 | 
19 |
20 | ## Como Rodar o Projeto
21 |
22 | ### 1. Clonar o repositório
23 |
24 | ```bash
25 | git clone https://github.com/JoaoPedrosoDev/JPoke
26 | ```
27 | ### 2. Instalar as dependências
28 |
29 | ```bash
30 | npm install
31 | ```
32 |
33 | ### 3. Rodar o projeto
34 | ```
35 | npm run dev
36 | ```
37 | ## Descrição dos Arquivos Principais
38 |
39 | - **App.jsx:** Componente principal que gerencia as rotas do aplicativo utilizando o React Router.
40 |
41 | - **Poke.jsx:** Página de busca de Pokémon, onde o usuário pode pesquisar por um Pokémon pelo nome.
42 |
43 | - **Dex.jsx:** Página com a lista de 151 Pokémons e suas informações.
44 |
45 | - **Header.jsx e Footer.jsx:** Componentes para cabeçalho e rodapé da aplicação.
46 |
47 | - **TypeList.jsx:** Componente para exibir os tipos do Pokémon.
48 |
49 | ## Licença
50 |
51 | Este projeto está licenciado sob a **MIT License**. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
52 |
53 | ### MIT License
54 |
55 | Permite que qualquer pessoa faça uso do código, incluindo a modificação, distribuição e uso pessoal ou comercial, desde que a permissão e o aviso de copyright sejam incluídos nas cópias ou partes substanciais do software.
56 |
57 | A licença MIT não fornece nenhuma garantia e o uso do código é por conta e risco do usuário.
58 |
59 | ## Acesse o Projeto
60 |
61 | Você pode acessar a versão online do projeto clicando no seguinte link:
62 | [JPoke - Visualize o Projeto Aqui](https://jpoke.vercel.app/)
63 |
64 |
65 |
--------------------------------------------------------------------------------
/src/pages/Poke.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import TypeList from "../components/TypeList";
3 |
4 | function Poke() {
5 | const [PokeName, SetPokeName] = useState('');
6 | const [pokemon, setPokemon] = useState('');
7 | const [erro, setErro] = useState('');
8 |
9 | async function fetchpoke() {
10 | if (PokeName.trim().length < 3) {
11 | setErro('O nome do Pokémon deve ter pelo menos 3 caracteres.');
12 | return;
13 | }
14 | setErro('');
15 |
16 | try {
17 | var response = await fetch(`https://pokeapi.co/api/v2/pokemon/${PokeName.toLocaleLowerCase()}`);
18 | var data = await response.json();
19 | setPokemon(data);
20 | } catch (error) {
21 | setErro('Pokémon não encontrado. Tente novamente!');
22 | setPokemon('');
23 | }
24 | }
25 | return (
26 |
38 |