♻️ Use Image rather than SanityImage for external images

♻️ Remove src from IImage
varianter · Dec 18, 2024 · 434fb72 · 434fb72
1 parent 77bf230
commit 434fb72
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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;