feat: BlogDetailPage

pages/test.tsx

@@ -1,12 +1,12 @@
 import {
-  Layout
+  Layout, RecipeDetail
 } 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 { RecipeListPage } 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';
+import BlogDetailPage from 'src/components/modules/blogs/BlogDetailPage/BlogDetailPage';
 
 const CATEGORY = [
   {
@@ -60,50 +60,15 @@ const BRAND = [
       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 
+      <BlogDetailPage />
-        date={BLOGDETAIL.date}
+      
-        title={BLOGDETAIL.title}
+      {/* <RecipeListPage/> */}
-        imageAuthor={BLOGDETAIL.imageAuthor}
+
-        nameAuthor={BLOGDETAIL.nameAuthor}
-        content={BLOGDETAIL.content}
-      /> */}
-      <RecipesListPage/>
       {/* <MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>
       <MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={BRAND}/> */}
     </>

src/components/common/Author/Author.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 import s from './Author.module.scss';
 import classNames from 'classnames';
 
-import Image from "next/image";
 interface Props {
-    image:StaticImageData,
+    image:string,
     name: string
 }
 
@@ -12,7 +11,7 @@ const Author = ({image,name}:Props) =>{
 
     return (
         <div className={classNames(s.authorWarper)}>
-            <Image className={classNames(s.authorImage)}  src={image}  alt=""/>
+            <img className={classNames(s.authorImage)}  src={image}  alt=""/>
             <div className={classNames(s.authorName)}>{name}</div>
         </div>
     )

src/components/modules/blogs/BlogContent/BlogContent.module.scss

@@ -0,0 +1,32 @@
+@import "../../../../styles/_utilities";
+
+.blogContentWrapper{
+  
+    h1{
+        @apply heading-2;
+    }
+    .author{
+        padding: 2rem 0;
+    }
+    .content{
+        .heading2{
+            @apply heading-3 ;
+        }
+        img{
+            width: 100%;
+        }
+    }
+    .boxShare{
+        @apply flex font-bold;
+        margin: 4rem 0;
+        color: var(--text-active);
+        .listIcon{
+            ul{
+                @apply flex;
+                li{
+                    margin: 0px 1.6rem;
+                }
+            }
+        }
+    }
+}

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

@@ -1,21 +1,77 @@
 import React from 'react';
 import { Author, DateTime } from "src/components/common";
+import IconFacebook from 'src/components/icons/IconFacebook';
+import IconInstagram from 'src/components/icons/IconInstagram';
+import IconTwitter from 'src/components/icons/IconTwitter';
 import s from './BlogContent.module.scss';
+import Link from 'next/link';
 interface BlogContentProps {
     date: string,
     title: string,
-    imageAuthor:StaticImageData,
+    imageAuthor:string,
     nameAuthor:string,
-    content:string
 }
-const BlogContent = ({date,title,imageAuthor,nameAuthor,content}:BlogContentProps) => {
+const BlogContent = ({date,title,imageAuthor,nameAuthor}:BlogContentProps) => {
     return (
         <>
              <div className={s.blogContentWrapper}>
                 <DateTime date={date}/>
-                <h1 >{title}</h1>
+                <h1 className={s.title}>{title}</h1>
-                <Author image={imageAuthor} name={nameAuthor} />
+                <div className={s.author}>
-                <p>{content}</p>
+                    <Author image={imageAuthor} name={nameAuthor} />
+                </div>
+                <section className={s.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.
+                    <br/>
+                    <br/>
+
+                    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.
+                    <br/>
+                    <br/>
+                    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>
+
+                    <br/>
+                    <br/>
+
+                    <h2 className={s.heading2}>What is broccoli salad</h2>
+                    <br/>
+                    <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.
+                    <br/>
+                    <br/>
+
+                    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.
+                    <br/>
+                    <br/>
+                    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>
+
+                    <br/>
+                    <br/>
+
+                    <h2 className={s.heading2}>What about broccoli stems?</h2>
+                    <br/>
+                    <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>
+                    <br/>
+                    <img  src="https://user-images.githubusercontent.com/76729908/131634880-8ae1437b-d3f8-421e-a546-d5a4f9a28e5f.png" alt="blog-detail" />
+                  
+                </section>
+                  
+               <div className={s.boxShare}>
+                   <div className={s.share}>
+                     Share to:
+                   </div>
+                    <div className={s.listIcon}>
+                        <ul>
+                            <li><Link href="/"><a> <IconFacebook/></a></Link></li>
+                            <li><Link href="/"><a> <IconTwitter/></a></Link></li>
+                            <li><Link href="/"><a> <IconInstagram/></a></Link></li>
+                        </ul>
+                    </div>
+                </div> 
              </div>
           
         </>

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

@@ -1,18 +0,0 @@
-import Image from "next/image";
-import React from 'react';
-
-interface Props{
-    image:StaticImageData,
-}
-
-
-
-const BlogDetailImg = ({image}:Props) => {
-    return (
-        <>
-             <Image src={image} />
-        </>
-    )
-}
-
-export default BlogDetailImg

src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx

@@ -0,0 +1,19 @@
+
+import React from 'react';
+
+interface Props{
+    image:string,
+    alt?:string
+}
+
+
+
+const BlogDetailImg = ({image,alt}:Props) => {
+    return (
+        <>
+             <img src={image} alt={alt} />
+        </>
+    )
+}
+
+export default BlogDetailImg

src/components/modules/blogs/BlogDetailPage/BlogDetailPage.module.scss

@@ -0,0 +1,13 @@
+@import "../../../../styles/_utilities";
+.beadcrumb{
+    padding: 0 0 3.2rem  3.2rem;
+}
+.blogDetailPageWrapper{
+    @screen md {
+        width: 60%;
+        margin: 0 auto;
+    }
+    .avt{
+        margin-bottom: 4rem;
+    }
+}

src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import  avt  from '../BlogDetailImg/img/blogdetail.png';
+import imageAuthor from '../../../common/Author/img/author.png';
+
+import s from './BlogDetailPage.module.scss';
+import BlogContent from '../BlogContent/BlogContent';
+import { BlogDetailImg } from '..';
+import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon';
+
+
+const BLOGDETAIL=
+  {
+    date:'APRIL 30, 2021',
+    title:'The Best Sesame Soy Broccoli Salad',
+    imageAuthor:imageAuthor.src,
+    nameAuthor:'Alessandro Del Piero',
+  };
+
+const CRUMBS =[
+    {
+        name:"HOME",
+        link:"/"
+    },
+    {
+        name:"BLOG",
+        link:"/blog"
+    }
+]
+
+const BlogDetailPage = () => {
+    return (
+        <>
+        <div className={s.beadcrumb}>
+            <BreadcrumbCommon crumbs={CRUMBS}/>
+        </div>
+        <div className={s.blogDetailPageWrapper}>
+            <figure className={s.avt}>
+                <BlogDetailImg 
+                    image={avt.src}
+                    alt="ảnh đại diện"
+                />   
+            </figure>
+            
+            <BlogContent  
+                date={BLOGDETAIL.date}
+                title={BLOGDETAIL.title}
+                imageAuthor={BLOGDETAIL.imageAuthor}
+                nameAuthor={BLOGDETAIL.nameAuthor}/>
+        </div>
+        
+            
+        </>
+    )
+}
+
+export default BlogDetailPage

src/components/modules/blogs/index.ts

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

src/components/modules/recipes/RecipeListPage/RecipeListPage.tsx

@@ -12,7 +12,7 @@ import blog3 from './img/blog3.png';
 import blog4 from './img/blog4.png';
 import blog5 from './img/blog5.png';
 import blog6 from './img/blog6.png';
-import s from './RecipesListPage.module.scss';
+import s from './RecipeListPage.module.scss';
 const BREADCRUMB = [
     {
         name: 'Home',

src/components/modules/recipes/index.ts

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