16 styling og visuelt uttrykk 2

src/App.css

@@ -6,7 +6,17 @@
 }
 
 .app-header {
-  margin-bottom: 24px;
+  background-color: #fce4ec;
+  padding: 24px;
+  text-align: center;
+  margin: -24px -24px 24px -24px;
+}
+
+.app-header h1 {
+  color: #c2185b;
+  font-family: Georgia, serif;
+  font-size: 32px;
+  margin: 0;
 }
 
 .app-content {
@@ -27,6 +37,116 @@
   min-width: 0;
 }
 
+.song-controls {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.sidebar button,
+.sidebar select {
+  background-color: #fce4ec;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  display: inline-flex;
+  align-items: center;
+}
+
+.sidebar button:hover {
+  background-color: #f48fb1;
+}
+
+.sidebar button:active {
+  background-color: #f48fb1;
+}
+
+.sidebar button.active {
+  background-color: #f48fb1;
+}
+
+.sidebar ul {
+  list-style: none;
+  padding: 0;
+}
+
+.sidebar li {
+  margin-bottom: 8px;
+}
+
+.sidebar > section > div {
+  margin-bottom: 16px;
+}
+
+.song-controls {
+  align-items: center;
+}
+
+.song-controls button {
+  padding: 8px 12px;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  display: inline-flex;
+  align-items: center;
+}
+
+.song-controls nav {
+  display: flex;
+  gap: 12px;
+}
+
+.song-controls nav button {
+  background-color: #e0e0e0;
+  padding: 8px 16px;
+}
+
+.song-controls nav button:hover {
+  background-color: #b3b3b3;
+}
+
+.song-controls nav button:active {
+  background-color: #b3b3b3;
+}
+
+.song-controls nav button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.song-lyrics-wrapper {
+  margin-top: 16px;
+}
+
+.song-lyrics {
+  margin: 0;
+}
+
+.song-lyrics-stanza {
+  margin: 0 0 1.5em;
+}
+
+.song-lyrics-stanza:last-child {
+  margin-bottom: 0;
+}
+
+.song-lyrics-line {
+  display: block;
+}
+
+.song-album-art {
+  margin-top: 24px;
+}
+
+.song-album-art img {
+  display: block;
+  width: min(100%, 320px);
+  height: auto;
+  border-radius: 4px;
+}
+
 @media (max-width: 768px) {
   .app {
     padding: 16px;

src/App.tsx

@@ -51,21 +51,22 @@ function App() {
       <section className='app-content'>
         <aside className='sidebar'>
           <FilterSortBar selectedAlbum={selectedAlbum} onAlbumChange={handleAlbumChange} sortBy={sortBy} onSortByChange={handleSortByChange}/>
-          <SongList songs={sortedSongs} onSelectSong={handleSelectSong} />
+          <SongList songs={sortedSongs} onSelectSong={handleSelectSong} currentSong={currentSong} />
         </aside>
 
         <section className='song-section' aria-label='Valgt sang'>
-          <FavoriteButton isFavorite={favorites.includes(currentSong.id)} onToggle={() => handleToggleFavorites(currentSong.id)}/>
+          <div className='song-controls'>
+            <FavoriteButton isFavorite={favorites.includes(currentSong.id)} onToggle={() => handleToggleFavorites(currentSong.id)}/>
+            <Navigation 
+              isFirst={currentSongIndex == 0} 
+              isLast={currentSongIndex == sortedSongs.length - 1}
+              onPrevious={() => setCurrentSongIndex(currentSongIndex - 1)}
+              onNext={() => setCurrentSongIndex(currentSongIndex + 1)}
+            />
+          </div>
 
           <SongCard song={currentSong} />
 
-          <Navigation 
-            isFirst={currentSongIndex == 0} 
-            isLast={currentSongIndex == sortedSongs.length - 1}
-            onPrevious={() => setCurrentSongIndex(currentSongIndex - 1)}
-            onNext={() => setCurrentSongIndex(currentSongIndex + 1)}
-          />
-
         </section>
 
       </section>

src/components/LyricsDisplay.tsx

@@ -0,0 +1,27 @@
+import { parseLyrics } from '../utils/formatLyrics'
+
+type LyricsDisplayProps = {
+  lyrics: string
+}
+
+export function LyricsDisplay({ lyrics }: LyricsDisplayProps) {
+  const stanzas = parseLyrics(lyrics)
+
+  if (!stanzas.length) {
+    return null
+  }
+
+  return (
+    <div className="song-lyrics">
+      {stanzas.map((stanza, stanzaIndex) => (
+        <p key={stanzaIndex} className="song-lyrics-stanza">
+          {stanza.lines.map((line, lineIndex) => (
+            <span key={lineIndex} className="song-lyrics-line">
+              {line}
+            </span>
+          ))}
+        </p>
+      ))}
+    </div>
+  )
+}

src/components/SongCard.tsx

@@ -1,5 +1,7 @@
 import type { Song } from '../data/songs'
+import { getAlbumImage } from '../data/albumImages'
 import { useLyrics } from '../hooks/useLyrics'
+import { LyricsDisplay } from './LyricsDisplay'
 
 type SongCardProps = {
   song: Song
@@ -8,20 +10,29 @@ type SongCardProps = {
 export function SongCard({ song }: SongCardProps) {
 
   const { data, isLoading, error } = useLyrics(song.artist, song.title)
-
+  const albumImage = getAlbumImage(song.album)
+
   return (
     <article>
       <h2>{song.title}</h2>
-      <p>{song.artist}</p>
-      <p>{song.album}</p>
+      <p>Artist: {song.artist}</p>
+      <p>Album: {song.album}</p>
 
-      <div>
-        <p>{isLoading ? 'Laster…' : error || data?.error ? 'Fant ingen sangtekst for denne sangen' : data?.lyrics}</p>
+      <div className="song-lyrics-wrapper">
+        {isLoading ? (
+          <p>Laster…</p>
+        ) : error || data?.error ? (
+          <p>Fant ingen sangtekst for denne sangen</p>
+        ) : data?.lyrics ? (
+          <LyricsDisplay lyrics={data.lyrics} />
+        ) : null}
       </div>
 
-      <div>
-        <p>Bilde vises her</p>
-      </div>
+      {albumImage && (
+        <div className="song-album-art">
+          <img src={albumImage} alt={`Albumomslag: ${song.album}`} />
+        </div>
+      )}
 
     </article>
   )

src/components/SongList.tsx

@@ -3,9 +3,10 @@ import type { Song } from '../data/songs'
 type SongListProps = {
   songs: Song[]
   onSelectSong: (song: Song) => void
+  currentSong: Song
 }
 
-export function SongList({songs, onSelectSong}: SongListProps) {
+export function SongList({songs, onSelectSong, currentSong}: SongListProps) {
   return (
     <section aria-labelledby='song-list-heading'>
       <h2 id="song-list-heading">
@@ -15,7 +16,7 @@ export function SongList({songs, onSelectSong}: SongListProps) {
       <ul>
         {songs.map((song) => (
           <li key={song.id}>
-            <button type='button' onClick={() => onSelectSong(song)}>
+            <button type='button' onClick={() => onSelectSong(song)} className={song.id === currentSong.id ? 'active' : ''}>
               {song.title} - {song.artist}
             </button>
           </li>

src/data/albumImages.ts

@@ -0,0 +1,21 @@
+import fasterThanTheSpeedOfNight from '../../pics/81GU366NSiL._UF1000,1000_QL80_.jpg'
+import secretDreams from '../../pics/ab67616d0000b273d2675cb6847d1b1da9fc28a3.jpeg'
+import naturalForce from '../../pics/ab67616d0000b27302c1331a8a44330610dd4cbe.jpeg'
+import theWorldStartsTonight from '../../pics/ab67616d0000b2731df28c6164bc1bf01e304daa.jpeg'
+import freeSpirit from '../../pics/ab67616d0000b27364ba6b515bb7a9c2a0de8f90.jpeg'
+import singel from '../../pics/515AxpWj0QL._UF894,1000_QL80_.jpg'
+import allInOneVoice from '../../pics/ab67616d0000b273bc6b0bc222552902755ee599.jpeg'
+
+export const albumImages: Record<string, string> = {
+  'Faster Than the Speed of Night': fasterThanTheSpeedOfNight,
+  'Secret Dreams and Forbidden Fire': secretDreams,
+  'Natural Force': naturalForce,
+  'The World Starts Tonight': theWorldStartsTonight,
+  'Free Spirit': freeSpirit,
+  Singel: singel,
+  'All in One Voice': allInOneVoice,
+}
+
+export function getAlbumImage(album: string): string | undefined {
+  return albumImages[album]
+}

src/utils/formatLyrics.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import { parseLyrics } from './formatLyrics'
+
+describe('parseLyrics', () => {
+  it('legger mellomrom mellom vers og refreng uten tom linje i API-tekst', () => {
+    const lyrics = `Someone told me long ago
+There's a calm before the storm
+I know it's been coming for some time
+When it's over so they say
+It'll rain a sunny day
+I know the shining down on me
+I wanna know, have you ever seen the rain?
+I wanna know, have you ever seen the rain?
+Coming down on a sunny day
+Yesterday and days before
+Sun is cold and rain is hard
+I know been that way before
+I wanna know, have you ever seen the rain?
+I wanna know, have you ever seen the rain?
+Coming down on a sunny day`
+
+    const stanzas = parseLyrics(lyrics)
+
+    expect(stanzas.length).toBeGreaterThanOrEqual(4)
+    expect(stanzas[0].lines[0]).toContain('Someone told me')
+    expect(stanzas[1].lines[0]).toContain('I wanna know')
+  })
+})