🎨 styles: recommended recipe

:%s

pages/demo.tsx

@@ -1,13 +1,15 @@
 import { Layout, RecipeDetail } from 'src/components/common';
-import { ProductInfoDetail, ViewedProducts } from 'src/components/modules/product-detail';
+import { ProductInfoDetail, ViewedProducts, ReleventProducts, RecommendedRecipes } from 'src/components/modules/product-detail';
-import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
+import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data';
 
 
 
 export default function Demo() {
     return <>
         <ProductInfoDetail />
-        <RecipeDetail ingredients={PRODUCT_DATA_TEST}/>
+        <RecipeDetail ingredients={INGREDIENT_DATA_TEST}/>
+        <RecommendedRecipes data={RECIPE_DATA_TEST}/>
+        <ReleventProducts/>
         <ViewedProducts/>
     </>
 }

src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss

@@ -1,7 +1,10 @@
 @import "../../../../../styles/utilities";
 
 .recipeIngredient {
-    margin: 5.6rem auto;
+    margin: 6rem auto;
+    @screen md {
+        margin: 5.6rem auto;
+    }
     .top {
         @apply flex justify-between items-center spacing-horizontal;
     }

src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss

@@ -0,0 +1,27 @@
+@import "../../../../styles/utilities";
+
+.recommendedRecipes {
+    margin: 6rem auto;
+    @screen md {
+        margin: 5.6rem auto;
+    }
+    .infoProducts {
+        @apply flex justify-between items-center spacing-horizontal;
+        margin-bottom: 3.2rem;
+    }
+    .productsWrap {
+        @apply spacing-horizontal-left;
+        @screen xl {
+            :global(.customArrow) {
+                @screen lg {
+                    &:global(.leftArrow) {
+                        left: calc(-6.4rem - 2rem);
+                    }
+                    &:global(.rightArrow) {
+                        right: calc(-6.4rem - 2rem);
+                    }
+                }
+            }
+        }
+    }
+}

src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx

@@ -0,0 +1,51 @@
+import { TOptionsEvents } from 'keen-slider';
+import React from 'react';
+import { CarouselCommon, HeadingCommon, RecipeCard, ViewAllItem } from 'src/components/common';
+import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard';
+import { ROUTE } from 'src/utils/constanst.utils';
+import s from './RecommendedRecipes.module.scss';
+
+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,
+        },
+    },
+}
+
+interface Props {
+    data: RecipeCardProps[],
+}
+
+const RecommendedRecipes = ({ data }: Props) => {
+    return (
+        <div className={s.recommendedRecipes}>
+            <div className={s.infoProducts}>
+                <HeadingCommon>Recommended Recipes</HeadingCommon>
+                <ViewAllItem link={ROUTE.RECIPES} />
+            </div>
+            <div className={s.productsWrap}>
+                <CarouselCommon<RecipeCardProps>
+                    data={data}
+                    Component={RecipeCard}
+                    itemKey="Recommended Recipes"
+                    option={OPTION_DEFAULT}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default RecommendedRecipes;

src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo';
+import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
+
+const ReleventProducts = () => {
+    return (
+        <ListProductWithInfo
+            title="Relevant Products"
+            subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+            data={PRODUCT_DATA_TEST}
+        />
+    );
+};
+
+export default ReleventProducts;

src/components/modules/product-detail/index.ts

@@ -1,2 +1,4 @@
 export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail'
 export { default as ViewedProducts } from './ViewedProducts/ViewedProducts'
+export { default as ReleventProducts } from './ReleventProducts/ReleventProducts'
+export { default as RecommendedRecipes } from './RecommendedRecipes/RecommendedRecipes'

src/utils/constanst.utils.ts

@@ -10,6 +10,7 @@ export const ROUTE = {
     PRODUCTS: '/products',
     ABOUT: '/about',
     ACCOUNT: '/account',
+    RECIPES: '/recipes',
 
     BUSSINESS: '/bussiness',
     CONTACT: '/contact',

src/utils/demo-data.ts

@@ -1,4 +1,65 @@
+import { RecipeCardProps } from "src/components/common/RecipeCard/RecipeCard"
+
 export const PRODUCT_DATA_TEST = [
+    {
+        name: 'Tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png",
+    },
+    {
+        name: 'Cucumber',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png",
+    },
+    {
+        name: 'Carrot',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646217-23b86160-45c9-4845-8dcc-b3e1a4483edd.png",
+    },
+    {
+        name: 'Salad',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646221-aaa1d48d-bb80-470f-9400-ae2aa47285b6.png",
+    },
+    {
+        name: 'Tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646224-d22dc2e4-6ae8-4bbe-adcf-491ce191f09b.png",
+    },
+    {
+        name: 'Cucumber',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646225-2728f192-481b-4142-99b0-dde92f53c6c6.png",
+    },
+    {
+        name: 'Tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646227-b5705e64-3b45-47a3-9433-9f4b5ee8d40c.png",
+    },
+    {
+        name: 'Cucumber',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646231-2d1c3ad1-4f5b-4a8e-9874-ca731f4ce128.png",
+    },
+]
+
+export const INGREDIENT_DATA_TEST = [
     {
         name: 'Tomato',
         weight: '250g',
@@ -57,4 +118,37 @@ export const PRODUCT_DATA_TEST = [
         price: 'Rp 27.500',
         imageSrc: "https://user-images.githubusercontent.com/76729908/131646231-2d1c3ad1-4f5b-4a8e-9874-ca731f4ce128.png",
     },
+]
+
+export const RECIPE_DATA_TEST: 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: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png'
+    },
+    {
+        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: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png'
+    },
+    {
+        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: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png'
+    },
+    {
+        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: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png'
+    },
+    {
+        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: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png'
+    },
+    {
+        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: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png'
+    },
 ]