Added arrow-navigation

src/App.css

@@ -434,8 +434,6 @@
   font-size: 14px;
 }
 
-
-
 .pokemon-info {
   width: 100%;
   margin-top: 16px;
@@ -531,3 +529,29 @@
     border-spacing: 4px;
   }
 }
+
+.arrow-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.arrow-navigation button {
+  padding: 10px 18px;
+  border: none;
+  border-radius: 999px;
+  background: var(--accent);
+  color: white;
+  font-weight: bold;
+  cursor: pointer;
+  transition:
+    transform 0.1s ease,
+    background 0.15s ease;
+}
+
+.arrow-navigation button:hover,
+.arrow-navigation button:focus-visible {
+  background: var(--accent-hover, #cc3f5a);
+  transform: translateY(-2px);
+}

src/App.tsx

@@ -5,6 +5,7 @@ import { useFavorites } from './useFavorites';
 import FavoritesSidebar from './FavoritesSidebar';
 import { listAllPokemon } from './Api';
 import PokemonDetails from './PokemonDetails';
+import ArrowNavigation from './ArrowNavigation';
 
 import './App.css';
 
@@ -117,6 +118,11 @@ function App() {
           setSelectedPokemonId={setSelectedPokemonId}
         />
 
+        <ArrowNavigation
+          selectedPokemonId={selectedPokemonId}
+          setSelectedPokemonId={setSelectedPokemonId}
+        />
+
         <section>
           <form className="search-form" onSubmit={handleSearch}>
             <div className="search-input-wrapper">

src/ArrowNavigation.tsx

@@ -0,0 +1,60 @@
+import type { Dispatch, SetStateAction } from 'react';
+
+const MAX_POKEMON_ID = 1025;
+const SPECIAL_POKEMON_START = 10001;
+const SPECIAL_POKEMON_MAX = 10025;
+
+type ArrowNavigationProps = {
+  selectedPokemonId: number | null;
+  setSelectedPokemonId: Dispatch<SetStateAction<number | null>>;
+};
+
+function ArrowNavigation({
+  selectedPokemonId,
+  setSelectedPokemonId,
+}: ArrowNavigationProps) {
+  return (
+    <section className="arrow-navigation">
+      {selectedPokemonId !== null && selectedPokemonId > 1 && (
+        <button
+          type="button"
+          aria-label="Previous Pokemon"
+          onClick={() =>
+            setSelectedPokemonId((id) =>
+              id === SPECIAL_POKEMON_START
+                ? MAX_POKEMON_ID
+                : (id ?? 1) - 1
+            )
+          }
+        >
+          <span aria-hidden="true">←</span>{' '}
+          {selectedPokemonId === SPECIAL_POKEMON_START
+            ? MAX_POKEMON_ID
+            : selectedPokemonId - 1}
+        </button>
+      )}
+      {selectedPokemonId !== null &&
+        selectedPokemonId > 0 &&
+        selectedPokemonId < SPECIAL_POKEMON_MAX && (
+          <button
+            type="button"
+            aria-label="Next Pokemon"
+            onClick={() =>
+              setSelectedPokemonId((id) =>
+                id === MAX_POKEMON_ID
+                  ? SPECIAL_POKEMON_START
+                  : (id ?? 0) + 1
+              )
+            }
+          >
+            {selectedPokemonId === MAX_POKEMON_ID
+              ? SPECIAL_POKEMON_START
+              : selectedPokemonId + 1}{' '}
+            <span aria-hidden="true">→</span>
+          </button>
+        )}
+    </section>
+  );
+}
+
+export default ArrowNavigation;

src/PokemonDetails.tsx

@@ -87,7 +87,9 @@ function PokemonDetails({
             <tbody>
               <tr>
                 <td>
-                  <span>{selectedPokemon.types.map(capitalize).join(', ')}</span>
+                  <span>
+                    {selectedPokemon.types.map(capitalize).join(', ')}
+                  </span>
                 </td>
                 <td>
                   <span>