From 14056701d07b47f24e44981c058ed482589d7d9e Mon Sep 17 00:00:00 2001
From: Benno Tielen <Benno@tielen.nl>
Date: Fri, 5 Jun 2026 10:25:13 +0200
Subject: [PATCH] fix: display empty circle when no photo is provided

---
 src/components/ContactPersonCard/ContactPersonCard.tsx | 4 +++-
 src/components/ContactPersonCard/styles.module.scss    | 7 +++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/ContactPersonCard/ContactPersonCard.tsx b/src/components/ContactPersonCard/ContactPersonCard.tsx
index 80bb946..6480cec 100644
--- a/src/components/ContactPersonCard/ContactPersonCard.tsx
+++ b/src/components/ContactPersonCard/ContactPersonCard.tsx
@@ -31,7 +31,7 @@ export const ContactPersonCard = ({
   return (
     <div className={styles.card}>
       <div>
-        {photo && (
+        {photo ? (
           <Image
             className={styles.photo}
             src={photo}
@@ -40,6 +40,8 @@ export const ContactPersonCard = ({
             height={200}
             unoptimized={true}
           />
+        ) : (
+          <div className={styles.photoPlaceholder} />
         )}
       </div>
 
diff --git a/src/components/ContactPersonCard/styles.module.scss b/src/components/ContactPersonCard/styles.module.scss
index c0893c0..1c87b6a 100644
--- a/src/components/ContactPersonCard/styles.module.scss
+++ b/src/components/ContactPersonCard/styles.module.scss
@@ -14,6 +14,13 @@
   border-radius: 50%;
 }
 
+.photoPlaceholder {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  background-color: #efefef;
+}
+
 .role {
   font-size: 25px;
   color: $base-color;