Adding songs output on album page

frontend/src/app/album/[id]/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react'
 import { Album } from '@/common/album.entity';
+import { Song } from '@/common/song.entity';
 import { useParams } from 'next/navigation'
 
 export default function Page() {
@@ -22,8 +23,15 @@ export default function Page() {
   if (!album) return <div>Loading...</div>
 
   return (
+    <div>
+      <div>
+        <em>{album.title}</em> by {album.artist} ({album.genre})
+      </div>
       <ul>
-        <li key={album.id}>{album.title} by {album.artist} ({album.genre})</li>
+        {album.songs.map((song: Song) => (
+          <li key={song.id}>{song.title} ({song.duration})</li>
+        ))}
       </ul>
+    </div>
   );
 }

frontend/src/common/album.entity.tsx

@@ -1,7 +1,9 @@
+import { Song } from '@/common/song.entity';
+
 export interface Album {
     id: number;
     title: string;
     artist: string;
     genre: string;
-    songs: string[];
+    songs: Song[];
 }

frontend/src/common/song.entity.tsx

@@ -0,0 +1,8 @@
+import { Album } from '@/common/album.entity';
+
+export interface Song {
+    id: number;
+    title: string;
+    duration: number;
+    album: Album;
+}