fix: add aspect ratio on images

deco-sites · Oct 22, 2024 · 10cf043 · 10cf043
1 parent a9786ea
commit 10cf043
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 3 deletions.
diff --git a/components/product/ProductCard.tsx b/components/product/ProductCard.tsx
@@ -35,8 +35,8 @@ interface Props {
   platform?: Platform;
 }
 
-const WIDTH = 292;
-const HEIGHT = 220;
+const WIDTH = 200;
+const HEIGHT = 133;
 
 function ProductCard({
   product,
@@ -112,7 +112,8 @@ function ProductCard({
             alt={front.alternateName}
             width={WIDTH}
             height={HEIGHT}
-            class="col-span-full row-span-full rounded w-full h-3/4 object-contain"
+            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
@@ -73,6 +73,7 @@ export type AvailableIcons =
   | "Curativo"
   | "Seringa"
   | "Coração"
+  | "MonitorPressao"
   | "Share"
   | "Youtube"
   | "BenefitsGuard"

diff --git a/static/sprites.svg b/static/sprites.svg