From b4dca6783a82e75c374712386eb3cf1b54a2c261 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Wed, 14 Oct 2026 15:06:54 +0200
Subject: [PATCH 1/4] feat: define artwork display type

---
 frontend/src/types/Artwork.ts | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 frontend/src/types/Artwork.ts

diff --git a/frontend/src/types/Artwork.ts b/frontend/src/types/Artwork.ts
new file mode 100644
index 0000000..626c909
--- /dev/null
+++ b/frontend/src/types/Artwork.ts
@@ -0,0 +1,8 @@
+export type Artwork = {
+  id: string | number
+  title: string
+  artist: string | null
+  imageUrl?: string | null
+  imageAlt?: string | null
+  date?: string | null
+}

From 60e308544f2063035ad521a85a7ebf028dabe394 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Wed, 14 Oct 2026 15:12:09 +0200
Subject: [PATCH 2/4] feat: add artwork card with image fallback

---
 frontend/src/components/ArtworkCard.css | 41 +++++++++++++++++++
 frontend/src/components/ArtworkCard.tsx | 52 +++++++++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 frontend/src/components/ArtworkCard.css
 create mode 100644 frontend/src/components/ArtworkCard.tsx

diff --git a/frontend/src/components/ArtworkCard.css b/frontend/src/components/ArtworkCard.css
new file mode 100644
index 0000000..737ab3f
--- /dev/null
+++ b/frontend/src/components/ArtworkCard.css
@@ -0,0 +1,41 @@
+.artwork-card {
+  min-width: 0;
+  padding: 16px;
+  border: 1px solid #dedede;
+  border-radius: 4px;
+  background: #fff;
+  color: #171717;
+  text-align: left;
+}
+
+.artwork-card__image,
+.artwork-card__placeholder {
+  display: block;
+  width: 100%;
+  aspect-ratio: 4 / 5;
+}
+
+.artwork-card__image {
+  object-fit: contain;
+  background: #f5f4f1;
+}
+
+.artwork-card__placeholder {
+  display: grid;
+  place-items: center;
+  background: #f5f4f1;
+  color: #595959;
+}
+
+.artwork-card__title {
+  margin: 16px 0 8px;
+  font-size: 1.5rem;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+
+.artwork-card__artist {
+  margin: 0;
+  color: #595959;
+  overflow-wrap: anywhere;
+}
\ No newline at end of file
diff --git a/frontend/src/components/ArtworkCard.tsx b/frontend/src/components/ArtworkCard.tsx
new file mode 100644
index 0000000..897e1c8
--- /dev/null
+++ b/frontend/src/components/ArtworkCard.tsx
@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import type { Artwork } from '../types/Artwork'
+import './ArtworkCard.css'
+
+type ArtworkCardProps = {
+  artwork: Artwork
+}
+
+function ArtworkImage({ src, alt }: { src: string; alt: string }) {
+  const [hasError, setHasError] = useState(false)
+
+  if (hasError) {
+    return (
+      <div className="artwork-card__placeholder">
+        Image unavailable
+      </div>
+    )
+  }
+
+  return (
+    <img
+      className="artwork-card__image"
+      src={src}
+      alt={alt}
+      loading="lazy"
+      onError={() => setHasError(true)}
+    />
+  )
+}
+
+export default function ArtworkCard({ artwork }: ArtworkCardProps) {
+  const artist = artwork.artist?.trim() || 'Unknown artist'
+
+  return (
+    <article className="artwork-card">
+      {artwork.imageUrl ? (
+        <ArtworkImage
+          key={artwork.imageUrl}
+          src={artwork.imageUrl}
+          alt={artwork.imageAlt || `${artwork.title} by ${artist}`}
+        />
+      ) : (
+        <div className="artwork-card__placeholder">
+          Image unavailable
+        </div>
+      )}
+
+      <h3 className="artwork-card__title">{artwork.title}</h3>
+      <p className="artwork-card__artist">{artist}</p>
+    </article>
+  )
+}
\ No newline at end of file

From 1fc1fe06be4551c2bcc647a6ff246919e203edb9 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Wed, 14 Oct 2026 15:23:05 +0200
Subject: [PATCH 3/4] feat: add responsive artwork results grid

---
 frontend/src/components/ArtworkGrid.css | 19 +++++++++++++++++++
 frontend/src/components/ArtworkGrid.tsx | 23 +++++++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 frontend/src/components/ArtworkGrid.css
 create mode 100644 frontend/src/components/ArtworkGrid.tsx

diff --git a/frontend/src/components/ArtworkGrid.css b/frontend/src/components/ArtworkGrid.css
new file mode 100644
index 0000000..904c56e
--- /dev/null
+++ b/frontend/src/components/ArtworkGrid.css
@@ -0,0 +1,19 @@
+.artwork-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  gap: 20px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.artwork-grid > li {
+  min-width: 0;
+}
+
+@media (min-width: 1024px) {
+  .artwork-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/ArtworkGrid.tsx b/frontend/src/components/ArtworkGrid.tsx
new file mode 100644
index 0000000..d12f73a
--- /dev/null
+++ b/frontend/src/components/ArtworkGrid.tsx
@@ -0,0 +1,23 @@
+import type { Artwork } from '../types/Artwork'
+import ArtworkCard from './ArtworkCard'
+import './ArtworkGrid.css'
+
+type ArtworkGridProps = {
+  artworks: Artwork[]
+}
+
+export default function ArtworkGrid({ artworks }: ArtworkGridProps) {
+  if (artworks.length === 0) {
+    return <p>No artworks to display.</p>
+  }
+
+  return (
+    <ul className="artwork-grid" aria-label="Artwork results" role="list">
+      {artworks.map((artwork) => (
+        <li key={artwork.id}>
+          <ArtworkCard artwork={artwork} />
+        </li>
+      ))}
+    </ul>
+  )
+}
\ No newline at end of file

From 8fa9be658762d7643690a505c187dafc5226a2d4 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Wed, 14 Oct 2026 15:36:04 +0200
Subject: [PATCH 4/4] refactor: require explicit artwork image URL or null

---
 frontend/src/types/Artwork.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/types/Artwork.ts b/frontend/src/types/Artwork.ts
index 626c909..f44a2eb 100644
--- a/frontend/src/types/Artwork.ts
+++ b/frontend/src/types/Artwork.ts
@@ -2,7 +2,7 @@ export type Artwork = {
   id: string | number
   title: string
   artist: string | null
-  imageUrl?: string | null
+  imageUrl: string | null
   imageAlt?: string | null
   date?: string | null
 }