From ffb6e9e2d64258bb9041cde5cada31e4d3b85448 Mon Sep 17 00:00:00 2001
From: Bryan de Jong <bryandejong99@gmail.com>
Date: Wed, 4 Oct 2023 16:37:01 +0100
Subject: [PATCH] feat(vth): add card images to thema and content pages

---
 apps/vth-frontend/src/app/[locale]/page.tsx            |  4 ++--
 .../src/app/[locale]/themas/[themaSlug]/page.tsx       | 10 ++++++----
 apps/vth-frontend/src/components/Card/index.style.css  |  4 ++++
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/vth-frontend/src/app/[locale]/page.tsx b/apps/vth-frontend/src/app/[locale]/page.tsx
index d28e8911..df68432e 100644
--- a/apps/vth-frontend/src/app/[locale]/page.tsx
+++ b/apps/vth-frontend/src/app/[locale]/page.tsx
@@ -50,14 +50,14 @@ const Home = async ({ params: { locale } }: { params: any }) => {
         {themas &&
           themas.map((thema: any) => {
             const { title, description, slug, previewImage: imageData } = thema.attributes;
-            const previewImage = imageData?.data?.attributes?.url;
+            const imageUrl = imageData?.data?.attributes?.url;
             return (
               <Card
                 className={'utrecht-grid__one-third'}
                 key={`thema-${slug}`}
                 title={title}
                 description={description}
-                image={{ url: previewImage && buildImgURL(previewImage), alt: '' }}
+                image={{ url: imageUrl && buildImgURL(imageUrl), alt: '' }}
                 link={{ href: `/themas/${slug}` }}
               />
             );
diff --git a/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx
index 20a40fce..40c63cc4 100644
--- a/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx
+++ b/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx
@@ -44,11 +44,12 @@ const Thema = async ({ params: { locale, themaSlug } }: Params) => {
       <Grid className={'utrecht-grid__full-width'}>
         {child_themas.data[0] &&
           child_themas.data.map((thema: any) => {
-            const { title, description, slug: childSlug, previewImage } = thema.attributes;
+            const { title, description, slug: childSlug, previewImage: imageData } = thema.attributes;
+            const imageUrl = imageData?.data?.attributes?.url;
             return (
               <Card
                 className={'utrecht-grid__one-third'}
-                image={{ url: previewImage && buildImgURL(previewImage), alt: '' }}
+                image={{ url: imageUrl && buildImgURL(imageUrl), alt: '' }}
                 title={title}
                 description={description}
                 key={`thema-${childSlug}`}
@@ -59,14 +60,15 @@ const Thema = async ({ params: { locale, themaSlug } }: Params) => {
         {child_contents.data[0] &&
           child_contents.data &&
           child_contents.data.map((content: any) => {
-            const { title, description, slug: contentSlug, previewImage } = content.attributes;
+            const { title, description, slug: contentSlug, previewImage: imageData } = content.attributes;
+            const imageUrl = imageData?.data?.attributes?.url;
             return (
               <Card
                 className={'utrecht-grid__one-third'}
                 title={title}
                 description={description}
                 key={`thema-${contentSlug}`}
-                image={{ url: previewImage && buildImgURL(previewImage), alt: '' }}
+                image={{ url: imageUrl && buildImgURL(imageUrl), alt: '' }}
                 link={{ href: `/themas/${themaSlug}/content/${contentSlug}` }}
               />
             );
diff --git a/apps/vth-frontend/src/components/Card/index.style.css b/apps/vth-frontend/src/components/Card/index.style.css
index 0a5dc092..3fc97ee1 100644
--- a/apps/vth-frontend/src/components/Card/index.style.css
+++ b/apps/vth-frontend/src/components/Card/index.style.css
@@ -3,6 +3,10 @@
   max-width: 312px;
 }
 
+.utrecht-card__image {
+  object-fit: cover;
+}
+
 .utrecht-card__content {
   padding-block-end: 1rem;
   padding-block-start: 0;