Changing img tag (#120)

* Changing img tag * Removing all img tags --------- Co-authored-by: Vinicius Ribeiro <[email protected]>
deco-sites · Jan 25, 2024 · 3891391 · 3891391
1 parent d8ac47c
commit 3891391
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 15 deletions.
diff --git a/components/daisy/Diff.tsx b/components/daisy/Diff.tsx
@@ -1,3 +1,5 @@
+import Image from "apps/website/components/Image.tsx";
+
 export interface Props {
   oldImage: { src: string; alt: string };
   newImage: { src: string; alt: string };
@@ -9,10 +11,20 @@ export default function Diff(props: Props) {
   return (
     <div class="diff aspect-[16/9]">
       <div className="diff-item-1">
-        <img alt={oldImage.alt} src={oldImage.src} />
+        <Image
+          alt={oldImage.alt}
+          src={oldImage.src}
+          width={1080}
+          height={720}
+        />
       </div>
       <div className="diff-item-2">
-        <img alt={newImage.alt} src={newImage.src} />
+        <Image
+          alt={newImage.alt}
+          src={newImage.src}
+          width={1080}
+          height={720}
+        />
       </div>
       <div className="diff-resizer"></div>
     </div>

diff --git a/components/daisy/Hero.tsx b/components/daisy/Hero.tsx
@@ -1,3 +1,5 @@
+import Image from "apps/website/components/Image.tsx";
+
 export interface Props {
   title: string;
   description: string;
@@ -17,10 +19,12 @@ export default function Hero(props: Props) {
           : "hero-content text-center"}
       >
         {image && !imageOnRight && (
-          <img
+          <Image
             src={image.src}
             className="max-w-sm rounded-lg shadow-2xl"
             alt={image.alt}
+            width={1080}
+            height={1350}
           />
         )}
         <div className={image ? "" : "max-w-md"}>
@@ -33,10 +37,12 @@ export default function Hero(props: Props) {
           )}
         </div>
         {image && imageOnRight && (
-          <img
+          <Image
             src={image.src}
             className="max-w-sm rounded-lg shadow-2xl"
             alt={image.alt}
+            width={1080}
+            height={1350}
           />
         )}
       </div>

diff --git a/components/daisy/Indicator.tsx b/components/daisy/Indicator.tsx
@@ -1,3 +1,5 @@
+import Image from "apps/website/components/Image.tsx";
+
 export interface Props {
   text?: string;
   badgeText?: string;
@@ -18,7 +20,9 @@ export default function Indicator(props: Props) {
         }`}
       >
         {!avatar && text}
-        {avatar && <img alt={avatar.alt} src={avatar.src} />}
+        {avatar && (
+          <Image alt={avatar.alt} src={avatar.src} width={80} height={80} />
+        )}
       </div>
     </div>
   );

diff --git a/components/footer/Logo.tsx b/components/footer/Logo.tsx
@@ -1,4 +1,5 @@
 import type { ImageWidget } from "apps/admin/widgets.ts";
+import Image from "apps/website/components/Image.tsx";
 
 export interface Props {
   logo?: {
@@ -13,7 +14,7 @@ export default function Logo({ logo }: Props) {
       {logo?.image && (
         <div class="flex flex-col gap-3">
           <div class="w-28 max-h-16">
-            <img
+            <Image
               loading="lazy"
               src={logo?.image}
               alt={logo?.description}

diff --git a/components/ui/BannerCarousel.tsx b/components/ui/BannerCarousel.tsx
@@ -9,6 +9,7 @@ import SliderJS from "$store/islands/SliderJS.tsx";
 import { useId } from "$store/sdk/useId.ts";
 import type { ImageWidget } from "apps/admin/widgets.ts";
 import { Picture, Source } from "apps/website/components/Picture.tsx";
+import Image from "apps/website/components/Image.tsx";
 
 /**
  * @titleBy alt
@@ -148,11 +149,13 @@ function BannerItem(
           width={1440}
           height={600}
         />
-        <img
+        <Image
           class="object-cover w-full h-full"
           loading={lcp ? "eager" : "lazy"}
           src={desktop}
           alt={alt}
+          width={1440}
+          height={600}
         />
       </Picture>
     </a>
@@ -230,7 +233,6 @@ function BannerCarousel(props: Props) {
       <Slider class="carousel carousel-center w-full col-span-full row-span-full gap-6">
         {images?.map((image, index) => {
           const params = { promotion_name: image.alt };
-
           return (
             <Slider.Item index={index} class="carousel-item w-full">
               <BannerItem

diff --git a/components/ui/BannerGrid.tsx b/components/ui/BannerGrid.tsx
@@ -1,5 +1,6 @@
 import { Picture, Source } from "apps/website/components/Picture.tsx";
 import type { ImageWidget } from "apps/admin/widgets.ts";
+import Image from "apps/website/components/Image.tsx";
 
 /**
  * @titleBy alt
@@ -160,13 +161,15 @@ export default function BannnerGrid(props: Props) {
                 width={250}
                 height={250}
               />
-              <img
+              <Image
                 class="w-full"
                 sizes="(max-width: 640px) 100vw, 30vw"
                 src={srcMobile}
                 alt={alt}
                 decoding="async"
                 loading="lazy"
+                width={100}
+                height={100}
               />
             </Picture>
           </a>

diff --git a/components/ui/CategoryBanner.tsx b/components/ui/CategoryBanner.tsx
@@ -1,6 +1,7 @@
 import { Picture, Source } from "apps/website/components/Picture.tsx";
 import type { SectionProps } from "deco/types.ts";
 import type { ImageWidget } from "apps/admin/widgets.ts";
+import Image from "apps/website/components/Image.tsx";
 
 /**
  * @titleBy matcher
@@ -63,7 +64,13 @@ function Banner(props: SectionProps<ReturnType<typeof loader>>) {
           height={200}
           media="(min-width: 767px)"
         />
-        <img class="w-full" src={image.desktop} alt={image.alt ?? title} />
+        <Image
+          class="w-full"
+          src={image.desktop}
+          alt={image.alt ?? title}
+          width={1440}
+          height={200}
+        />
       </Picture>
 
       <div class="container flex flex-col items-center justify-center sm:items-start col-start-1 col-span-1 row-start-1 row-span-1 w-full">

diff --git a/components/ui/ImageGallery.tsx b/components/ui/ImageGallery.tsx
@@ -1,4 +1,5 @@
 import type { ImageWidget } from "apps/admin/widgets.ts";
+import Image from "apps/website/components/Image.tsx";
 
 /**
  * @titleBy title
@@ -44,25 +45,33 @@ export default function ImageGallery({
         {description}
       </p>
       <div class="grid grid-cols-2 gap-4 mt-11 lg:flex lg:gap-8 lg:mt-20">
-        <img
+        <Image
           class="min-w-full object-cover max-w-[156px] max-h-[156px] "
           src={imageOne}
           alt={alt}
+          width={156}
+          height={156}
         />
-        <img
+        <Image
           class="min-w-full object-cover max-w-[156px] max-h-[156px] "
           src={imageTwo}
           alt={alt}
+          width={156}
+          height={156}
         />
-        <img
+        <Image
           class="min-w-full object-cover max-w-[156px] max-h-[156px] "
           src={imageThree}
           alt={alt}
+          width={156}
+          height={156}
         />
-        <img
+        <Image
           class="min-w-full object-cover max-w-[156px] max-h-[156px] "
           src={imageFour}
           alt={alt}
+          width={156}
+          height={156}
         />
       </div>
     </section>

diff --git a/sections/Images/ShoppableBanner.tsx b/sections/Images/ShoppableBanner.tsx
@@ -1,5 +1,6 @@
 import { Picture, Source } from "apps/website/components/Picture.tsx";
 import type { ImageWidget } from "apps/admin/widgets.ts";
+import Image from "apps/website/components/Image.tsx";
 
 export interface Props {
   image: {
@@ -92,13 +93,15 @@ export default function ShoppableBanner(props: Props) {
               width={384}
               height={227}
             />
-            <img
+            <Image
               class="w-full h-full object-cover"
               sizes="(max-width: 640px) 100vw, 30vw"
               src={image?.mobile}
               alt={image?.altText}
               decoding="async"
               loading="lazy"
+              width={150}
+              height={150}
             />
           </Picture>
           {pins?.map(({ mobile, desktop, link, label }) => (