From ebf5007e20dfd3b20de248e92fa51d0a6f3c8465 Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Sat, 10 Aug 2024 14:13:03 +0200
Subject: [PATCH] show contact portraits

---
 .../components/blocks/ContactEntityBlock.tsx  | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/web/src/components/blocks/ContactEntityBlock.tsx b/web/src/components/blocks/ContactEntityBlock.tsx
index 377dd69..6b66c57 100644
--- a/web/src/components/blocks/ContactEntityBlock.tsx
+++ b/web/src/components/blocks/ContactEntityBlock.tsx
@@ -2,6 +2,7 @@ import { ContactEntityBlock as ContactEntityBlockType } from "@/gql/graphql";
 import styles from "./contactEntityBlock.module.scss";
 import { formatNorwegianPhoneNumber, formatPhoneE164 } from "@/lib/common";
 import { Icon } from "../general/Icon";
+import { Image } from "../general/Image";
 
 export const ContactEntityBlock = ({
   block,
@@ -22,7 +23,22 @@ export const ContactEntityBlock = ({
   return (
     <li className={styles.contactItem}>
       <div className={styles.image}>
-        <img src="/assets/graphics/portrait-pig.svg" className={styles.portraitPlaceholder} />
+        {!contact.image && (
+          <img
+            src="/assets/graphics/portrait-pig.svg"
+            className={styles.portraitPlaceholder}
+          />
+        )}
+        {contact.image && (
+          <Image
+            src={contact.image.url}
+            alt={contact.image.alt ?? ""}
+            width={contact.image.width}
+            height={contact.image.height}
+            sizes="10vw"
+            className={styles.portrait}
+          />
+        )}
       </div>
       <div className={styles.text}>
         <h1 className={styles.name}>{contact.name}</h1>
@@ -31,7 +47,9 @@ export const ContactEntityBlock = ({
           <ul className={styles.contact}>
             {contact.email && (
               <li>
-                <span className={styles.icon}><Icon type="email" /></span>
+                <span className={styles.icon}>
+                  <Icon type="email" />
+                </span>
                 <a href={`mailto:${contact.email}`} target="_blank">
                   {contact.email}
                 </a>
@@ -39,7 +57,9 @@ export const ContactEntityBlock = ({
             )}
             {phoneE164 && (
               <li>
-                <span className={styles.icon}><Icon type="phone" /></span>
+                <span className={styles.icon}>
+                  <Icon type="phone" />
+                </span>
                 <a href={`tel:${phoneE164}`} target="_blank">
                   {phoneFormatted}
                 </a>