✨ feat: ProductCollection HomeRecipe

:%s

pages/index.tsx

@@ -4,12 +4,15 @@ import image5 from "../public/assets/images/image5.png"
 import image6 from "../public/assets/images/image6.png"
 import image7 from "../public/assets/images/image7.png"
 import image8 from "../public/assets/images/image8.png"
-import image9 from "../public/assets/images/image9.png"
+// import image9 from "../public/assets/images/image9.png"
-import image10 from "../public/assets/images/image10.png"
+// import image10 from "../public/assets/images/image10.png"
-import image11 from "../public/assets/images/image11.png"
+// import image11 from "../public/assets/images/image11.png"
 import image12 from "../public/assets/images/image12.png"
+import { CollectionCarcoucel } from 'src/components/modules/home'
+import HomeRecipe from 'src/components/modules/home/HomeRecipe/HomeRecipe'
 import image13 from "../public/assets/images/image13.png"
 import image14 from "../public/assets/images/image14.png"
+import { RecipeCardProps } from '../src/components/common/RecipeCard/RecipeCard';
 const dataTest = [{
   name:"Tomato",
   weight:"250g",
@@ -83,14 +86,38 @@ const dataTest = [{
   price:"Rp 27.500",
   imageSrc:image6.src
 }]
+
+const recipe:RecipeCardProps[] = [{
+  title: "Special Recipe of Vietnamese Phở",
+  description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients.  To make this pho soup recipe, you will need:",
+  imageSrc: image12.src
+},{
+  title: "Original Recipe of Curry",
+  description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
+  imageSrc: image13.src
+},{
+  title: "The Best Recipe of Beef Noodle Soup",
+  description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
+  imageSrc: image14.src
+},{
+  title: "Special Recipe of Vietnamese Phở",
+  description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients.  To make this pho soup recipe, you will need:",
+  imageSrc: image12.src
+},{
+  title: "Original Recipe of Curry",
+  description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
+  imageSrc: image13.src
+},{
+  title: "The Best Recipe of Beef Noodle Soup",
+  description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
+  imageSrc: image14.src
+}]
+
 export default function Home() {
   return (
     <>
-      <ProductCaroucel data={dataTest} itemKey="product-1" isDot={true}/>
+      <CollectionCarcoucel data={dataTest} itemKey="product-1" title="VEGGIE" subTitle= "Last call! Shop deep deals on 100+ bulk picks while you can." />
-      <div>
+      <HomeRecipe data={recipe}  itemKey="product-2" title="Special Recipes"/>
-        <FeaturedProductCard title="Sale 25% Coffee Bean" subTitle="50 first Orders within a day" price="$15.00" originPrice="$20.00" imageSrc={image9.src} />
-        <RecipeCard title="Sale 25% Coffee Bean" imageSrc={image12.src} description="Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients.  To make this pho soup recipe, you will need:" />
-      </div>
     </>
   )
 }

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'

src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.module.scss

@@ -0,0 +1,12 @@
+@import '../../../../styles/utilities';
+.colectionCarcoucelWarpper {
+	padding-top: 5.6rem; 
+	padding-bottom: 6.5rem; 
+  @apply flex flex-col ;
+  .top {
+    @apply  spacing-horizontal flex w-full justify-between;
+		.right{
+			margin-right: 14.76;
+		}
+  }
+}

src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { CollectionHeading, ProductCaroucel, ViewAllItem } from 'src/components/common'
+import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'
+import s from './CollectionCarcoucel.module.scss'
+interface ColectionCarcoucelProps {
+  data: ProductCardProps[]
+  itemKey: string
+  title: string
+  subTitle: string
+  viewAllLink?: string
+}
+
+const ColectionCarcoucel = ({
+  data,
+  itemKey,
+  title,
+  subTitle,
+}: ColectionCarcoucelProps) => {
+  return (
+    <div className={s.colectionCarcoucelWarpper}>
+      <div className={s.top}>
+        <div className={s.left}>
+          <CollectionHeading headingText={title} subtitle={subTitle} />
+        </div>
+        <div className={s.right}>
+          <ViewAllItem/>
+        </div>
+      </div>
+      <div className={s.bot}>
+        <ProductCaroucel data={data} itemKey={itemKey} />
+      </div>
+    </div>
+  )
+}
+
+export default ColectionCarcoucel

src/components/modules/home/HomeRecipe/HomeRecipe.module.scss

@@ -0,0 +1,33 @@
+@import '../../../../styles/utilities';
+
+.homeRecipeWarpper {
+  padding-top: 5.6rem;
+  padding-bottom: 6.5rem;
+  @apply flex flex-col;
+  .top {
+    @apply spacing-horizontal flex w-full justify-between;
+    .right {
+      margin-right: 14.76;
+    }
+  }
+  .mid{
+			padding-top: 3.2rem; 
+			padding-bottom: 3.2rem; 
+      @apply flex justify-start spacing-horizontal;
+      .tab{
+          padding: 1.6rem 1.6rem 0.8rem 1.6rem;
+          font-size: 3.2rem;
+          line-height: 4rem;
+					outline: none;
+          &.active{
+            @apply text-background custom-border-radius bg-primary;
+          }
+					
+      }
+  }
+  // :global(.keen-slider__slide){
+	// 	@screen 2xl{
+	// 		margin-right: 2rem;
+	// 	}
+  // }
+}

src/components/modules/home/HomeRecipe/HomeRecipe.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import {  HeadingCommon, ViewAllItem } from 'src/components/common'
+import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard'
+import RecipeCaroucel from 'src/components/common/RecipeCaroucel/RecipeCaroucel'
+import s from './HomeRecipe.module.scss'
+import classNames from 'classnames';
+interface HomeRecipeProps {
+  data: RecipeCardProps[]
+  itemKey: string
+  title: string
+  viewAllLink?: string
+}
+
+const HomeRecipe = ({ data, itemKey, title }: HomeRecipeProps) => {
+  return (
+    <div className={s.homeRecipeWarpper}>
+      <div className={s.top}>
+        <div className={s.left}>
+          <HeadingCommon headingText={title} />
+        </div>
+        <div className={s.right}>
+          <ViewAllItem />
+        </div>
+      </div>
+			<div className={s.mid}>
+        <button className={classNames(s.tab,s.active)}>Noodle</button>
+        <button className={s.tab}>Curry</button>
+        <button className={s.tab}>Special Recipes</button>
+      </div>
+      <div className={s.bot}>
+        <RecipeCaroucel data={data} itemKey={itemKey} />
+      </div>
+    </div>
+  )
+}
+
+export default HomeRecipe

src/components/modules/home/index.ts

@@ -1 +1,2 @@
 export { default as HomeBanner } from './HomeBanner/HomeBanner'
+export { default as CollectionCarcoucel } from './CollectionCarcoucel/CollectionCarcoucel'