Implement album detail page

src/App.css

@@ -6,60 +6,13 @@
   color: #310E10;
 }
 
-/* Header */
-.site-header {
-  min-height: 88px;
-  padding: 20px 5%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 24px;
-  border-bottom: 1px solid #947268;
-}
-
-.logo {
-  color: #74070E;
-  font-family: 'Clash Display', sans-serif;
-  font-size: clamp(1.8rem, 3vw, 2.5rem);
-  font-weight: 600;
-  letter-spacing: -1.5px;
-  text-decoration: none;
-}
-
-.logo span,
 .catalogue-heading h1 span {
   color: #74070E;
 }
 
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.header-button {
-  padding: 10px 18px;
-  border: 1px solid #74070E;
-  border-radius: 3px;
-  background: transparent;
-  color: #74070E;
-  font-size: 0.9rem;
-  cursor: pointer;
-}
-
-.sign-in-button {
-  background: #74070E;
-  color: #F4E3B2;
-}
-
-.header-button:hover {
-  background: #310E10;
-  border-color: #310E10;
-  color: #F4E3B2;
-}
-
 /* Main content */
-.catalogue-main {
+.catalogue-main,
+.album-detail-content {
   max-width: 1600px;
   margin: 0 auto;
   padding: 44px 5% 60px;
@@ -320,5 +273,4 @@
   .results-heading span {
     display: none;
   }
-
-}
+}

src/components/AlbumCard/AlbumCard.css

@@ -24,23 +24,13 @@
   outline-offset: 4px;
 }
 
-.album-image {
-  display: block;
-  width: 100%;
-  aspect-ratio: 1 / 1;
-  object-fit: cover;
-  border: 1px solid #947268;
-  background: #947268;
+.album-card:hover {
+  transform: translateY(-4px);
 }
 
-.album-placeholder {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 18px;
-  background: #74070E;
-  color: #F4E3B2;
+.album-card:focus-visible {
+  outline: 2px solid #74070E;
+  outline-offset: 4px;
 }
 
 .album-card:nth-child(2n) .album-placeholder {
@@ -52,20 +42,6 @@
   color: #310E10;
 }
 
-.placeholder-mark {
-  font-family: 'Clash Display', sans-serif;
-  font-size: 2.8rem;
-  font-weight: 600;
-}
-
-.placeholder-title {
-  max-width: 100%;
-  font-family: 'Clash Display', sans-serif;
-  font-size: clamp(1.1rem, 1.7vw, 1.8rem);
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-
 .album-card-info {
   padding: 12px 2px 0;
 }

src/components/AlbumCard/AlbumCard.tsx

@@ -2,6 +2,9 @@ import { Link } from 'react-router-dom'
 import type { Album } from '../../types/album'
 import './AlbumCard.css'
 
+import AlbumCover from '../AlbumCover/AlbumCover'
+import '../AlbumCover/AlbumCover.css'
+
 interface AlbumCardProps {
   album: Album
 }
@@ -13,18 +16,12 @@ function AlbumCard({ album }: AlbumCardProps) {
       className="album-card"
       key={album.id}
     >
-      {album.coverUrl ? (
-        <img
-          className="album-image"
-          src={album.coverUrl}
-          alt={`Album cover for ${album.title} by ${album.artist}`}
-        />
-      ) : (
-        <div className="album-image album-placeholder">
-          <span className="placeholder-mark">C.</span>
-          <span className="placeholder-title">{album.title}</span>
-        </div>
-      )}
+
+      <AlbumCover 
+        coverUrl={album.coverUrl}
+        title={album.title}
+        artist={album.artist}
+      />
 
       <div className="album-card-info">
         <h2>{album.title}</h2>

src/components/AlbumCover/AlbumCover.css

@@ -0,0 +1,32 @@
+.album-image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  border: 1px solid #947268;
+  background: #947268;
+}
+
+.album-placeholder {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 18px;
+  background: #74070E;
+  color: #F4E3B2;
+}
+
+.placeholder-mark {
+  font-family: 'Clash Display', sans-serif;
+  font-size: 2.8rem;
+  font-weight: 600;
+}
+
+.placeholder-title {
+  max-width: 100%;
+  font-family: 'Clash Display', sans-serif;
+  font-size: clamp(1.1rem, 1.7vw, 1.8rem);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}

src/components/AlbumCover/AlbumCover.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react"
+import './AlbumCover.css'
+
+type AlbumCoverProps = {
+    coverUrl: string | null
+    title: string
+    artist: string
+    className?: string
+}
+
+function AlbumCover({ coverUrl, title, artist, className=''}: AlbumCoverProps) {
+    const [imageError, setImageError] = useState(false)
+
+    useEffect(() => {
+        setImageError(false)
+    }, [coverUrl])
+
+    if (coverUrl && !imageError) {
+        return (
+            <img    
+                className={`album-image ${className}`}
+                src={coverUrl}
+                alt={`Album cover for ${title} by ${artist}`}
+                onError={() => setImageError(true)}
+            />
+        )
+    }
+        return (
+            //Previous placholder implementation kept temporarily
+            /*
+            <div className={`album-image album-placeholder ${className}`}>
+                <span className="placeholder-mark">C.</span>
+                <span className="placeholder-title">{title}</span>
+            </div>
+            */
+            <img    
+                className={`album-image ${className}`}
+                src={`${import.meta.env.BASE_URL}placeholder.svg`}
+                alt=""
+            />
+        )
+}
+
+export default AlbumCover

src/components/Header/Header.css

@@ -0,0 +1,50 @@
+/* Header */
+.site-header {
+  min-height: 88px;
+  padding: 20px 5%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  border-bottom: 1px solid #947268;
+}
+
+.logo {
+  color: #74070E;
+  font-family: 'Clash Display', sans-serif;
+  font-size: clamp(1.8rem, 3vw, 2.5rem);
+  font-weight: 600;
+  letter-spacing: -1.5px;
+  text-decoration: none;
+}
+
+.logo span {
+  color: #74070E;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-button {
+  padding: 10px 18px;
+  border: 1px solid #74070E;
+  border-radius: 3px;
+  background: transparent;
+  color: #74070E;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.sign-in-button {
+  background: #74070E;
+  color: #F4E3B2;
+}
+
+.header-button:hover {
+  background: #310E10;
+  border-color: #310E10;
+  color: #F4E3B2;
+}

src/components/Header/Header.tsx

@@ -0,0 +1,23 @@
+import { Link } from 'react-router-dom'
+import './Header.css'
+
+function Header() {
+    return (
+        <header className="site-header">
+            <Link to="/" className="logo" aria-label="CDLLECTION – forsiden">
+                CDLLECTION<span>.</span>
+            </Link>
+
+            <nav className="header-actions" aria-label="Brukermeny">
+                <button type="button" className="header-button">
+                    Log in
+                </button>
+                <button type="button" className="header-button sign-in-button">
+                    Sign in
+                </button>
+            </nav>
+        </header>
+    )
+}
+
+export default Header

src/graphQL/queries.ts

@@ -0,0 +1,21 @@
+import { gql } from '@apollo/client'
+
+// Temporary types matching the current mock graphql schema
+// Update when the backend switches to the PostgreSQL-backend typeDefs
+export const GET_ALBUM = gql`
+    query GetAlbum($id: ID!) {
+        album(id: $id) {
+            id
+            title
+            artist
+            releaseYear
+            genre
+            coverUrl
+
+            tracks {
+                title
+                duration
+            }
+        }
+    }
+`