From 2570b16724dad1846bc5379f35a5f3d3535e1790 Mon Sep 17 00:00:00 2001
From: Alexandra Goff <agoff@lsst.org>
Date: Fri, 8 Nov 2024 12:59:21 -0300
Subject: [PATCH] refactor: use Next image optimization

---
 components/molecules/Hero/index.tsx | 22 ++++++++++++++--------
 components/molecules/Hero/styles.ts |  3 ++-
 next.config.js                      | 16 ++++++++++++++++
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/components/molecules/Hero/index.tsx b/components/molecules/Hero/index.tsx
index 01f328ac..3f149174 100644
--- a/components/molecules/Hero/index.tsx
+++ b/components/molecules/Hero/index.tsx
@@ -18,15 +18,21 @@ const Hero: FunctionComponent<PropsWithChildren<HeroProps>> = ({
 
   if (!imageData?.url) return null;
 
+  const { width, height, url: src, altText: alt = "" } = imageData;
+
   return (
-    <Styled.HeroContainer
-      data-cy="hero"
-      style={{
-        "--Hero-object-position": `${focalPointX || 50}% ${focalPointY || 50}%`,
-      }}
-      className={className}
-    >
-      <Styled.HeroImage image={{ ...imageData, priority: true }} />
+    <Styled.HeroContainer data-cy="hero" className={className}>
+      <Styled.HeroImage
+        {...{ width, height, src, alt }}
+        style={{
+          "--Hero-object-position": `${focalPointX || 50}% ${
+            focalPointY || 50
+          }%`,
+        }}
+        priority
+        fetchPriority="high"
+        quality={90}
+      />
       {children}
     </Styled.HeroContainer>
   );
diff --git a/components/molecules/Hero/styles.ts b/components/molecules/Hero/styles.ts
index 625b73e0..5e4c196e 100644
--- a/components/molecules/Hero/styles.ts
+++ b/components/molecules/Hero/styles.ts
@@ -1,7 +1,8 @@
 "use client";
 import styled from "styled-components";
 import { fluidScale, containerFullBleed } from "@/styles/globalStyles";
-import Image from "@rubin-epo/epo-react-lib/Image";
+// import Image from "@rubin-epo/epo-react-lib/Image";
+import Image from "next/image";
 
 export const HeroContainer = styled.div`
   ${containerFullBleed("CONTAINER_FULL")}
diff --git a/next.config.js b/next.config.js
index b81732b3..58f5dc94 100644
--- a/next.config.js
+++ b/next.config.js
@@ -28,6 +28,22 @@ module.exports = {
       },
     ];
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "storage.googleapis.com",
+      },
+      {
+        protocol: "https",
+        hostname: "rubin.canto.com",
+      },
+      {
+        protocol: "https",
+        hostname: "noirlab.edu",
+      },
+    ],
+  },
   experimental: {
     forceSwcTransforms: true,
   },