import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";

const Pokemon = () => {
  const [pokemon, setPokemon] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const query = new URLSearchParams(useLocation().search);
  const pokemonName = query.get("name");

  useEffect(() => {
    const fetchPokemon = async () => {
      if (!pokemonName) return;

      try {
        const response = await fetch(
          `https://pokedex.mimo.dev/api/pokemon/${pokemonName}`,
        );
        if (!response.ok) throw new Error("Pokémon not found");

        const data = await response.json();
        setPokemon(data);
        setError(null);
      } catch (err) {
        setPokemon(null);
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchPokemon();
  }, [pokemonName]);

  return (
    <>
      {loading && <p>Loading ..</p>}
      {error && <p>Error ..</p>}
      {pokemon && (
        <div>
          <h1>{pokemon.name}</h1>
          <img src={pokemon.sprites.front_default} alt={pokemon.name} />
          {pokemon.height && <p>Height: {pokemon.height}</p>}
          {pokemon.weight && <p>Weight: {pokemon.weight}</p>}
          {pokemon.abilities && (
            <p>
              <span>Abilities: </span>
              {pokemon.abilities.map((ability) => ability.ability.name).join(", ")}
            </p>
          )}
          {pokemon.types && (
            <p>
              <span>Types: </span>
              {pokemon.types.map((type) => type.type.name).join(", ")}
            </p>
          )}
        </div>
      )}
    </>
  );
};

export default Pokemon;


Pokemon.jsx

.pokemon-card {
  background-color: white;
  border-radius: 5px;
  padding: 0px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pokemon-card img {
  max-width: 150px;
  margin-bottom: -20px;
}

.pokemon-card h2 {
  font-size: small;
}

PokemonCard.css

import React from "react";
import { Link } from "react-router-dom";
import "./PokemonCard.css";

const PokemonCard = ({ pokemon }) => {
  return (
    <Link to={`/pokemon?name=${pokemon.name}`}>
      <div className="pokemon-card">
        <img
          src={`https://raw.githubusercontent.com/getmimo/things-api/main/files/pokedex/sprites/master/sprites/pokemon/${pokemon.url
            .split("/")
            .filter(Boolean)
            .pop()}.png`}
          alt={pokemon.name}
        />
        <h2>{pokemon?.name}</h2>
      </div>
    </Link>
  );
};

export default PokemonCard;


PokemonCard.jsx

input {
  font-family: 'Press Start 2P', sans-serif;
}

Search.css

import React, { useState, useEffect } from "react";
import "./Search.css";
import PokemonCard from "./PokemonCard";

const Search = () => {
  const [pokemons, setPokemons] = useState([]);
  const [filteredPokemons, setFilteredPokemons] = useState([]);
  const [input, setInput] = useState("");

  const fetchPokemons = async () => {
    fetch("https://pokedex.mimo.dev/api/pokemon")
      .then((response) => response.json())
      .then((data) => setPokemons(data));
  };

  useEffect(() => {
    fetchPokemons();
  }, []);

  useEffect(() => {
    if (input === "") {
      setFilteredPokemons([]);
    } else {
      const filtered = pokemons.filter((pokemon) =>
        pokemon.name.toLowerCase().startsWith(input.toLowerCase()),
      );
      setFilteredPokemons(filtered);
    }
  }, [input, pokemons]);

  return (
    <>
      <h1>Search a Pokémon</h1>
      <input
        placeholder="Enter Pokémon name..."
        onChange={(e) => setInput(e.target.value)}
      />
      <ul>
        {filteredPokemons.map((pokemon) => (
          <PokemonCard key={pokemon.name} pokemon={pokemon} />
        ))}
      </ul>
    </>
  );
};

export default Search;

Search.jsx

import React, { useState, useEffect } from "react";
import PokemonCard from "./PokemonCard";

const Pokedex = () => {
  const [pokemons, setPokemons] = useState([]);

  const fetchPokemons = async () => {
    fetch("https://pokedex.mimo.dev/api/pokemon")
      .then((response) => response.json())
      .then((data) => setPokemons(data));
  };

  useEffect(() => {
    fetchPokemons();
  }, []);

  return (
    <>
      <h1>All Pokemon</h1>
      <ul>
        {pokemons.map((pokemon, index) => (
          <PokemonCard key={index} pokemon={pokemon} />
        ))}
      </ul>
    </>
  );
};

export default Pokedex;

Pokedex.jsx

import React from "react";

const Home = () => {
  return (
    <div>
      <h1>Welcome to the Pokédex App</h1>
      <p>Explore the world of Pokémon with our comprehensive Pokédex.</p>
    </div>
  );
};

export default Home;

Home.jsx

@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

body {
  margin: 0;
  font-family: "Press Start 2P", sans-serif;
  background-color: #F7E39C;
  text-align: center;
}

.content {
  width: 90%;
  max-width: 640px;
  margin: 0 auto;
}

p {
  line-height: 1.5;
}

nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  background-color: #D13325;
  position: sticky;
  top: 0;
  z-index: 1000;
}

nav a {
  text-decoration: none;
  font-weight: bold;
  color: #F7E39C;
  margin: 0 4px;
}

nav a:hover {
  color: black;
}

a {
 color: black;
}

App.css

import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import "./App.css";
import Home from "./Home";
import Pokedex from "./Pokedex";
import Search from "./Search";
import Pokemon from "./Pokemon";

const NavigationBar = () => {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/pokedex">Pokédex</Link>
      <Link to="/search">Search</Link>
    </nav>
  );
};

const App = () => (
  <BrowserRouter>
    <NavigationBar />
    <div className="content">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/pokedex" element={<Pokedex />} />
        <Route path="/search" element={<Search />} />
        <Route path="/pokemon" element={<Pokemon />} />
      </Routes>
    </div>
  </BrowserRouter>
);

export default App;


App.jsx

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);


index.jsx

<!doctype html>
<html>
  <head>
    <script type="module" src="./index.js"></script>
    <link rel="stylesheet" href="./index.css" />
    <title>Pokédex</title>
  </head>
  <body>
    <div id="root">loading</div>
  </body>
</html>