🎨 styles: cart drawer recommendation with single btn

:%s

src/components/common/CarouselCommon/CarouselCommon.tsx

@@ -15,6 +15,7 @@ export interface CarouselCommonProps<T> {
   option: TOptionsEvents
   keenClassname?: string
   isPadding?: boolean
+  defaultComponentProps?: object
 }
 
 const CarouselCommon = <T,>({
@@ -25,6 +26,7 @@ const CarouselCommon = <T,>({
   isPadding = false,
   isArrow = true,
   isDot = false,
+  defaultComponentProps,
   option: { slideChanged,slidesPerView, ...sliderOption },
 }: CarouselCommonProps<T>) => {
   const [currentSlide, setCurrentSlide] = React.useState(0)
@@ -68,11 +70,14 @@ const CarouselCommon = <T,>({
           [s.isPadding]: isPadding,
         })}
       >
-        {data?.map((props, index) => (
-          <div className="keen-slider__slide" key={`${itemKey}-${index}`}>
-            <Component {...props} />
-          </div>
-        ))}
+        {data?.map((props, index) => {
+          const allProps = defaultComponentProps ? { ...props, ...defaultComponentProps } : props
+          return (
+            <div className="keen-slider__slide" key={`${itemKey}-${index}`}>
+              <Component {...allProps} />
+            </div>
+          )
+        })}
       </div>
       {slider && isArrow && (
         <>

src/components/common/CartDrawer/CartDrawer.module.scss

@@ -4,7 +4,7 @@
 .cartDrawer {
     @apply flex flex-col h-full;
     .body {
-        @apply overflow-y-auto overflow-x-hidden h-full custom-scroll;
+        @apply flex flex-col justify-center overflow-y-auto overflow-x-hidden h-full custom-scroll;
     }
     .bottom {
         padding-top: 1.6rem;

src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx

@@ -7,14 +7,20 @@ import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
 import s from './CartRecommendation.module.scss';
 
 const option: TOptionsEvents = {
-  slidesPerView: 2,
+  slidesPerView: 1.5,
   mode: 'free',
   breakpoints: {
     '(min-width: 640px)': {
-      slidesPerView: 1,
+      slidesPerView: 1.5,
     },
     '(min-width: 768px)': {
       slidesPerView: 2.5,
+    },
+    '(min-width: 1008px)': {
+      slidesPerView: 2.2,
+    },
+    '(min-width: 1440px)': {
+      slidesPerView: 2.5,
     }
   },
 }
@@ -34,6 +40,7 @@ const CartRecommendation = () => {
           Component={ProductCard}
           itemKey="cart-recommendation"
           option={option}
+          defaultComponentProps={{ isSingleButton: true }}
         />
       </div>
     </div>

src/components/common/ProductCard/ProductCard.module.scss

@@ -57,13 +57,16 @@
         }
     }
     .cardBot {
-        min-height: 4rem;
         @apply flex justify-between items-center;
+        min-height: 4rem;
+        margin-top: 1.6rem;
         .cardIcon {
             margin-right: 0.8rem;
         }
         .cardButton {
+            width: 100%;
             button {
+                width: 100%;
                 > div {
                     span {
                         display: -webkit-box;

src/components/common/ProductCard/ProductCard.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link'
 import React from 'react'
+import { IconBuy } from 'src/components/icons'
 import { ROUTE } from 'src/utils/constanst.utils'
 import { ProductProps } from 'src/utils/types.utils'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
@@ -11,6 +12,7 @@ import ProductNotSell from './ProductNotSell/ProductNotSell'
 
 export interface ProductCardProps extends ProductProps {
   buttonText?: string
+  isSingleButton?: boolean,
 }
 
 const ProductCard = ({
@@ -21,6 +23,7 @@ const ProductCard = ({
   buttonText = 'Buy Now',
   imageSrc,
   isNotSell,
+  isSingleButton,
 }: ProductCardProps) => {
   if (isNotSell) {
     return <div className={`${s.productCardWarpper} ${s.notSell}`}>
@@ -56,12 +59,22 @@ const ProductCard = ({
         </div>
       </div>
       <div className={s.cardBot}>
-        <div className={s.cardIcon}>
-          <ButtonIconBuy />
-        </div>
-        <div className={s.cardButton}>
-          <ButtonCommon type="light">{buttonText}</ButtonCommon>
-        </div>
+        {
+          isSingleButton ?
+            <div className={s.cardButton}>
+              <ButtonCommon type="light" icon={<IconBuy />}>Add to cart</ButtonCommon>
+            </div>
+            :
+            <>
+              <div className={s.cardIcon}>
+                <ButtonIconBuy />
+              </div>
+              <div className={s.cardButton}>
+                <ButtonCommon type="light">{buttonText}</ButtonCommon>
+              </div>
+            </>
+        }
+
       </div>
     </div>
   )