🔨 refactor: delete keen-silder

:%s

src/components/common/Banner/Banner.tsx

@@ -1,4 +1,3 @@
-import { TOptionsEvents } from 'keen-slider'
 import React, { memo } from 'react'
 import { ResponsiveType } from 'react-multi-carousel'
 import CarouselCommon from '../CarouselCommon/CarouselCommon'

src/components/common/CarouselCommon/CarouselCommon.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef } from 'react'
-import 'keen-slider/keen-slider.min.css'
 import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow'
 import s from './CarouselCommon.module.scss'
 import classNames from 'classnames'
@@ -15,7 +14,6 @@ export interface CarouselCommonProps<T>
   data: T[]
   Component: React.ComponentType<T>
   itemKey: String
-  keenClassname?: string
   isPadding?: boolean
   defaultComponentProps?: object
   responsive?: ResponsiveType

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

@@ -1,4 +1,3 @@
-import { TOptionsEvents } from 'keen-slider';
 import React from 'react';
 import { ResponsiveType } from 'react-multi-carousel';
 import { CarouselCommon, ViewAllItem } from 'src/components/common';

src/components/common/FeaturedProductCard/FeaturedProductCard.tsx

@@ -5,7 +5,7 @@ import { LANGUAGE } from '../../../utils/language.utils'
 import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
 import { ImgWithLink } from '..'
