From 606f3e5e81b1c002cf69af2c0ac0f3750766532f Mon Sep 17 00:00:00 2001 From: quangnhankie Date: Thu, 9 Sep 2021 14:15:21 +0700 Subject: [PATCH] refactor: BlogDetailpage --- pages/blog/[slug].tsx | 17 ++++ pages/recipes.tsx | 4 +- .../BlogContent/BlogContent.module.scss | 31 +++++- .../BlogContent/BlogContent.tsx | 17 ++-- .../BlogDetailImg/BlogDetailImg.module.scss | 21 ++++ .../BlogDetailImg/BlogDetailImg.tsx | 27 +++++ .../BlogDetailImg/img/blogdetail.png | Bin src/components/modules/blog-detail/index.ts | 2 + .../BlogDetailImg/BlogDetailImg.module.scss | 3 - .../blogs/BlogDetailImg/BlogDetailImg.tsx | 17 ---- .../BlogDetailPage/BlogDetailPage.module.scss | 18 ---- .../blogs/BlogDetailPage/BlogDetailPage.tsx | 93 ------------------ src/components/modules/blogs/index.ts | 1 - src/utils/demo-data.ts | 18 ++-- src/utils/types.utils.ts | 1 + 15 files changed, 117 insertions(+), 153 deletions(-) create mode 100644 pages/blog/[slug].tsx rename src/components/modules/{blogs => blog-detail}/BlogContent/BlogContent.module.scss (54%) rename src/components/modules/{blogs => blog-detail}/BlogContent/BlogContent.tsx (87%) create mode 100644 src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss create mode 100644 src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.tsx rename src/components/modules/{blogs => blog-detail}/BlogDetailImg/img/blogdetail.png (100%) create mode 100644 src/components/modules/blog-detail/index.ts delete mode 100644 src/components/modules/blogs/BlogDetailImg/BlogDetailImg.module.scss delete mode 100644 src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx delete mode 100644 src/components/modules/blogs/BlogDetailPage/BlogDetailPage.module.scss delete mode 100644 src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx delete mode 100644 src/components/modules/blogs/index.ts diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx new file mode 100644 index 000000000..773634c26 --- /dev/null +++ b/pages/blog/[slug].tsx @@ -0,0 +1,17 @@ +import { Layout, RelevantBlogPosts } from 'src/components/common'; +import BlogContent from 'src/components/modules/blog-detail/BlogContent/BlogContent'; +import BlogDetailImg from 'src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg'; +import { RECIPE_DATA_TEST } from 'src/utils/demo-data' + + +export default function BlogDetailPage() { + return ( + <> + + + + + ) +} + +BlogDetailPage.Layout = Layout diff --git a/pages/recipes.tsx b/pages/recipes.tsx index ba2388038..a4acece13 100644 --- a/pages/recipes.tsx +++ b/pages/recipes.tsx @@ -3,7 +3,7 @@ import RecipeListBanner from 'src/components/modules/recipes-list/RecipeListBann import RecipesList from 'src/components/modules/recipes-list/RecipesList/RecipesList'; -export default function Recipes() { +export default function RecipeListPage() { return ( <> @@ -12,4 +12,4 @@ export default function Recipes() { ) } -Recipes.Layout = Layout +RecipeListPage.Layout = Layout diff --git a/src/components/modules/blogs/BlogContent/BlogContent.module.scss b/src/components/modules/blog-detail/BlogContent/BlogContent.module.scss similarity index 54% rename from src/components/modules/blogs/BlogContent/BlogContent.module.scss rename to src/components/modules/blog-detail/BlogContent/BlogContent.module.scss index 03871c742..e081b5f15 100644 --- a/src/components/modules/blogs/BlogContent/BlogContent.module.scss +++ b/src/components/modules/blog-detail/BlogContent/BlogContent.module.scss @@ -1,19 +1,42 @@ @import "../../../../styles/_utilities"; .blogContentWrapper{ - + width: 100%; + padding: 0 2rem; + @screen md { + width: 90%; + margin:0 auto; + } + @screen xl{ + width: 63%; + margin:0 auto; + } + h1{ @apply heading-2; } + h2{ + @apply heading-3; + } + h3{ + @apply heading-3; + } + + h1,h2,h3,h4{ + color:var(--text-base); + font-family: var(--font-heading); + } + .author{ padding: 2rem 0; } .content{ - .heading2{ - @apply heading-3 ; - } + + + img{ width: 100%; + border-radius: 2.4rem; } } .boxShare{ diff --git a/src/components/modules/blogs/BlogContent/BlogContent.tsx b/src/components/modules/blog-detail/BlogContent/BlogContent.tsx similarity index 87% rename from src/components/modules/blogs/BlogContent/BlogContent.tsx rename to src/components/modules/blog-detail/BlogContent/BlogContent.tsx index 79cc6e580..04f4cb4ff 100644 --- a/src/components/modules/blogs/BlogContent/BlogContent.tsx +++ b/src/components/modules/blog-detail/BlogContent/BlogContent.tsx @@ -4,21 +4,20 @@ 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 imageAuthor from '../../../common/Author/img/author.png'; import Link from 'next/link'; interface BlogContentProps { - date: string, - title: string, - imageAuthor:string, - nameAuthor:string, + className?: string + children?: any, } -const BlogContent = ({date,title,imageAuthor,nameAuthor}:BlogContentProps) => { +const BlogContent = ({}:BlogContentProps) => { return ( <>
- -

