feat: making the BuyTogether component responsive

deco-sites · May 20, 2024 · 2ba8ac0 · 2ba8ac0
1 parent 5f80ab7
commit 2ba8ac0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/components/product/BuyTogether/AddToCartButton/common.tsx b/components/product/BuyTogether/AddToCartButton/common.tsx
@@ -43,7 +43,7 @@ export default function AddToCartButton(props: Props) {
   return (
     <Button
       {...btnProps}
-      class="max-w-[250px] h-[60px] rounded bg-green hover:bg-green/90 border border-green drop-shadow transition-all duration-150 text-white-normal font-bold text-lg leading-5"
+      class="w-full xl:max-w-[250px] h-[60px] rounded bg-green hover:bg-green/90 border border-green drop-shadow transition-all duration-150 text-white-normal font-bold text-lg leading-5"
     >
       Comprar Junto
     </Button>

diff --git a/components/product/BuyTogether/BuyTogether.tsx b/components/product/BuyTogether/BuyTogether.tsx
@@ -12,7 +12,9 @@ export interface Props {
   products: Product[] | null;
 }
 
-export default function BuyTogether({ products }: Props) {
+export default function BuyTogether(
+  { products }: Props,
+) {
   if (!products || products.length === 0) return null;
 
   const othersProducts = useMemo(
@@ -26,6 +28,7 @@ export default function BuyTogether({ products }: Props) {
     () => products.map((item) => item.offers?.lowPrice ?? 0),
     [products],
   );
+
   const totalPrice = useMemo(
     () => productsOffers.reduce((acc, price) => acc + price, 0),
     [productsOffers],
@@ -50,8 +53,8 @@ export default function BuyTogether({ products }: Props) {
 
   return (
     <div class="flex items-center justify-center my-12 py-6 px-4 xl:px-0 bg-white-ice">
-      <div class="flex items-center gap-7 xl:max-w-full xl:mx-auto">
-        <div class="flex flex-col gap-2.5">
+      <div class="flex flex-col xl:flex-row items-center gap-7 xl:max-w-full xl:mx-auto">
+        <div class="flex-col gap-2.5 hidden xl:flex">
           <h2 class="text-black-neutral font-bold text-xl leading-6">
             Você está vendo
           </h2>
@@ -62,13 +65,13 @@ export default function BuyTogether({ products }: Props) {
           width={24}
           height={23}
           strokeWidth={2}
-          class="text-green"
+          class="text-green hidden xl:block"
         />
         <div class="flex flex-col gap-2.5">
           <h2 class="text-black-neutral font-bold text-xl leading-6">
             Compre junto
           </h2>
-          <div class="flex items-center justify-between gap-7">
+          <div class="flex flex-col xl:flex-row items-center justify-between gap-1.5 xl:gap-7">
             {othersProducts.map((product, index) => (
               <>
                 <Card product={product} hasViewProductLink={true} />
@@ -78,7 +81,7 @@ export default function BuyTogether({ products }: Props) {
                     width={24}
                     height={23}
                     strokeWidth={2}
-                    class="text-green"
+                    class="text-gray-base xl:text-green"
                   />
                 )}
               </>
@@ -88,11 +91,11 @@ export default function BuyTogether({ products }: Props) {
               width={20}
               height={17}
               strokeWidth={2}
-              class="text-green"
+              class="text-green hidden xl:block"
             />
           </div>
         </div>
-        <div class="flex flex-col gap-4 items-center justify-center text-center">
+        <div class="flex flex-col gap-4 items-center justify-center text-center w-full xl:w-auto border-t border-t-white-base xl:border-none pt-1 xl:pt-0">
           <div class="flex flex-col gap-0">
             <h2 class="text-lg text-black-neutral">Compre estes produtos</h2>
             <span class="text-lg text-black-neutral font-bold">

diff --git a/components/product/BuyTogether/Card.tsx b/components/product/BuyTogether/Card.tsx
@@ -26,7 +26,7 @@ export default function BuyTogetherCard(
   );
 
   return (
-    <div class="flex flex-col rounded w-[218px] h-[374px] bg-white-normal border border-[#BEBEBE] p-3">
+    <div class="flex flex-row xl:flex-col rounded w-full xl:w-[218px] h-32 xl:h-[374px] bg-white-normal border border-[#BEBEBE] p-3">
       <figure
         class="relative"
         style={{ aspectRatio: `${WIDTH} / ${HEIGHT}` }}
@@ -50,7 +50,7 @@ export default function BuyTogetherCard(
         </div>
       </figure>
 
-      <div class="flex flex-col gap-1 pt-3 border-t border-t-white-base h-full justify-between">
+      <div class="flex flex-col gap-1 pt-3 border-l border-l-white-base xl:border-l-0 xl:border-t xl:border-t-white-base h-full justify-between">
         <h2
           class="line-clamp-3 text-sm text-black-neutral uppercase font-medium leading-4"
           dangerouslySetInnerHTML={{ __html: name ?? "" }}