From ea4d525f2b1442e46ad5b98a261eaf20724d6870 Mon Sep 17 00:00:00 2001
From: SivertEikrem <trevis.eikrem@gmail.com>
Date: Fri, 18 Sep 2026 18:18:03 +0200
Subject: [PATCH] =?UTF-8?q?fikset=20det=20som=20skulle=20bli=20gjort=20p?=
 =?UTF-8?q?=C3=A5=20#18,=20men=20n=C3=A5=20skal=20det=20v=C3=A6re=20en=20f?=
 =?UTF-8?q?avorites-knapp=20etter=20pokedex-nummer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css            | 11 +++++++++++
 src/App.tsx            |  2 ++
 src/PokemonDetails.tsx | 39 ++++++++++++++++++++++++++++++++++-----
 3 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/App.css b/src/App.css
index a3aab55..168968a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -404,6 +404,17 @@
   cursor: pointer;
 }
 
+.pokemon-card-title {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.pokemon-card-title .favorite-toggle {
+  width: auto;
+  padding: 0 4px;
+}
+
 .pokemon-card-header {
   display: flex;
   align-items: center;
diff --git a/src/App.tsx b/src/App.tsx
index af8c407..717f97e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -72,6 +72,8 @@ function App() {
         <PokemonDetails
           selectedPokemonId={selectedPokemonId}
           setSelectedPokemonId={setSelectedPokemonId}
+          isFavorite={isFavorite}
+          toggleFavorite={toggleFavorite}
         />
 
         <ArrowNavigation
diff --git a/src/PokemonDetails.tsx b/src/PokemonDetails.tsx
index af49afb..43d75ec 100644
--- a/src/PokemonDetails.tsx
+++ b/src/PokemonDetails.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { getPokemonDetails } from './Api';
+import { getPokemonDetails, pokemonApiUrl, type Pokemon } from './Api';
 import type { Dispatch, SetStateAction } from 'react';
 import './App.css';
 
@@ -9,11 +9,15 @@ const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
 type PokemonDetailsProps = {
   selectedPokemonId: number | null;
   setSelectedPokemonId: Dispatch<SetStateAction<number | null>>;
+  isFavorite: (id: number) => boolean;
+  toggleFavorite: (pokemon: Pokemon) => void;
 };
 
 function PokemonDetails({
   selectedPokemonId,
   setSelectedPokemonId,
+  isFavorite,
+  toggleFavorite,
 }: PokemonDetailsProps) {
   // TanStack Query is used to fetch the details of the selected Pokémon based on its ID.
   const {
@@ -47,6 +51,9 @@ function PokemonDetails({
     (_, rowIndex) => selectedPokemon.stats.slice(rowIndex * 3, rowIndex * 3 + 3)
   );
 
+  const favorite = isFavorite(selectedPokemon.id);
+  const name = capitalize(selectedPokemon.name);
+
   return (
     <section className="pokemon-card" aria-label="Valgt Pokémon">
       <button
@@ -67,10 +74,32 @@ function PokemonDetails({
             />
 
             <div>
-              <h2>
-                {capitalize(selectedPokemon.name)}{' '}
-                <span>#{selectedPokemon.id}</span>
-              </h2>
+              <div className="pokemon-card-title">
+                <h2>
+                  {capitalize(selectedPokemon.name)}{' '}
+                  <span>#{selectedPokemon.id}</span>
+                </h2>
+                <button
+                  type="button"
+                  className={`favorite-toggle${favorite ? ' is-favorite' : ''}`}
+                  onClick={() =>
+                    toggleFavorite({
+                      id: selectedPokemon.id,
+                      name: selectedPokemon.name,
+                      imageUrl: selectedPokemon.imageUrl,
+                      apiUrl: pokemonApiUrl(selectedPokemon.id),
+                    })
+                  }
+                  aria-label={
+                    favorite
+                      ? `Fjern ${name} fra favoritter`
+                      : `Legg ${name} til favoritter`
+                  }
+                  aria-pressed={favorite}
+                >
+                  ★
+                </button>
+              </div>
               <p className="pokemon-generation">
                 {capitalize(selectedPokemon.generation.replace('-', ' '))}
               </p>