init caroucel

src/components/common/CarouselCommon/CaroucelCommon.module.scss

@@ -0,0 +1,5 @@
+.navigation_wrapper{
+    @apply relative;
+    min-height: theme("caroucel.arrow-height") ;
+    
+}

src/components/common/CarouselCommon/CarouselCommon.tsx

@@ -0,0 +1,57 @@
+import { useKeenSlider } from 'keen-slider/react'
+import React from 'react'
+import 'keen-slider/keen-slider.min.css'
+import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow';
+import s from "./CaroucelCommon.module.scss"
+interface CarouselCommonProps {
+  children?: React.ReactNode
+  data?: any[]
+  Component: React.ComponentType
+  isArrow?:Boolean
+  key:String
+}
+
+const CarouselCommon = ({ data, Component,key }: CarouselCommonProps) => {
+  const [currentSlide, setCurrentSlide] = React.useState(0)
+  const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
+    slidesPerView: 1,
+    initial: 0,
+    slideChanged(s) {
+      setCurrentSlide(s.details().relativeSlide)
+    },
+  })
+  const handleRightArrowClick = () => {
+    slider.next()
+  }
+
+  const handleLeftArrowClick = () => {
+    slider.prev()
+  }
+  return (
+    <div className={s.navigation_wrapper}>
+      <div ref={sliderRef} className="keen-slider">
+        {data?.map((props,index) => (
+          <div className="keen-slider__slide" key={`${key}-${index}`}>
+            <Component {...props} />
+          </div>
+        ))}
+      </div>
+      {slider && (
+          <>
+            <CustomCarouselArrow
+              side="right"
+              onClick={handleRightArrowClick}
+              isDisabled={currentSlide === slider.details().size - 1}
+            />
+            <CustomCarouselArrow
+              side="left"
+              onClick={handleLeftArrowClick}
+              isDisabled={currentSlide === 0}
+            />
+          </>
+        )}
+    </div>
+  )
+}
+
+export default CarouselCommon

src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss

@@ -0,0 +1,17 @@
+.custom_arrow{
+    width: 64px;
+    height:  64px;
+    &:focus{
+        outline: none;
+    }
+    @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100;
+    &.left{
+        @apply left-0;
+    }
+    &.right{
+        @apply right-0;
+    }
+    &.isDisabled{
+        @apply hidden ;
+    }
+}

src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx

@@ -0,0 +1,24 @@
+import classNames from 'classnames'
+import React from 'react'
+import ArrowLeft from 'src/components/icons/ArrowLeft'
+import ArrowRight from 'src/components/icons/ArrowRight'
+import s from "./CustomCarouselArrow.module.scss"
+interface CustomCarouselArrowProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  side: 'left' | 'right'
+	isDisabled:Boolean
+}
+
+export const CustomCarouselArrow = ({
+  side,isDisabled,
+  ...props
+}: CustomCarouselArrowProps) => {
+  return (
+    <button
+      {...props}
+      className={classNames(`${s.custom_arrow}`, { [`${s[side]}`]: side,[`${s.isDisabled}`]:isDisabled })}
+    >
+			{side==='left'?(<ArrowLeft/>):(<ArrowRight/>)}
+		</button>
+  )
+}