From 628220485a7fca30f34bb6f20a2fcb80ff72975c Mon Sep 17 00:00:00 2001
From: Marie Holen Danielson <mariehd@stud.ntnu.no>
Date: Thu, 3 Sep 2026 13:22:40 +0200
Subject: [PATCH] =?UTF-8?q?laget=20statisk=20navigasjonskomponent=20for=20?=
 =?UTF-8?q?=C3=A5=20bla=20mellom=20sanger=20(forige=20og=20neste)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                   |  2 ++
 src/components/Navigation.tsx | 26 ++++++++++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 src/components/Navigation.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 13068d4..9599322 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,12 @@
 import { SongCard } from "./components/SongCard";
 import { songs } from "./data/songs"
+import { Navigation } from "./components/Navigation";
 
 function App() {
   return (
     <main>
       <SongCard song={songs[0]} />
+      <Navigation isFirst={true} isLast={false} />
     </main>
   )
 }
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
new file mode 100644
index 0000000..e5d001b
--- /dev/null
+++ b/src/components/Navigation.tsx
@@ -0,0 +1,26 @@
+type NavigationProps = {
+  isFirst: boolean
+  isLast: boolean
+}
+
+export function Navigation({isFirst, isLast}: NavigationProps) {
+  return (
+    <nav aria-label="Navigering mellom sanger">
+      <button
+        type="button"
+        aria-label="Forrige sang"
+        disabled={isFirst}  
+      >
+        ← Forrige
+      </button>
+
+      <button
+        type="button"
+        aria-label="Neste sang"
+        disabled={isLast}
+      >
+        Neste →
+      </button>
+    </nav>
+  )
+}
\ No newline at end of file