-interface FeaturedProductCardProps extends FeaturedProductProps {
+export interface FeaturedProductCardProps extends FeaturedProductProps {
   buttonText?: string
 }
 

src/components/common/ListProductWithInfo/ListProductWithInfo.tsx

@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import { TOptionsEvents } from 'keen-slider';
 import React from 'react';
 import { ResponsiveType } from 'react-multi-carousel';
 import CarouselCommon from '../CarouselCommon/CarouselCommon';
@@ -13,30 +12,7 @@ interface Props {
     subtitle?: string,
     hasBorderBottomMobile?: boolean,
 }
-const OPTION_DEFAULT: TOptionsEvents = {
-    slidesPerView: 2,
-    mode: 'free',
-    breakpoints: {
-        '(min-width: 640px)': {
-            slidesPerView: 3,
-        },
-        '(min-width: 768px)': {
-            slidesPerView: 3,
-        },
-        '(min-width: 1008px)': {
-            slidesPerView: 3.5,
-        },
-        '(min-width: 1024px)': {
-            slidesPerView: 2.5,
-        },
-        '(min-width: 1280px)': {
-            slidesPerView: 3.5,
-        },
-        '(min-width: 1440px)': {
-            slidesPerView: 4.5,
-        },
-    },
-}
+
 const RESPONSIVE:ResponsiveType = {
     xxl: {
         breakpoint: { max: 9999, min: 1440 },

src/components/common/ProductCarousel/ProductCarousel.tsx

@@ -1,4 +1,3 @@
-// import { TOptionsEvents } from 'keen-slider'
 import React from 'react'
 import CarouselCommon, {
   CarouselCommonProps,

src/components/common/RecipeCarousel/RecipeCarousel.tsx

@@ -1,4 +1,3 @@
-import { TOptionsEvents } from 'keen-slider'
 import React from 'react'
 import { ResponsiveType } from 'react-multi-carousel'
 import CarouselCommon, {
@@ -10,25 +9,6 @@ import s from './RecipeCarousel.module.scss'
 interface RecipeCarouselProps
   extends Omit<CarouselCommonProps<RecipeCardProps>, 'Component' | 'option'> {}
 
-const OPTION_DEFAULT: TOptionsEvents = {
-  slidesPerView: 1.25,
-  mode: 'free',
-  spacing: 24,
-  breakpoints: {
-    '(min-width: 640px)': {
-      slidesPerView: 2,
-    },
-    '(min-width: 1024px)': {
-      slidesPerView: 2.5,
-    },
-    '(min-width: 1440px)': {
-      slidesPerView: 3,
-    },
-    '(min-width: 1536px)': {
-      slidesPerView: 3.5,
-    },
-  },
-}
 const RESPONSIVE: ResponsiveType = {
   largeDesktop: {
     breakpoint: { max: 9999, min: 1536 },

src/components/common/RecommendedRecipes/RecommendedRecipes.tsx

@@ -1,4 +1,3 @@
-import { TOptionsEvents } from 'keen-slider';
 import React from 'react';
 import { ResponsiveType } from 'react-multi-carousel';
 import { CarouselCommon, HeadingCommon, RecipeCard, ViewAllItem } from 'src/components/common';

src/components/common/RelevantBlogPosts/BlogPostCarousel/BlogPostCarousel.tsx

@@ -1,4 +1,3 @@
-import { TOptionsEvents } from 'keen-slider'
 import React from 'react'
 import CarouselCommon, {
   CarouselCommonProps,

src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx

@@ -1,4 +1,3 @@
-import { TOptionsEvents } from 'keen-slider'
 import React from 'react'
 import { ResponsiveType } from 'react-multi-carousel'
 import { CarouselCommon, FeaturedProductCard } from 'src/components/common'
@@ -27,40 +26,14 @@ const dataDemo:FeaturedProductCardProps[] = [{
     price: "$14.00",
     imageSrc: "https://user-images.githubusercontent.com/76099413/133043633-954c105b-c703-4e5c-8f5f-7943ad633ff0.png"
 }]
-
-const OPTION_DEFAULT: TOptionsEvents = {
-    slidesPerView: 1,
-    mode: 'free',
-    breakpoints: {
-      '(min-width: 300px)': {
-        slidesPerView: 1.5,
-      },
-      '(min-width: 400px)': {
-        slidesPerView: 2,
-      },
-      '(min-width: 640px)': {
-        slidesPerView: 1.25,
-      },
-      '(min-width: 768px)': {
-        slidesPerView: 1.075,
-      },
-      '(min-width: 968px)': {
-        slidesPerView: 1.175,
-      },
-      '(min-width: 1024px)': {
-        slidesPerView: 1.375,
-      },'(min-width: 1148px)': {
-        slidesPerView: 1.5,
-      },'(min-width: 1280px)': {
-        slidesPerView: 1.75,
-      },'(min-width: 1440px)': {
-        slidesPerView: 2.075,
-      },
-    },
-  }
   const RESPONSIVE: ResponsiveType = {
+    hugeScreen: {
+      breakpoint: { max: 9999, min: 1500 },
+      items: 2.25,
+      slidesToSlide: 1, // optional, default to 1.
+    },
     largeScreen: {
-      breakpoint: { max: 9999, min: 1440 },
+      breakpoint: { max: 1500, min: 1440 },
       items: 2.075,
       slidesToSlide: 1, // optional, default to 1.
     },

src/components/modules/home/HomeFeature/components/HomeFeatureCarousel/HomeFeatureCarousel.tsx

@@ -1,6 +1,4 @@
 import React from 'react'
-import { TOptionsEvents } from 'keen-slider'
-
 import HomeFeatureItem, {HomeFeatureItemProps} from '../HomeFeatureItem/HomeFeatureItem'
 import CarouselCommon, {CarouselCommonProps} from '../../../../../common/CarouselCommon/CarouselCommon'
 import { ResponsiveType } from 'react-multi-carousel'
@@ -9,27 +7,6 @@ interface HomeFeatureCarouselProps
   extends Omit<CarouselCommonProps<HomeFeatureItemProps>, 'Component' | "option"> {
 }
 
-const OPTION_DEFAULT: TOptionsEvents = {
-    slidesPerView: 1.2,
-    mode: 'free',
-    breakpoints: {
-      '(min-width: 640px)': {
-        slidesPerView: 1.8,
-      },
-      '(min-width: 768px)': {
-        slidesPerView: 2.1,
-      },
-      '(min-width: 1008px)': {
-        slidesPerView: 2.3,
-      },
-      '(min-width: 1280px)': {
-        slidesPerView: 2.8,
-      },
-      '(min-width: 1440px)': {
-        slidesPerView: 3,
-      },
-    },
-  }
   const RESPONSIVE: ResponsiveType = {
     largeDesktop: {
       breakpoint: { max: 9999, min: 1440 },