create component RecipeList and RecipesList

pages/test.tsx

@@ -3,8 +3,10 @@ import {
 } from 'src/components/common';
 import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation';
 import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList';
+import BlogContent from 'src/components/modules/blogs/BlogContent/BlogContent';
 import { RecipesListPage } from 'src/components/modules/recipes';
 import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
+import imageAuthor from '../src/components/common/Author/img/author.png';
 
 const CATEGORY = [
   {
@@ -57,14 +59,53 @@ const BRAND = [
       name: 'Sauce',
       link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
   },
-]
+];
+const BLOGDETAIL=
+  {
+    date:'APRIL 30, 2021',
+    title:'The Best Sesame Soy Broccoli Salad',
+    imageAuthor:imageAuthor,
+    nameAuthor:'Alessandro Del Piero',
+    content:`
+    <p> When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
+
+    Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
+
+    This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.
+    </p>
+
+    <h2>What is broccoli salad</h2>
+
+    <p>
+    When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
+
+    Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
+
+    This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.
+    </p>
+    
+    <h2>What about broccoli stems?</h2>
+
+    <p>
+    You can eat broccoli stems. In fact, they are delicious. Just use a peeler to peel off the outsides and then trim the stalks into small 1/4”-1/2” cubes.
+    </p>
+    `
+  };
+
 export default function Test() {
 
   return (
     <>
+      {/* <BlogContent 
+        date={BLOGDETAIL.date}
+        title={BLOGDETAIL.title}
+        imageAuthor={BLOGDETAIL.imageAuthor}
+        nameAuthor={BLOGDETAIL.nameAuthor}
+        content={BLOGDETAIL.content}
+      /> */}
       <RecipesListPage/>
-      <MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>
+      {/* <MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>
-      <MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={BRAND}/>
+      <MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={BRAND}/> */}
     </>
   )
 }

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";
+import { Author, DateTime } from "src/components/common";
-
+import s from './BlogContent.module.scss';
-interface Props{
+interface BlogContentProps {
-    image:StaticImageData,
+    date: string,
+    title: string,
+    imageAuthor:StaticImageData,
+    nameAuthor:string,
+    content:string
 }
-
+const BlogContent = ({date,title,imageAuthor,nameAuthor,content}:BlogContentProps) => {
-const BlogContent = ({}:Props) => {
     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={s.recipesItem}>
-            <div className={classNames(s.recipesItemImage)}>
+            <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)}>
+                <a className={s.recipesItemText}>
-                    <div className={classNames(s.recipesItemName)}>{name}</div>
+                    <div className={s.recipesItemName}>{name}</div>
-                    <div className={classNames(s.recipesItemDescription)}>{description}</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={s.recipesListWrapper}>
-            <div  className={classNames(s.recipesHead)}>
+            <div  className={s.recipesHead}>
                 
             </div>
 
-            <div className={classNames(s.recipesListBlogs)}>
+            <div className={s.recipesListBlogs}>
-                <div className={classNames(s.recipesList)}>
+                <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={s.recipesListPageHeadMobile}>
-                <div className={classNames(s.heading)}>
+                <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={s.recipesList}>
-                    <div className={classNames(s.sortByDesktop)}>
+                    <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}/>

src/utils/demo-data.ts

@@ -1,47 +1,3 @@
-<<<<<<< HEAD
-export const RECIPE_DATA_TEST= [
-    {   
-        id: '1',
-        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:",
-        image: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png',
-        link:'#'
-    },
-    {
-        id: '2',
-        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...",
-        image: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png',
-        link:'#'
-    },
-    {
-        id: '3',
-        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,...",
-        image: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png',
-        link:'#'
-    },
-    {
-        id: '4',
-        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:",
-        image: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png',
-        link:'#'
-    },
-    {
-        id: '5',
-        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...",
-        image: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png',
-        link:'#'
-    },
-    {
-        id: '6',
-        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,...",
-        image: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png',
-        link:'#'
-=======
 import { RecipeCardProps } from "src/components/common/RecipeCard/RecipeCard"
 
 export const PRODUCT_DATA_TEST = [
@@ -255,6 +211,5 @@ export const RECIPE_DATA_TEST: RecipeCardProps[] = [
         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'
->>>>>>> a9f9f06eb9dee2a1ddefe907ff804237a78c5210
     },
 ]