From 91de25acaf5048971a23c4b7eddcf6175e0aa87f Mon Sep 17 00:00:00 2001
From: Marie Holen Danielson <mariehd@stud.ntnu.no>
Date: Mon, 7 Sep 2026 12:02:07 +0200
Subject: [PATCH 1/3] Implementert bla frem og tilbake

---
 src/App.tsx                   | 14 +++++++++++---
 src/components/Navigation.tsx |  6 +++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c68e3e9..5faf4d3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,11 +5,14 @@ import { SongList } from './components/SongList'
 import { FilterSortBar } from './components/FilterSortBar'
 import { songs } from './data/songs'
 import './App.css'
+import { useState } from "react";
 
 function App() {
   const handleSelectSong = (song: (typeof songs)[number]) => {
     console.log('Valgt sang:', song)
   }
+  const [currentSongIndex, setCurrentSongIndex] = useState(0)
+  const currentSong = songs[currentSongIndex]
 
   return (
     <main className='app'>
@@ -26,9 +29,14 @@ function App() {
         <section className='song-section' aria-label='Valgt sang'>
           <FavoriteButton isFavorite={false} />
           
-          <SongCard song={songs[0]} />
-
-          <Navigation isFirst={true} isLast={false} />
+          <SongCard song={currentSong} />
+
+          <Navigation 
+            isFirst={currentSongIndex == 0} 
+            isLast={currentSongIndex == songs.length - 1}
+            onPrevious={() => setCurrentSongIndex(currentSongIndex - 1)}
+            onNext={() => setCurrentSongIndex(currentSongIndex + 1)}
+          />
 
         </section>
 
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index e5d001b..dd70e01 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,15 +1,18 @@
 type NavigationProps = {
   isFirst: boolean
   isLast: boolean
+  onPrevious: () => void
+  onNext: () => void
 }
 
-export function Navigation({isFirst, isLast}: NavigationProps) {
+export function Navigation({isFirst, isLast, onPrevious, onNext}: NavigationProps) {
   return (
     <nav aria-label="Navigering mellom sanger">
       <button
         type="button"
         aria-label="Forrige sang"
         disabled={isFirst}  
+        onClick={onPrevious}
       >
         ← Forrige
       </button>
@@ -18,6 +21,7 @@ export function Navigation({isFirst, isLast}: NavigationProps) {
         type="button"
         aria-label="Neste sang"
         disabled={isLast}
+        onClick={onNext}
       >
         Neste →
       </button>

From cc4d95914327439726f7fa3ee8bbf3a57e1b94b4 Mon Sep 17 00:00:00 2001
From: Marie Holen Danielson <mariehd@stud.ntnu.no>
Date: Tue, 8 Sep 2026 14:45:44 +0200
Subject: [PATCH 2/3] Implementert hopp til sang med state

---
 src/App.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5faf4d3..ab5be9e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,7 +9,10 @@ import { useState } from "react";
 
 function App() {
   const handleSelectSong = (song: (typeof songs)[number]) => {
-    console.log('Valgt sang:', song)
+    const songIndex = songs.findIndex((item) => item.id === song.id)
+    if (songIndex !== -1) {
+      setCurrentSongIndex(songIndex)
+    }
   }
   const [currentSongIndex, setCurrentSongIndex] = useState(0)
   const currentSong = songs[currentSongIndex]

From 73bd89635fc9022772b261fefe7caa41d5b15321 Mon Sep 17 00:00:00 2001
From: ellawaal <ellawaal@icloud.com>
Date: Tue, 8 Sep 2026 15:25:39 +0200
Subject: [PATCH 3/3] Flyttet useState-linjene til oppen av App()

---
 src/App.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ab5be9e..84122e5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,14 +8,15 @@ import './App.css'
 import { useState } from "react";
 
 function App() {
+  const [currentSongIndex, setCurrentSongIndex] = useState(0)
+  const currentSong = songs[currentSongIndex]
+  
   const handleSelectSong = (song: (typeof songs)[number]) => {
     const songIndex = songs.findIndex((item) => item.id === song.id)
     if (songIndex !== -1) {
       setCurrentSongIndex(songIndex)
     }
   }
-  const [currentSongIndex, setCurrentSongIndex] = useState(0)
-  const currentSong = songs[currentSongIndex]
 
   return (
     <main className='app'>