Merge branch 'main' of https://github.com/deco-sites/maconequiio

deco-sites · Oct 29, 2024 · dc0524b · dc0524b
2 parents 00f2771 + 3e36fe1
commit dc0524b
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 14 deletions.
diff --git a/components/product/Gallery/ImageSlider.tsx b/components/product/Gallery/ImageSlider.tsx
@@ -44,16 +44,16 @@ export default function GallerySlider(props: Props) {
               index={index}
               class="carousel-item w-full"
             >
-              <Image
+              <img
                 class="w-full object-contain"
                 sizes="(max-width: 640px) 100vw, 40vw"
-                style={{ aspectRatio }}
                 src={img.url!}
                 alt={img.alternateName}
                 width={width}
                 height={height}
+                style={{ aspectRatio }}
                 // Preload LCP image for better web vitals
-                preload={index === 0}
+                // preload={index === 0}
                 loading={index === 0 ? "eager" : "lazy"}
               />
             </Slider.Item>

diff --git a/components/product/ProductCard.tsx b/components/product/ProductCard.tsx
@@ -4,7 +4,7 @@ import { formatInstallments, formatPrice } from "$store/sdk/format.ts";
 import { useOffer } from "$store/sdk/useOffer.ts";
 import type { Product } from "apps/commerce/types.ts";
 import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalyticsItem.ts";
-import Image from "apps/website/components/Image.tsx";
+// import Image from "apps/website/components/Image.tsx";
 import { relative } from "$store/sdk/url.ts";
 
 export interface Layout {
@@ -35,8 +35,8 @@ interface Props {
   platform?: Platform;
 }
 
-const WIDTH = 292;
-const HEIGHT = 220;
+const WIDTH = 200;
+const HEIGHT = 133;
 
 function ProductCard({
   product,
@@ -107,13 +107,14 @@ function ProductCard({
           aria-label="view product"
           class="grid grid-cols-1 grid-rows-1 items-center w-full"
         >
-          <Image
+          <img
             src={front.url!}
             alt={front.alternateName}
             width={WIDTH}
             height={HEIGHT}
-            class="col-span-full row-span-full rounded w-full h-3/4 object-contain"
-            sizes="(max-width: 640px) 50vw, 20vw"
+            style={{ aspectRatio: `${WIDTH} / ${HEIGHT}` }}
+            class="col-span-full row-span-full rounded w-full object-contain"
+            // sizes="(max-width: 640px) 50vw, 20vw"
             loading="lazy"
             decoding="async"
           />

diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx
@@ -74,6 +74,7 @@ export type AvailableIcons =
   | "Curativo"
   | "Seringa"
   | "Coração"
+  | "MonitorPressao"
   | "Share"
   | "Youtube"
   | "BenefitsGuard"

diff --git a/components/ui/ThirdBanners.tsx b/components/ui/ThirdBanners.tsx
@@ -14,6 +14,8 @@ export interface Banner {
    */
   link: string;
   target?: "_blank" | "_self";
+  width?: number;
+  height?: number;
 }
 
 export interface Props {
@@ -26,7 +28,16 @@ export interface Props {
 }
 
 function BannerCard(
-  { image, alt, title, description, link = "#", target = "_blank" }: Banner,
+  {
+    image,
+    alt,
+    title,
+    description,
+    link = "#",
+    target = "_blank",
+    width,
+    height,
+  }: Banner,
 ) {
   return (
     <div class="flex flex-col items-center justify-center gap-6 w-full h-full">
@@ -36,8 +47,8 @@ function BannerCard(
       >
         <Image
           src={image}
-          width={423}
-          height={321}
+          width={width || 423}
+          height={height || 321}
           alt={alt}
           loading="lazy"
           fetchPriority="low"

diff --git a/sections/Content/Brands.tsx b/sections/Content/Brands.tsx
@@ -62,8 +62,8 @@ export default function Brands(
               >
                 <Image
                   src={brand.image}
-                  width={160 || brand.width}
-                  height={36 || brand.height}
+                  width={brand.width || 160}
+                  height={brand.height || 36}
                   loading="lazy"
                   decoding="async"
                   class="w-full"