✨ feat: ProductCollection HomeRecipe

:%s

src/components/common/CollectionHeading/CollectionHeading.module.scss

@@ -1,7 +1,6 @@
 @import '../../../styles/utilities';
 
 .subtitle {
-    @apply spacing-horizontal-left;
     font-size: var(--font-size);
     line-height: var(--line-height);   
 }

src/components/common/HeadingCommon/HeadingCommon.module.scss

@@ -1,7 +1,7 @@
 @import '../../../styles/utilities';
 
 .headingCommon {
-  @apply heading-1 font-heading uppercase text-left spacing-horizontal-left;
+  @apply heading-1 font-heading uppercase text-left;
 
   &.highlight {
     color: var(--negative);
@@ -13,7 +13,5 @@
     @apply text-center;
   }
 
-  @screen md {
-    @apply spacing-horizontal;
-  }
+ 
 }

src/components/common/RecipeCard/RecipeCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { RecipeProps } from 'src/utils/types.utils'
 import s from './RecipeCard.module.scss'
-interface RecipeCardProps extends RecipeProps {}
+export interface RecipeCardProps extends RecipeProps {}
 
 const RecipeCard = ({ imageSrc, title, description }: RecipeCardProps) => {
   return (

src/components/common/RecipeCaroucel/RecipeCaroucel.module.scss

@@ -0,0 +1,12 @@
+@import '../../../styles/utilities';
+.recipeCardWarpper {
+  @apply spacing-horizontal;
+  :global(.customArrow) {
+    &:global(.leftArrow) {
+      left: calc(-6.4rem - 2rem);
+    }
+    &:global(.rightArrow) {
+      right: calc(-6.4rem - 2rem);
+    }
+  }
+}

src/components/common/RecipeCaroucel/RecipeCaroucel.tsx

@@ -0,0 +1,40 @@
+import { TOptionsEvents } from 'keen-slider'
+import React from 'react'
+import CarouselCommon, {
+  CarouselCommonProps,
+} from '../CarouselCommon/CarouselCommon'
+import RecipeCard, { RecipeCardProps } from '../RecipeCard/RecipeCard'
+import s from "./RecipeCaroucel.module.scss"
+
+interface RecipeCaroucelProps
+  extends Omit<CarouselCommonProps<RecipeCardProps>, 'Component'|"option"> {
+		option?:TOptionsEvents
+	}
+
+const OPTION_DEFAULT: TOptionsEvents = {
+  slidesPerView: 1,
+  mode: 'free',
+  spacing:24,
+  breakpoints: {
+    '(min-width: 768px)': {
+      slidesPerView: 2,
+    },
+    '(min-width: 1024px)': {
+      slidesPerView: 3,
+    },
+  },
+}
+const RecipeCaroucel = ({ option, data, ...props }: RecipeCaroucelProps) => {
+  return (
+    <div className={s.recipeCardWarpper}>
+      <CarouselCommon<RecipeCardProps>
+        data={data}
+        Component={RecipeCard}
+        {...props}
+        option={{ ...OPTION_DEFAULT, ...option }}
+      />
+    </div>
+  )
+}
+
+export default RecipeCaroucel

src/components/common/index.ts

@@ -15,3 +15,4 @@ export { default as Inputcommon} from './InputCommon/InputCommon'
 export { default as InputSearch} from './InputSearch/InputSearch'
 export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy'
 export { default as HeadingCommon } from './HeadingCommon/HeadingCommon'
+export { default as CollectionHeading } from './CollectionHeading/CollectionHeading'