create component RecipeList and RecipesList

src/components/common/Author/Author.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import Image from "next/image";
 interface Props {
-    image:any,
+    image:StaticImageData,
     name: string
 }
 

src/components/modules/blogs/BlogContent/BlogContent.tsx

@@ -1,14 +1,23 @@
 import React from 'react';
-import { DateTime } from "src/components/common";
-
-interface Props{
-    image:StaticImageData,
+import { Author, DateTime } from "src/components/common";
+import s from './BlogContent.module.scss';
+interface BlogContentProps {
+    date: string,
+    title: string,
+    imageAuthor:StaticImageData,
+    nameAuthor:string,
+    content:string
 }
-
-const BlogContent = ({}:Props) => {
+const BlogContent = ({date,title,imageAuthor,nameAuthor,content}:BlogContentProps) => {
     return (
         <>
-            <DateTime date="APRIL 30, 2021"/>
+             <div className={s.blogContentWrapper}>
+                <DateTime date={date}/>
+                <h1 >{title}</h1>
+                <Author image={imageAuthor} name={nameAuthor} />
+                <p>{content}</p>
+             </div>
+          
         </>
     )
 }

src/components/modules/blogs/index.ts

@@ -1 +1 @@
-export { default as BlogDetailImg } from './BlogDetailImg/BlogDetailImg'
+export { default as BlogDetailImg } from './BlogContent/BlogDetailImg/BlogDetailImg'

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

@@ -1,9 +1,8 @@
-import React from 'react';
-
-import s from './RecipesItem.module.scss'
-import classNames from 'classnames';
 import Image from "next/image";
 import Link from 'next/link';
+import React from 'react';
+import s from './RecipesItem.module.scss';
+
 
 interface RecipesItem {
     image:StaticImageData,
@@ -14,8 +13,8 @@ interface RecipesItem {
 
 const RecipesItem = ({ image, name,description, link }: RecipesItem) => {
     return (
-        <div className={classNames(s.recipesItem)}>
-            <div className={classNames(s.recipesItemImage)}>
+        <div className={s.recipesItem}>
+            <div className={s.recipesItemImage}>
                 <Link href={link}>
                     <a>
                         <Image src={image} />
@@ -23,9 +22,9 @@ const RecipesItem = ({ image, name,description, link }: RecipesItem) => {
                 </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 className={s.recipesItemText}>
+                    <div className={s.recipesItemName}>{name}</div>
+                    <div className={s.recipesItemDescription}>{description}</div>
                 </a>
             </Link>
         </div >

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

@@ -1,9 +1,8 @@
-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/PaginationCommon/PaginationCommon';
+import RecipesItem from './RecipesItem/RecipesItem';
+import s from './RecipesList.module.scss';
+
 
 interface Props{
     recipes:{
@@ -20,15 +19,15 @@ interface Props{
 const RecipesList = ({recipes}:Props) => {
     return (
         <>
-        <div className={classNames(s.recipesListWrapper)}>
-            <div  className={classNames(s.recipesHead)}>
+        <div className={s.recipesListWrapper}>
+            <div  className={s.recipesHead}>
                 
             </div>
 
-            <div className={classNames(s.recipesListBlogs)}>
-                <div className={classNames(s.recipesList)}>
+            <div className={s.recipesListBlogs}>
+                <div className={s.recipesList}>
                     {recipes?.map(item => (
-                        <div key={item.id} className={classNames(s.recipesItem)}>
+                        <div key={item.id} className={s.recipesItem}>
                           <RecipesItem
                                 name={item.title}
                                 image={item.image}
@@ -39,7 +38,7 @@ const RecipesList = ({recipes}:Props) => {
                     ))}
                 </div>
             </div>
-            <div  className={classNames(s.recipesPagination)}>
+            <div  className={s.recipesPagination}>
                 <PaginationCommon pageSize={6} total={9}/>
             </div>
         </div>

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

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import React from 'react';
 import { Banner, SelectCommon } from 'src/components/common';
 import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon';
@@ -21,7 +20,7 @@ const BREADCRUMB = [
     },
     {
         name: 'Special Recipes',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
+        link: `#`,
     },
 ];
 
@@ -132,33 +131,33 @@ const BANNER =[
 
 const RecipesListPage = () => {
     return (
-       <div className={classNames(s.recipesListPageWrapper)}>
+       <div className={s.recipesListPageWrapper}>
            
             <Banner data={BANNER}/>
             
-            <div className={classNames(s.recipesListPageBreadcrumbDesktop)}>
+            <div className={s.recipesListPageBreadcrumbDesktop}>
                 <BreadcrumbCommon crumbs={BREADCRUMB} />
             </div>
 
-            <div className={classNames(s.recipesListPageHeadMobile)}>
-                <div className={classNames(s.heading)}>
+            <div className={s.recipesListPageHeadMobile}>
+                <div className={s.heading}>
                     <HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
                     <BreadcrumbCommon crumbs={BREADCRUMB} />
                 </div>
             </div>
 
-            <div className={classNames(s.recipesListPageMain)}>
+            <div className={s.recipesListPageMain}>
 
-                <div className={classNames(s.categoriesDesktop)}>
+                <div className={s.categoriesDesktop}>
                     <MenuNavigation categories={CATEGORY} heading="Categories"/>
                 </div>
 
-                <div className={classNames(s.recipesList)}>
-                    <div className={classNames(s.sortByDesktop)}>
+                <div className={s.recipesList}>
+                    <div className={s.sortByDesktop}>
                         <HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
                         <SelectCommon option={OPTIONSLECT} />
                     </div>
-                    <div className={classNames(s.selectMobile)}>
+                    <div className={s.selectMobile}>
                         <div>
                             <label htmlFor="">Categories</label>
                             <SelectCommon option={CATEGORY}/>