From 848554ee4493f7a3dec15a435ad9429f60922a86 Mon Sep 17 00:00:00 2001
From: Marie Holen Danielson <mariehd@stud.ntnu.no>
Date: Fri, 4 Sep 2026 19:38:56 +0200
Subject: [PATCH 1/2] Satt opp grunnleggende layout med css-grid

---
 src/App.css | 38 ++++++++++++++++++++++++++++++++++++++
 src/App.tsx | 39 +++++++++++++++++++++++++++++++++------
 2 files changed, 71 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index e69de29..393b616 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,38 @@
+.app {
+  width: min(1200px, 100%);
+  margin: 0 auto;
+  padding: 24px;
+  box-sizing: border-box;
+}
+
+.app-header {
+  margin-bottom: 24px;
+}
+
+.app-content {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  gap: 32px;
+}
+
+.sidebar {
+  min-width: 0;
+}
+
+.sidebar > section {
+  margin-bottom: 24px;
+}
+
+.song-section {
+  min-width: 0;
+}
+
+@media (max-width: 768px) {
+  .app {
+    padding: 16px;
+  }
+
+  .app-content {
+    grid-template-columns: 1fr;
+  }
+}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 9599322..76819e7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,39 @@
-import { SongCard } from "./components/SongCard";
-import { songs } from "./data/songs"
-import { Navigation } from "./components/Navigation";
+import { FavoriteButton } from './components/FavoriteButton'
+import { Navigation } from './components/Navigation'
+import { SongCard } from './components/SongCard'
+import { SongList } from './components/SongList'
+import { FilterSortBar } from './components/FilterSortBar'
+import { songs } from './data/songs'
+import './App.css'
 
 function App() {
+  const handleSelectSong = (song: (typeof songs)[number]) => {
+    console.log('Valgt sang:', song)
+  }
+
   return (
-    <main>
-      <SongCard song={songs[0]} />
-      <Navigation isFirst={true} isLast={false} />
+    <main className='app'>
+      <header className='app-header'>
+        <h1>Bonnie Tyler</h1>
+      </header>
+
+      <section className='app-content'>
+        <aside className='sidebar'>
+          <FilterSortBar />
+          <SongList songs={songs} onSelectSong={handleSelectSong} />
+        </aside>
+
+        <section className='song-section' aria-label='Valgt sang'>
+          <SongCard song={songs[0]} />
+
+          <Navigation isFirst={true} isLast={false} />
+
+        </section>
+
+      </section>
+      <FavoriteButton isFavorite={false} />
+      <SongList songs={songs} onSelectSong={handleSelectSong} />
+
     </main>
   )
 }

From 08290c89ae45fbc5bc569bb88ba1aa91fee1b993 Mon Sep 17 00:00:00 2001
From: Marie Holen Danielson <mariehd@stud.ntnu.no>
Date: Mon, 7 Sep 2026 11:44:06 +0200
Subject: [PATCH 2/2] Fjernet duplikat og flyttet favoritt-knapp

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

diff --git a/src/App.tsx b/src/App.tsx
index 76819e7..c68e3e9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,6 +24,8 @@ function App() {
         </aside>
 
         <section className='song-section' aria-label='Valgt sang'>
+          <FavoriteButton isFavorite={false} />
+          
           <SongCard song={songs[0]} />
 
           <Navigation isFirst={true} isLast={false} />
@@ -31,8 +33,6 @@ function App() {
         </section>
 
       </section>
-      <FavoriteButton isFavorite={false} />
-      <SongList songs={songs} onSelectSong={handleSelectSong} />
 
     </main>
   )