From 7a7f8bc046d04b75682f4472fe57ef7c6406586a Mon Sep 17 00:00:00 2001
From: Petter Hohle <petter.hohle@gmail.com>
Date: Wed, 18 Dec 2024 14:48:33 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Use=20Image=20rather=20tha?=
 =?UTF-8?q?n=20SanityImage=20for=20external=20images=20=E2=99=BB=EF=B8=8F?=
 =?UTF-8?q?=20Remove=20src=20from=20IImage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CustomerCaseEmployeeCard.tsx                    | 13 +++++++------
 src/components/employeePage/EmployeePage.tsx        | 13 +++++++------
 studio/lib/interfaces/media.ts                      |  1 -
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx b/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx
index 606a8e057..3518cdc4a 100644
--- a/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx
+++ b/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx
@@ -1,6 +1,6 @@
+import Image from "next/image";
 import { useTranslations } from "next-intl";
 
-import { SanityImage } from "src/components/image/SanityImage";
 import Text from "src/components/text/Text";
 import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
 import { ChewbaccaEmployee } from "src/types/employees";
@@ -26,11 +26,12 @@ export default function CustomerCaseEmployeeCard({
     employee.email && (
       <div key={employee.email} className={styles.employee}>
         <div className={styles.employeeImage}>
-          <SanityImage
-            image={{
-              src: { src: employee.imageUrl ?? employee.imageThumbUrl },
-              alt: employee.name,
-            }}
+          <Image
+            src={employee.imageUrl ?? employee.imageThumbUrl}
+            alt={employee.name}
+            width={300}
+            height={300}
+            style={{ objectFit: "cover", height: "100%", width: "100%" }}
           />
         </div>
         <div className={styles.employeeInfo}>
diff --git a/src/components/employeePage/EmployeePage.tsx b/src/components/employeePage/EmployeePage.tsx
index f1643a1f7..03a42e980 100644
--- a/src/components/employeePage/EmployeePage.tsx
+++ b/src/components/employeePage/EmployeePage.tsx
@@ -1,6 +1,6 @@
+import Image from "next/image";
 import { getTranslations } from "next-intl/server";
 
-import { SanityImage } from "src/components/image/SanityImage";
 import LinkButton from "src/components/linkButton/LinkButton";
 import Text from "src/components/text/Text";
 import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
@@ -30,11 +30,12 @@ export default async function EmployeePage({
           <div className={styles.employee}>
             {image != null && (
               <div className={styles.employeeImage}>
-                <SanityImage
-                  image={{
-                    src: { src: image },
-                    alt: employee.name,
-                  }}
+                <Image
+                  src={image}
+                  alt={employee.name}
+                  width={300}
+                  height={300}
+                  style={{ objectFit: "cover", height: "100%", width: "100%" }}
                 />
               </div>
             )}
diff --git a/studio/lib/interfaces/media.ts b/studio/lib/interfaces/media.ts
index 6cbd3348d..f11b4fd96 100644
--- a/studio/lib/interfaces/media.ts
+++ b/studio/lib/interfaces/media.ts
@@ -28,7 +28,6 @@ export interface IImage {
   _key?: string;
   _type?: string;
   asset?: SanityImageSource; // image from Sanity
-  src?: { src: string }; // Mock URL for Storybook
   alt?: string;
   crop?: ICrop;
   hotspot?: IHotspot;