feat: create modules RecipesList and RecipesListPage

src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.module.scss

@@ -0,0 +1,64 @@
+@import "../../../../../styles/_utilities";
+
+.recipesItem {
+    @apply flex justify-between;
+    margin: 1.5rem 0;
+
+    @screen md{
+        @apply block;
+    }
+
+    .recipesItemImage {
+        @apply transition-all duration-200;
+        width: 31%;
+        img {
+            @apply block object-cover;
+            width: 100%;
+            min-height: 12.5rem;
+            border-radius: 1.5rem;
+        }
+
+        @screen md {
+            @apply object-cover cursor-pointer;
+            width: 100%;
+            margin: 0 auto;
+            img{
+                height:100%;
+                border-radius: 2.4rem;
+            }
+        }
+    }
+    .recipesItemText {
+        width: 65%;
+        .recipesItemName{
+            @apply topline;
+
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+             overflow: hidden;
+            -webkit-box-orient: vertical;
+
+            font-feature-settings: "salt" on;
+            cursor: pointer;
+            font-weight:bold;
+            color:var(--text-active);
+            margin-bottom: 1rem;
+
+            &:hover {
+                color: var(--primary);
+            }
+        }
+        @screen md {
+            width: 100%;
+        }
+    }
+
+    .recipesItemDescription{
+        color:var(--text-label);
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+         overflow: hidden;
+        -webkit-box-orient: vertical;
+    }
+ 
+}

src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import s from './RecipesItem.module.scss'
+import classNames from 'classnames';
+import Image from "next/image";
+import Link from 'next/link';
+
+interface RecipesItem {
+    image:StaticImageData,
+    name: string,
+    description:string,
+    link: string
+}
+
+const RecipesItem = ({ image, name,description, link }: RecipesItem) => {
+    return (
+        <div className={classNames(s.recipesItem)}>
+            <div className={classNames(s.recipesItemImage)}>
+                <Link href={link}>
+                    <a>
+                        <Image src={image} />
+                    </a>
+                </Link>
+            </div>
+            <Link href={link}>
+                <a className={classNames(s.recipesItemText)}>
+                    <div className={classNames(s.recipesItemName)}>{name}</div>
+                    <div className={classNames(s.recipesItemDescription)}>{description}</div>
+                </a>
+            </Link>
+        </div >
+    )
+}
+
+export default RecipesItem

src/components/modules/recipes/RecipesList/RecipesList.module.scss

@@ -0,0 +1,43 @@
+@import "../../../../styles/_utilities";
+
+.recipesListWrapper {
+    @screen md{
+        padding-bottom:5.6rem;
+    }
+    .recipesHead{
+        @apply flex justify-end;
+        @screen md{
+            @apply  justify-between;
+        }
+    }
+    .recipesListBlogs{
+        @screen md {
+            @apply flex flex-col items-center justify-center;
+        }
+        .recipesList {
+            @screen md {
+                @apply flex justify-between flex-wrap;
+                margin: 1rem 0;
+            }
+            .recipesItem {
+                @screen md {
+                    width: calc(97% / 2);
+                    margin-top:4rem;
+                }
+                @screen lg{
+                    width: calc(97% / 3);
+                    margin-top:4rem;
+                }
+            }
+        }
+    }
+    .recipesPagination{
+        @apply flex justify-center;
+        margin: 3rem 0;
+        @screen md {
+            @apply flex justify-center;
+            margin:2rem 0;
+        }
+    }
+   
+}

src/components/modules/recipes/RecipesList/RecipesList.tsx

