From 30ddd65c9126c082e7a041a0f3815ef72f7e8732 Mon Sep 17 00:00:00 2001
From: mauro-balades <mauro.balades@tutanota.com>
Date: Tue, 27 Aug 2024 17:49:49 +0200
Subject: [PATCH] feat: Optimize image loading in components

---
 src/components/features.tsx   | 6 +++---
 src/components/header.tsx     | 4 ++--
 src/components/logo.tsx       | 2 +-
 src/components/theme-card.tsx | 2 +-
 src/components/theme-page.tsx | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/features.tsx b/src/components/features.tsx
index 8683e0f..30bbfc4 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -220,7 +220,7 @@ export default function Features() {
                     <span className="">How Zen compares to other browsers</span>
                   </TableHead>
                   <TableHead className="py-2 font-bold text-center">
-                    <Image
+                    <img
                       height={32}
                       width={32}
                       src="/favicon.ico"
@@ -230,7 +230,7 @@ export default function Features() {
                     Zen
                   </TableHead>
                   <TableHead className="py-2 pl-4 lg:pr-0 pr-2 font-bold text-center opacity-60">
-                    <Image
+                    <img
                       height={32}
                       width={32}
                       src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/floorp.png"
@@ -240,7 +240,7 @@ export default function Features() {
                     Floorp
                   </TableHead>
                   <TableHead className="py-2 pl-0 font-bold text-center opacity-60">
-                    <Image
+                    <img
                       height={32}
                       width={32}
                       src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/librewolf.png"
diff --git a/src/components/header.tsx b/src/components/header.tsx
index b118d9e..124a7fc 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -67,14 +67,14 @@ export default function Header() {
               colorTo="var(--color-two)"
             />
 
-            <Image
+            <img
               width={1500}
               height={700}
               src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-dark.png"
               alt="browser Image"
               className="relative hidden rounded-[inherit] border object-contain dark:block"
             />
-            <Image
+            <img
               width={1500}
               height={700}
               src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-light.png"
diff --git a/src/components/logo.tsx b/src/components/logo.tsx
index c986f9e..b765055 100644
--- a/src/components/logo.tsx
+++ b/src/components/logo.tsx
@@ -14,7 +14,7 @@ export default function Logo({ withText, ...props }: any) {
   }, []);
   return (
     <div className="flex items-center m-0" {...props}>
-      <Image src={`https://cdn.jsdelivr.net/gh/zen-browser/www/public/logos/zen-${randomColor}.svg`} width={40} height={40} alt="Zen Logo" className={ny("transition-all duration-300 hover:scale-110", withText && "mr-2")} />
+      <img src={`https://cdn.jsdelivr.net/gh/zen-browser/www/public/logos/zen-${randomColor}.svg`} width={40} height={40} alt="Zen Logo" className={ny("transition-all duration-300 hover:scale-110", withText && "mr-2")} />
       {withText && <span className="text-2xl font-bold ml-2">zen</span>}
     </div>
   );
diff --git a/src/components/theme-card.tsx b/src/components/theme-card.tsx
index 9e23b98..66ab418 100644
--- a/src/components/theme-card.tsx
+++ b/src/components/theme-card.tsx
@@ -20,7 +20,7 @@ export default function ThemeCard({
       if (event.target instanceof HTMLAnchorElement) return;
       window.open(`/themes/${theme.id}`, "_self");
     }} className="flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none ">
-      <Image src={theme.image} alt={theme.name} width={500} height={500} quality={100}
+      <img src={theme.image} alt={theme.name} width={500} height={500}
       className="w-full h-32 object-cover rounded-lg border shadow" />
       <h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name.substring(0, maxNameLen).trim() + (theme.name.length > maxNameLen ? "..." : "")}</h2>
       <div className="flex mt-2">
diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx
index 4b605a7..89de75f 100644
--- a/src/components/theme-page.tsx
+++ b/src/components/theme-page.tsx
@@ -23,7 +23,7 @@ export default async function ThemePage({ themeID }: { themeID: string }) {
           <ChevronLeft className="w-4 h-4 mr-1" />
           <h3 className="text-md">Go back</h3>
         </a>
-        <Image src={theme.image} alt={theme.name} width={500} height={500} className="w-full object-cover rounded-lg border-2 shadow" />
+        <img src={theme.image} alt={theme.name} width={500} height={500} className="w-full object-cover rounded-lg border-2 shadow" />
         <h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
         <p className="text-sm text-muted-foreground mt-2">{theme.description}</p>
         {theme.homepage && (