Laget statisk filter og sorteringskomponent

src/components/FilterSortBar.tsx

@@ -0,0 +1,34 @@
+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>
+        </select>
+      </div>
+
+      <div>
+        <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
+          </option>
+          <option value="secret-dreams-and-forbidden-fire">
+            Secret Dreams and Forbidden Fire
+          </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>
+  )
+}

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>

src/data/songs.ts

@@ -2,67 +2,80 @@ export type Song = {
   id: string
   artist: string
   title: string
+  album: string
 }
 
 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',
   },
 ]