From 712434563da12c44848b50cde8675bbd86c4018d Mon Sep 17 00:00:00 2001
From: William M Schmidt <schmidtwilliammikal@gmail.com>
Date: Fri, 18 Sep 2026 14:50:18 +0200
Subject: [PATCH 1/2] Added arrow-navigation

---
 src/App.css             | 28 +++++++++++++++++--
 src/App.tsx             |  6 +++++
 src/ArrowNavigation.tsx | 60 +++++++++++++++++++++++++++++++++++++++++
 src/PokemonDetails.tsx  |  4 ++-
 4 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 src/ArrowNavigation.tsx

diff --git a/src/App.css b/src/App.css
index 7913902..a3aab55 100644
--- a/src/App.css
+++ b/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);
+}
diff --git a/src/App.tsx b/src/App.tsx
index ad25df3..3a2184e 100644
--- a/src/App.tsx
+++ b/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">
diff --git a/src/ArrowNavigation.tsx b/src/ArrowNavigation.tsx
new file mode 100644
index 0000000..dfd9eb9
--- /dev/null
+++ b/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;
diff --git a/src/PokemonDetails.tsx b/src/PokemonDetails.tsx
index 7cd9d6b..af49afb 100644
--- a/src/PokemonDetails.tsx
+++ b/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>

From aa93ce6f1541fe7a22fdd2a32c12960b70e26b26 Mon Sep 17 00:00:00 2001
From: William M Schmidt <schmidtwilliammikal@gmail.com>
Date: Fri, 18 Sep 2026 15:17:34 +0200
Subject: [PATCH 2/2] Deleted old searchbar code in App.tsx

---
 src/App.tsx | 34 ----------------------------------
 1 file changed, 34 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d862ff8..af8c407 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -74,44 +74,10 @@ function App() {
           setSelectedPokemonId={setSelectedPokemonId}
         />
 
-
         <ArrowNavigation
           selectedPokemonId={selectedPokemonId}
           setSelectedPokemonId={setSelectedPokemonId}
         />
-
-        <section>
-          <form className="search-form" onSubmit={handleSearch}>
-            <div className="search-input-wrapper">
-              <input
-                type="search"
-                value={query}
-                onChange={(event) => setQuery(event.target.value)}
-                onFocus={() => setShowSuggestions(true)}
-                onBlur={() => setShowSuggestions(false)}
-                placeholder="For eksempel: bulba"
-                aria-label="Søk etter Pokémon"
-              />
-              {showSuggestions && recentSearches.length > 0 && (
-                <ul className="recent-searches">
-                  {recentSearches.map((recentQuery) => (
-                    <li key={recentQuery}>
-                      <button
-                        type="button"
-                        onMouseDown={(event) => event.preventDefault()}
-                        onClick={() => handleSelectRecentSearch(recentQuery)}
-                      >
-                        {recentQuery}
-                      </button>
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </div>
-            <button type="submit" disabled={isPending}>
-              {isPending ? 'Laster Pokémon...' : 'Søk'}
-            </button>
-          </form>
     
         <section className="search-bar">
           <SearchBar onSearch={runSearch} isLoading={isPending} />