{title}

+ +

The Best Sesame Soy Broccoli Salad

- +
@@ -56,7 +55,7 @@ const BlogContent = ({date,title,imageAuthor,nameAuthor}:BlogContentProps) => { 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 + blog-detail
diff --git a/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss b/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss new file mode 100644 index 000000000..98206b439 --- /dev/null +++ b/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss @@ -0,0 +1,21 @@ +.beadcrumb{ + padding-left: 3.2rem; + padding-bottom: 3.2rem; +} +.image{ + width: 100%; + padding: 0 2rem; + margin-bottom: 2rem; + border-radius: 2.4rem; + @screen md { + width: 90%; + margin:0 auto; + margin-bottom: 4rem; + } + @screen xl{ + width: 63%; + margin:0 auto; + margin-bottom: 4rem; + } + +} \ No newline at end of file diff --git a/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.tsx b/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.tsx new file mode 100644 index 000000000..b7eb6aaef --- /dev/null +++ b/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.tsx @@ -0,0 +1,27 @@ + +import React from 'react'; +import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon'; +import s from './BlogDetailImg.module.scss'; +interface Props { + className?: string + children?: any +} + +const CRUMBS =[ + { + name:"Blog", + link:"/blog" + } +] +const BlogDetailImg = ({}:Props ) => { + return ( + <> +
+ +
+ Ảnh đại diện + + ) +} + +export default BlogDetailImg diff --git a/src/components/modules/blogs/BlogDetailImg/img/blogdetail.png b/src/components/modules/blog-detail/BlogDetailImg/img/blogdetail.png similarity index 100% rename from src/components/modules/blogs/BlogDetailImg/img/blogdetail.png rename to src/components/modules/blog-detail/BlogDetailImg/img/blogdetail.png diff --git a/src/components/modules/blog-detail/index.ts b/src/components/modules/blog-detail/index.ts new file mode 100644 index 000000000..45d532145 --- /dev/null +++ b/src/components/modules/blog-detail/index.ts @@ -0,0 +1,2 @@ +export { default as BlogContent } from './BlogContent/BlogContent'; +export { default as BlogDetailImg } from './BlogDetailImg/BlogDetailImg'; \ No newline at end of file diff --git a/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.module.scss b/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.module.scss deleted file mode 100644 index 36d02ebef..000000000 --- a/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.image{ - width: 100%; -} \ No newline at end of file diff --git a/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx b/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx deleted file mode 100644 index 98d3c7abd..000000000 --- a/src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx +++ /dev/null @@ -1,17 +0,0 @@ - -import React from 'react'; -import s from './BlogDetailImg.module.scss'; -interface Props{ - image:string, - alt?:string -} - -const BlogDetailImg = ({image,alt}:Props) => { - return ( - <> - {alt} - - ) -} - -export default BlogDetailImg diff --git a/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.module.scss b/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.module.scss deleted file mode 100644 index 0ed34eb11..000000000 --- a/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.module.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import "../../../../styles/_utilities"; -.beadcrumb{ - padding: 0 0 3.2rem 3.2rem; -} -.blogDetailPageWrapper{ - padding: 0 2rem; - @screen md { - width: 90%; - margin:0 auto; - } - @screen xl{ - 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 deleted file mode 100644 index 2e887f90e..000000000 --- a/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import React from 'react'; -import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon'; -import RelevantBlogPosts from 'src/components/common/RelevantBlogPosts/RelevantBlogPosts'; -import { ROUTE } from 'src/utils/constanst.utils'; -import image15 from '../../../../../public/assets/images/image15.png'; -import image16 from '../../../../../public/assets/images/image16.png'; -import image17 from '../../../../../public/assets/images/image17.png'; -import imageAuthor from '../../../common/Author/img/author.png'; -import BlogContent from '../BlogContent/BlogContent'; -import BlogDetailImg from '../BlogDetailImg/BlogDetailImg'; -import avt from '../BlogDetailImg/img/blogdetail.png'; -import s from './BlogDetailPage.module.scss'; - -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 BLOGS = [ - { - 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...", - imageSrc: image15.src, - link: `${ROUTE.BLOG_DETAIL}` - },{ - 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...", - imageSrc: image16.src, - link: `${ROUTE.BLOG_DETAIL}` - },{ - 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...", - imageSrc: image17.src, - link: `${ROUTE.BLOG_DETAIL}` - },{ - 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...", - imageSrc: image15.src, - link: `${ROUTE.BLOG_DETAIL}` - },{ - 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...", - imageSrc: image16.src, - link: `${ROUTE.BLOG_DETAIL}` - },{ - 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...", - imageSrc: image17.src, - link: `${ROUTE.BLOG_DETAIL}` - }]; - -const BlogDetailPage = () => { - return ( - <> -
- -
-
-
- -
- - -
-
- -
- - ) -} - -export default BlogDetailPage diff --git a/src/components/modules/blogs/index.ts b/src/components/modules/blogs/index.ts deleted file mode 100644 index 02423ad8a..000000000 --- a/src/components/modules/blogs/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as BlogDetailPage } from './BlogDetailPage/BlogDetailPage' diff --git a/src/utils/demo-data.ts b/src/utils/demo-data.ts index 64c8128ae..8ecaf4231 100644 --- a/src/utils/demo-data.ts +++ b/src/utils/demo-data.ts @@ -185,31 +185,37 @@ export const RECIPE_DATA_TEST: RecipeCardProps[] = [ { 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:", - imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png' + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png', + slug: "special-recipe-of-vietnamese-pho" }, { 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...", - imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png' + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png', + slug:"original-recipe-of-curry" }, { 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' + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png', + slug:"the-best-recipe-of-beef-noodle-soup" }, { 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:", - imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png' + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png', + slug: "special-recipe-of-vietnamese-pho" }, { 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...", - imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png' + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png', + slug:"original-recipe-of-curry" }, { 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' + imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png', + slug:"the-best-recipe-of-beef-noodle-soup" }, ] \ No newline at end of file diff --git a/src/utils/types.utils.ts b/src/utils/types.utils.ts index d6f1b47ad..90fa547c3 100644 --- a/src/utils/types.utils.ts +++ b/src/utils/types.utils.ts @@ -20,6 +20,7 @@ export interface FeaturedProductProps { export interface RecipeProps { title: string + slug: string description: string imageSrc: string }