From 10cf043bbea494fdeca7728aad3be0e4896891f1 Mon Sep 17 00:00:00 2001 From: yuriassuncx Date: Tue, 22 Oct 2024 10:17:28 -0300 Subject: [PATCH 1/4] fix: add aspect ratio on images --- components/product/ProductCard.tsx | 7 +++--- components/ui/Icon.tsx | 1 + static/sprites.svg | 34 ++++++++++++++++++++++++++++++ 3 files changed, 39 insertions(+), 3 deletions(-) diff --git a/components/product/ProductCard.tsx b/components/product/ProductCard.tsx index 1cb39e8..644ce84 100644 --- 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 index 08fc535..7d08228 100644 --- 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 index 5039863..cc224d1 100644 --- a/static/sprites.svg +++ b/static/sprites.svg @@ -284,4 +284,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 6d998b5f8c3391f572e83cc588553da443835c60 Mon Sep 17 00:00:00 2001 From: yuriassuncx Date: Tue, 22 Oct 2024 10:26:46 -0300 Subject: [PATCH 2/4] chore: remove Image component for tests --- components/product/ProductCard.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/product/ProductCard.tsx b/components/product/ProductCard.tsx index 644ce84..88a7ec0 100644 --- 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 { @@ -107,14 +107,14 @@ function ProductCard({ aria-label="view product" class="grid grid-cols-1 grid-rows-1 items-center w-full" > - {front.alternateName} From e967a79ff721e945c12e9ce803956329b1ef0d27 Mon Sep 17 00:00:00 2001 From: yuriassuncx Date: Tue, 22 Oct 2024 12:21:08 -0300 Subject: [PATCH 3/4] fix(PDP): remove Image component --- components/product/Gallery/ImageSlider.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/product/Gallery/ImageSlider.tsx b/components/product/Gallery/ImageSlider.tsx index 823b372..414021f 100644 --- 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" > - {img.alternateName} From 3e36fe10d6bca6d856037427b1d5cf9329bc45c7 Mon Sep 17 00:00:00 2001 From: yuriassuncx Date: Tue, 22 Oct 2024 12:32:12 -0300 Subject: [PATCH 4/4] fix: Brands fixed --- components/ui/ThirdBanners.tsx | 17 ++++++++++--- sections/Content/Brands.tsx | 4 ++-- static/sprites.svg | 44 +++++++++++++++++----------------- 3 files changed, 38 insertions(+), 27 deletions(-) diff --git a/components/ui/ThirdBanners.tsx b/components/ui/ThirdBanners.tsx index c30a1b9..05be7c1 100644 --- 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 (
@@ -36,8 +47,8 @@ function BannerCard( > {alt} - + - - - - - - - - - + + + + + + + + + - - - - + + + + - - - + + + - - - + + +