From 3b37061fb220f85f463741b7a5630aac52a44f80 Mon Sep 17 00:00:00 2001 From: quangnhankie Date: Wed, 8 Sep 2021 10:27:09 +0700 Subject: [PATCH] feat: BlogDetailPage --- pages/test.tsx | 49 ++----------- src/components/common/Author/Author.tsx | 5 +- .../blogs/BlogContent/BlogContent.module.scss | 32 +++++++++ .../modules/blogs/BlogContent/BlogContent.tsx | 68 ++++++++++++++++-- .../BlogDetailImg/BlogDetailImg.tsx | 18 ----- .../blogs/BlogDetailImg/BlogDetailImg.tsx | 19 +++++ .../BlogDetailImg/img/blogdetail.png | Bin .../BlogDetailPage/BlogDetailPage.module.scss | 13 ++++ .../blogs/BlogDetailPage/BlogDetailPage.tsx | 57 +++++++++++++++ src/components/modules/blogs/index.ts | 2 +- .../RecipeListPage.module.scss} | 0 .../RecipeListPage.tsx} | 2 +- .../img/blog1.png | Bin .../img/blog2.png | Bin .../img/blog3.png | Bin .../img/blog4.png | Bin .../img/blog5.png | Bin .../img/blog6.png | Bin src/components/modules/recipes/index.ts | 2 +- 19 files changed, 195 insertions(+), 72 deletions(-) delete mode 100644 src/components/modules/blogs/BlogContent/BlogDetailImg/BlogDetailImg.tsx create mode 100644 src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx rename src/components/modules/blogs/{BlogContent => }/BlogDetailImg/img/blogdetail.png (100%) create mode 100644 src/components/modules/blogs/BlogDetailPage/BlogDetailPage.module.scss create mode 100644 src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx rename src/components/modules/recipes/{RecipesListPage/RecipesListPage.module.scss => RecipeListPage/RecipeListPage.module.scss} (100%) rename src/components/modules/recipes/{RecipesListPage/RecipesListPage.tsx => RecipeListPage/RecipeListPage.tsx} (99%) rename src/components/modules/recipes/{RecipesListPage => RecipeListPage}/img/blog1.png (100%) rename src/components/modules/recipes/{RecipesListPage => RecipeListPage}/img/blog2.png (100%) rename src/components/modules/recipes/{RecipesListPage => RecipeListPage}/img/blog3.png (100%) rename src/components/modules/recipes/{RecipesListPage => RecipeListPage}/img/blog4.png (100%) rename src/components/modules/recipes/{RecipesListPage => RecipeListPage}/img/blog5.png (100%) rename src/components/modules/recipes/{RecipesListPage => RecipeListPage}/img/blog6.png (100%) diff --git a/pages/test.tsx b/pages/test.tsx index e722b4e5e..9be7bc13b 100644 --- a/pages/test.tsx +++ b/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:` -

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. -

- -

What is broccoli salad

- -

- 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. -

- -

What about broccoli stems?

- -

- 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. -

- ` - }; export default function Test() { return ( <> - {/* */} - + + + {/* */} + {/* */} diff --git a/src/components/common/Author/Author.tsx b/src/components/common/Author/Author.tsx index 6665d693c..1cf8e52af 100644 --- a/src/components/common/Author/Author.tsx +++ b/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 (
- +
{name}
) diff --git a/src/components/modules/blogs/BlogContent/BlogContent.module.scss b/src/components/modules/blogs/BlogContent/BlogContent.module.scss index e69de29bb..03871c742 100644 --- a/src/components/modules/blogs/BlogContent/BlogContent.module.scss +++ b/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; + } + } + } + } +} \ No newline at end of file diff --git a/src/components/modules/blogs/BlogContent/BlogContent.tsx b/src/components/modules/blogs/BlogContent/BlogContent.tsx index 680135b2b..79cc6e580 100644 --- a/src/components/modules/blogs/BlogContent/BlogContent.tsx +++ b/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 ( <>
-

{title}

- -

{content}

+

{title}

+
+ +
+
+ +

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. +

+ +
+
+ +

What is broccoli salad

+
+

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. +

+ +
+
+ +

What about broccoli stems?

+
+

+ 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. +

+
+ blog-detail + +
+ +
+
+ Share to: +
+
+ +
+
diff --git a/src/components/modules/blogs/BlogContent/BlogDetailImg/BlogDetailImg.tsx b/src/components/modules/blogs/BlogContent/BlogDetailImg/BlogDetailImg.tsx deleted file mode 100644 index 095528105..000000000 --- a/src/components/modules/blogs/BlogContent/BlogDetailImg/BlogDetailImg.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import Image from "next/image"; -import React from 'react'; - -interface Props{ - image:StaticImageData, -} - - - -const BlogDetailImg = ({image}:Props) => { - return ( - <> - - - ) -} - -export default BlogDetailImg diff --git a/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx b/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx new file mode 100644 index 000000000..374775ce0 --- /dev/null +++ b/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 ( + <> + {alt} + + ) +} + +export default BlogDetailImg diff --git a/src/components/modules/blogs/BlogContent/BlogDetailImg/img/blogdetail.png b/src/components/modules/blogs/BlogDetailImg/img/blogdetail.png similarity index 100% rename from src/components/modules/blogs/BlogContent/BlogDetailImg/img/blogdetail.png rename to src/components/modules/blogs/BlogDetailImg/img/blogdetail.png diff --git a/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.module.scss b/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.module.scss new file mode 100644 index 000000000..b1265d281 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx b/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx new file mode 100644 index 000000000..30796a65a --- /dev/null +++ b/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 ( + <> +
+ +
+
+
+ +
+ + +
+ + + + ) +} + +export default BlogDetailPage diff --git a/src/components/modules/blogs/index.ts b/src/components/modules/blogs/index.ts index 0d72236fc..2e15c3700 100644 --- a/src/components/modules/blogs/index.ts +++ b/src/components/modules/blogs/index.ts @@ -1 +1 @@ -export { default as BlogDetailImg } from './BlogContent/BlogDetailImg/BlogDetailImg' +export { default as BlogDetailImg } from './BlogDetailImg/BlogDetailImg' diff --git a/src/components/modules/recipes/RecipesListPage/RecipesListPage.module.scss b/src/components/modules/recipes/RecipeListPage/RecipeListPage.module.scss similarity index 100% rename from src/components/modules/recipes/RecipesListPage/RecipesListPage.module.scss rename to src/components/modules/recipes/RecipeListPage/RecipeListPage.module.scss diff --git a/src/components/modules/recipes/RecipesListPage/RecipesListPage.tsx b/src/components/modules/recipes/RecipeListPage/RecipeListPage.tsx similarity index 99% rename from src/components/modules/recipes/RecipesListPage/RecipesListPage.tsx rename to src/components/modules/recipes/RecipeListPage/RecipeListPage.tsx index f0c98764c..2e2699ce1 100644 --- a/src/components/modules/recipes/RecipesListPage/RecipesListPage.tsx +++ b/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', diff --git a/src/components/modules/recipes/RecipesListPage/img/blog1.png b/src/components/modules/recipes/RecipeListPage/img/blog1.png similarity index 100% rename from src/components/modules/recipes/RecipesListPage/img/blog1.png rename to src/components/modules/recipes/RecipeListPage/img/blog1.png diff --git a/src/components/modules/recipes/RecipesListPage/img/blog2.png b/src/components/modules/recipes/RecipeListPage/img/blog2.png similarity index 100% rename from src/components/modules/recipes/RecipesListPage/img/blog2.png rename to src/components/modules/recipes/RecipeListPage/img/blog2.png diff --git a/src/components/modules/recipes/RecipesListPage/img/blog3.png b/src/components/modules/recipes/RecipeListPage/img/blog3.png similarity index 100% rename from src/components/modules/recipes/RecipesListPage/img/blog3.png rename to src/components/modules/recipes/RecipeListPage/img/blog3.png diff --git a/src/components/modules/recipes/RecipesListPage/img/blog4.png b/src/components/modules/recipes/RecipeListPage/img/blog4.png similarity index 100% rename from src/components/modules/recipes/RecipesListPage/img/blog4.png rename to src/components/modules/recipes/RecipeListPage/img/blog4.png diff --git a/src/components/modules/recipes/RecipesListPage/img/blog5.png b/src/components/modules/recipes/RecipeListPage/img/blog5.png similarity index 100% rename from src/components/modules/recipes/RecipesListPage/img/blog5.png rename to src/components/modules/recipes/RecipeListPage/img/blog5.png diff --git a/src/components/modules/recipes/RecipesListPage/img/blog6.png b/src/components/modules/recipes/RecipeListPage/img/blog6.png similarity index 100% rename from src/components/modules/recipes/RecipesListPage/img/blog6.png rename to src/components/modules/recipes/RecipeListPage/img/blog6.png diff --git a/src/components/modules/recipes/index.ts b/src/components/modules/recipes/index.ts index 2ffa62e7c..5cbf11ecf 100644 --- a/src/components/modules/recipes/index.ts +++ b/src/components/modules/recipes/index.ts @@ -1 +1 @@ -export { default as RecipesListPage } from './RecipesListPage/RecipesListPage' +export { default as RecipeListPage } from './RecipeListPage/RecipeListPage'