@@ -0,0 +1,51 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import s from './RecipesList.module.scss';
+import RecipesItem from './RecipesItem/RecipesItem';
+
+import { PaginationCommon } from 'src/components/common';
+
+interface Props{
+    recipes:{
+        id:string,
+        title:string,
+        image:StaticImageData,
+        description:string,
+        link:string
+    }[],
+}
+
+
+
+const RecipesList = ({recipes}:Props) => {
+    return (
+        <>
+        <div className={classNames(s.recipesListWrapper)}>
+            <div  className={classNames(s.recipesHead)}>
+                
+            </div>
+
+            <div className={classNames(s.recipesListBlogs)}>
+                <div className={classNames(s.recipesList)}>
+                    {recipes?.map(item => (
+                        <div key={item.id} className={classNames(s.recipesItem)}>
+                          <RecipesItem
+                                name={item.title}
+                                image={item.image}
+                                description={item.description}
+                                link={item.link}
+                            />
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <div  className={classNames(s.recipesPagination)}>
+                <PaginationCommon pageSize={6} total={9}/>
+            </div>
+        </div>
+        </>
+    )
+}
+
+export default RecipesList

src/components/modules/recipes/RecipesListPage/RecipesListPage.module.scss

@@ -0,0 +1,79 @@
+@import "../../../../styles/_utilities";
+.recipesListPageWrapper{
+    @apply spacing-horizontal;
+
+    @screen md {
+        padding:0 3.2rem;
+    }
+
+    .recipesListPageBreadcrumbDesktop{
+        @apply hidden;
+        @screen md {
+            @apply block;
+        }
+    }
+    .recipesListPageHeadMobile{
+        margin-top: 2rem;
+        h2{
+            margin-bottom: 0.7rem;
+        }
+        @screen md {
+            @apply hidden;
+            padding: 3rem 0;
+        }
+    }
+    .recipesListPageMain{
+        @screen md {
+            @apply flex;
+        }
+        .categoriesDesktop{
+            @apply hidden;
+            @screen md {
+                @apply block;
+                width:25%;
+            }
+        }
+        .sortByMobile{
+            @apply flex justify-end;
+        }
+        .categoriesMobile{
+            ul{
+                @apply flex-nowrap ;
+                overflow: auto;
+            }
+        }
+        .recipesList{
+            @screen md {
+                width:75%;
+            }
+            .sortByDesktop{
+                @apply hidden;
+                @screen md {
+                    @apply flex justify-between;
+                    margin-top:1.5rem;
+                    h2{
+                        @apply heading-3;
+                    }
+                }
+                @screen xl{
+                    @apply flex justify-between;
+                     h2{
+                        @apply heading-2;
+                    }
+                }
+            }
+            .selectMobile{
+                @apply flex justify-between;
+                margin: 2rem 0;
+                label{
+                    @apply topline;
+                    font-weight: bold;
+                }
+                @screen md {
+                    @apply hidden;
+                }
+            }
+        }
+    }
+   
+}

src/components/modules/recipes/RecipesListPage/RecipesListPage.tsx

@@ -0,0 +1,175 @@
+import classNames from 'classnames';
+import React from 'react';
+import s from './RecipesListPage.module.scss';
+import RecipesList from '../RecipesList/RecipesList';
+import { Banner, MenuFilter } from 'src/components/common';
+import {MenuNavigation} from 'src/components/common';
+import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon';
+import HeadingCommon from "../../../common/HeadingCommon/HeadingCommon";
+import { SelectCommon } from 'src/components/common';
+import {RECIPE_DATA_TEST} from '../../../../utils/demo-data';
+
+import blog1 from './img/blog1.png';
+import blog2 from './img/blog2.png';
+import blog3 from './img/blog3.png';
+import blog4 from './img/blog4.png';
+import blog5 from './img/blog5.png';
+import blog6 from './img/blog6.png';
+
+const BREADCRUMB = [
+    {
+        name: 'Home',
+        link: "/",
+    },
+    {
+        name: 'Special Recipes',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
+    },
+];
+
+const CATEGORY = [
+      {
+          name: 'All',
+          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=${OPTION_ALL}`,
+      },
+      {
+          name: 'Malaysian',
+          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
+      },
+      {
+          name: 'Vietnamese',
+          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=vietnamese`,
+      },
+      {
+          name: 'Thailand',
+          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=thailand`,
+      },
+      {
+          name: 'Indian',
+          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=indian`,
+      },
+      {
+          name: 'Lao',
+          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=lao`,
+      },
+      {
+        name: 'Chinese',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=chinese`,
+      },
+      {
+        name: 'Korean',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=korean`,
+      },
+      {
+        name: 'Japanese',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=japanese`,
+      }, 
+      {
+        name: 'Western',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=western`,
+      },
+    ];
+
+const RECIPES = [
+    {
+        id: '1',
+        image: blog1,
+        title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
+        description: 'The DEBM diet stands for "Delicious Happy Fun Diet". This diet was popularized by Robert...',
+        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=veggie`
+    }, {
+        id: '2',
+        image: blog2,
+        title: "9 Ways to Make an Aloe Vera Mask at Home",
+        description: 'Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...',
+        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=seafood`
+    }
+    , {
+        id: '3',
+        image: blog3,
+        title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
+        description: 'Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...',
+        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=coffee-bean`
+    }
+    , {
+        id: '4',
+        image: blog4,
+        title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
+        description: 'The DEBM diet stands for "Delicious Happy Fun Diet". This diet was popularized by Robert...',
+        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=sauce`,
+    }, {
+        id: '5',
+        image: blog5,
+        title: "9 Ways to Make an Aloe Vera Mask at Home",
+        description: 'Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...',
+        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=sauce`,
+    }
+    , {
+        id: '6',
+        image: blog6,
+        title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
+        description: 'Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...',
+        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=sauce`,
+    }
+];
+
+const OPTIONSLECT=[
+    {
+        name:"SORT BY 1"
+    },
+    {
+        name:"SORT BY 2"
+    },
+    {
+        name:"SORT BY 3"
+    },
+]
+
+const RecipesListPage = () => {
+    return (
+       <div className={classNames(s.recipesListPageWrapper)}>
+           
+            <Banner title={'SPECIAL RECIPE OF THE WEEK'} subtitle={'Last call! Shop deep deals on 100+ bulk picks while you can.'} imgLink={'assets/bannerrecipes.png'} size="large"/>
+            
+            <div className={classNames(s.recipesListPageBreadcrumbDesktop)}>
+                <BreadcrumbCommon crumbs={BREADCRUMB} />
+            </div>
+
+            <div className={classNames(s.recipesListPageHeadMobile)}>
+                <div className={classNames(s.heading)}>
+                    <HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
+                    <BreadcrumbCommon crumbs={BREADCRUMB} />
+                </div>
+            </div>
+
+            <div className={classNames(s.recipesListPageMain)}>
+
+                <div className={classNames(s.categoriesDesktop)}>
+                    <MenuNavigation categories={CATEGORY} heading="Categories"/>
+                </div>
+
+                <div className={classNames(s.recipesList)}>
+                    <div className={classNames(s.sortByDesktop)}>
+                        <HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
+                        <SelectCommon option={OPTIONSLECT} placeHolder="SORT BY"/>
+                    </div>
+                    <div className={classNames(s.selectMobile)}>
+                        <div>
+                            <label htmlFor="">Categories</label>
+                            <SelectCommon option={CATEGORY} placeHolder="Categories"/>
+                        </div>
+                        <div>
+                            <label htmlFor="">Sort By</label>
+                            <SelectCommon option={OPTIONSLECT} placeHolder="Sort by"/>
+                        </div>
+                    </div>
+                    <RecipesList recipes={RECIPES}/>
+                </div>
+
+            </div>
+       </div>
+    )
+}
+
+export default RecipesListPage

src/components/modules/recipes/index.ts

@@ -0,0 +1 @@
+export { default as RecipesListPage } from './RecipesListPage/RecipesListPage'