From 71a084a3c42931a930ff2b5d0639c63cef56dfad Mon Sep 17 00:00:00 2001
From: Marie Holen Danielson <mariehd@stud.ntnu.no>
Date: Fri, 4 Sep 2026 10:19:49 +0200
Subject: [PATCH 1/2] Laget statisk filter og sorteringskomponent

---
 src/components/FilterSortBar.tsx | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/components/FilterSortBar.tsx

diff --git a/src/components/FilterSortBar.tsx b/src/components/FilterSortBar.tsx
new file mode 100644
index 0000000..fb12fc8
--- /dev/null
+++ b/src/components/FilterSortBar.tsx
@@ -0,0 +1,29 @@
+export function FilterSortBar() {
+  return (
+    <section aria-labelledby="filter-sort-heading">
+      <h2 id="filter-sort-heading">Filtrer og sorter</h2>
+
+      <div>
+        <label htmlFor="sort">Sorter etter: </label>
+        <select id="sort" name= "sort">
+          <option value="alphabetical">Alfabetisk</option>
+          <option value="artist"></option>
+        </select>
+      </div>
+
+      <div>
+        <label htmlFor="filter">Filtrer etter album: </label>
+        <select name="filter" id="filter">
+          <option value="all">Alle album</option>
+          <option value="faster-than-the-speed-of-night">
+            Faster Than the Speed of Night
+          </option>
+          <option value="secret-dreams-and-forbidden-fire">
+            Secret Dreams and Forbidden Fire
+          </option>
+          <option value="hide-your-heart">Hide Your Heart</option>
+        </select>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file

From 920617a739df91f9a3e9322ec1edc0bd6f4b2c56 Mon Sep 17 00:00:00 2001
From: Marie Holen Danielson <mariehd@stud.ntnu.no>
Date: Fri, 4 Sep 2026 18:37:36 +0200
Subject: [PATCH 2/2] =?UTF-8?q?La=20til=20album=20som=20Song-type=20i=20so?=
 =?UTF-8?q?ngs.ts,=20fjernet=20artist=20som=20filter=20i=20FilterSortBar.t?=
 =?UTF-8?q?sx,=20og=20la=20til=20visning=20av=20album=20p=C3=A5=20SongCard?=
 =?UTF-8?q?.tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FilterSortBar.tsx | 17 +++++++++++------
 src/components/SongCard.tsx      |  1 +
 src/data/songs.ts                | 13 +++++++++++++
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/FilterSortBar.tsx b/src/components/FilterSortBar.tsx
index fb12fc8..6db5a26 100644
--- a/src/components/FilterSortBar.tsx
+++ b/src/components/FilterSortBar.tsx
@@ -4,16 +4,15 @@ export function FilterSortBar() {
       <h2 id="filter-sort-heading">Filtrer og sorter</h2>
 
       <div>
-        <label htmlFor="sort">Sorter etter: </label>
-        <select id="sort" name= "sort">
+        <label htmlFor="sort">Sorter etter:</label>
+        <select id="sort" name="sort">
           <option value="alphabetical">Alfabetisk</option>
-          <option value="artist"></option>
         </select>
       </div>
 
       <div>
-        <label htmlFor="filter">Filtrer etter album: </label>
-        <select name="filter" id="filter">
+        <label htmlFor="filter">Filtrer etter album:</label>
+        <select id="filter" name="filter">
           <option value="all">Alle album</option>
           <option value="faster-than-the-speed-of-night">
             Faster Than the Speed of Night
@@ -21,7 +20,13 @@ export function FilterSortBar() {
           <option value="secret-dreams-and-forbidden-fire">
             Secret Dreams and Forbidden Fire
           </option>
-          <option value="hide-your-heart">Hide Your Heart</option>
+          <option value="natural-force">Natural Force</option>
+          <option value="the-world-starts-tonight">
+            The World Starts Tonight
+          </option>
+          <option value="free-spirit">Free Spirit</option>
+          <option value="all-in-one-voice">All in One Voice</option>
+          <option value="single">Singel</option>
         </select>
       </div>
     </section>
diff --git a/src/components/SongCard.tsx b/src/components/SongCard.tsx
index 99a0bbc..c316aa7 100644
--- a/src/components/SongCard.tsx
+++ b/src/components/SongCard.tsx
@@ -9,6 +9,7 @@ export function SongCard({ song }: SongCardProps) {
     <article>
       <h2>{song.title}</h2>
       <p>{song.artist}</p>
+      <p>{song.album}</p>
 
       <div>
         <p>Teksten vises her</p>
diff --git a/src/data/songs.ts b/src/data/songs.ts
index 5059d5c..a20d419 100644
--- a/src/data/songs.ts
+++ b/src/data/songs.ts
@@ -2,6 +2,7 @@ export type Song = {
   id: string
   artist: string
   title: string
+  album: string
 }
 
 export const songs: Song[] = [
@@ -9,60 +10,72 @@ export const songs: Song[] = [
     id: 'total-eclipse-of-the-heart',
     artist: 'Bonnie Tyler',
     title: 'Total Eclipse of the Heart',
+    album: 'Faster Than the Speed of Night',
   },
   {
     id: 'holding-out-for-a-hero',
     artist: 'Bonnie Tyler',
     title: 'Holding Out for a Hero',
+    album: 'Secret Dreams and Forbidden Fire',
   },
   {
     id: 'its-a-heartache',
     artist: 'Bonnie Tyler',
     title: "It's a Heartache",
+    album: 'Natural Force',
   },
   {
     id: 'lost-in-france',
     artist: 'Bonnie Tyler',
     title: 'Lost in France',
+    album: 'The World Starts Tonight',
   },
   {
     id: 'faster-than-the-speed-of-night',
     artist: 'Bonnie Tyler',
     title: 'Faster Than the Speed of Night',
+    album: 'Faster Than the Speed of Night',
   },
   {
     id: 'if-i-sing-you-a-love-song',
     artist: 'Bonnie Tyler',
     title: 'If I Sing You a Love Song',
+    album: 'Natural Force',
   },
   {
     id: 'have-you-ever-seen-the-rain',
     artist: 'Bonnie Tyler',
     title: 'Have You Ever Seen the Rain?',
+    album: 'Faster Than the Speed of Night',
   },
   {
     id: 'making-love-out-of-nothing-at-all',
     artist: 'Bonnie Tyler',
     title: 'Making Love (Out of Nothing at All)',
+    album: 'Free Spirit',
   },
   {
     id: 'loving-you-is-a-dirty-job-but-somebodys-gotta-do-it',
     artist: 'Bonnie Tyler',
     title: "Loving You Is a Dirty Job but Somebody's Gotta Do It",
+    album: 'Secret Dreams and Forbidden Fire',
   },
   {
     id: 'a-rockin-good-way-to-mess-around-and-fall-in-love',
     artist: 'Bonnie Tyler',
     title: "A Rockin' Good Way (to Mess Around and Fall in Love)",
+    album: 'Singel',
   },
   {
     id: 'more-than-a-lover',
     artist: 'Bonnie Tyler',
     title: 'More Than a Lover',
+    album: 'The World Starts Tonight',
   },
   {
     id: 'angel-of-the-morning',
     artist: 'Bonnie Tyler',
     title: 'Angel of the Morning',
+    album: 'All in One Voice',
   },
 ]
\ No newline at end of file