From 8114791ab52cd34cfd72458a5a99ca84aa8e394f Mon Sep 17 00:00:00 2001
From: Jirachal <jirachal@stud.ntnu.no>
Date: Thu, 1 Oct 2026 15:49:57 +0200
Subject: [PATCH] combining mock-frontend with mock-data (Closes #4)

---
 src/App.tsx | 28 ++++++++++++----------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1312479..5dcdbf4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,10 @@
 import './App.css'
+import albumData from './mock/albums.json'
+import type { Album } from './types/albums'
 
 function App() {
+  const albums: Album[] = albumData as Album[]
+
   return (
     <main>
       <section className="filter-box">
@@ -59,23 +63,15 @@ function App() {
       </section>
 
       <section className="album-displayer">
-        <div className="album-card">
-          <div className="album-image">Image</div>
-          <h3>Album title</h3>
-          <p>Artist</p>
-        </div>
-
-        <div className="album-card">
-          <div className="album-image">Image</div>
-          <h3>Album title</h3>
-          <p>Artist</p>
-        </div>
+        {albums.map((album) => (
+          <div className="album-card" key={album.id}>
+            <div className="album-image">Image</div>
 
-        <div className="album-card">
-          <div className="album-image">Image</div>
-          <h3>Album title</h3>
-          <p>Artist</p>
-        </div>
+            <h3>{album.title}</h3>
+            <p>{album.artist}</p>
+            <p>{album.releaseYear}</p>
+          </div>
+        ))}
       </section>
     </main>
   )