- 
)
diff --git a/src/components/common/DrawerCommon/DrawerCommon.module.scss b/src/components/common/DrawerCommon/DrawerCommon.module.scss
index 3253eac50..d118d45e8 100644
--- a/src/components/common/DrawerCommon/DrawerCommon.module.scss
+++ b/src/components/common/DrawerCommon/DrawerCommon.module.scss
@@ -17,7 +17,7 @@
width: 100%;
margin-right: 0;
@screen md {
- max-width: 55rem;
+ max-width: 52rem;
}
.top {
@apply flex justify-between items-center;
diff --git a/src/components/modules/blog-detail/BlogContent/BlogContent.module.scss b/src/components/modules/blog-detail/BlogContent/BlogContent.module.scss
new file mode 100644
index 000000000..e081b5f15
--- /dev/null
+++ b/src/components/modules/blog-detail/BlogContent/BlogContent.module.scss
@@ -0,0 +1,55 @@
+@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{
+
+
+
+ img{
+ width: 100%;
+ border-radius: 2.4rem;
+ }
+ }
+ .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/blog-detail/BlogContent/BlogContent.tsx b/src/components/modules/blog-detail/BlogContent/BlogContent.tsx
new file mode 100644
index 000000000..04f4cb4ff
--- /dev/null
+++ b/src/components/modules/blog-detail/BlogContent/BlogContent.tsx
@@ -0,0 +1,80 @@
+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 imageAuthor from '../../../common/Author/img/author.png';
+import Link from 'next/link';
+interface BlogContentProps {
+ className?: string
+ children?: any,
+}
+const BlogContent = ({}:BlogContentProps) => {
+ return (
+ <>
+ {name}
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default BlogContent
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 (
+ <>
+ The Best Sesame Soy 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 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 BlogDetailImg
diff --git a/src/components/modules/blog-detail/BlogDetailImg/img/blogdetail.png b/src/components/modules/blog-detail/BlogDetailImg/img/blogdetail.png
new file mode 100644
index 000000000..ad200ac46
Binary files /dev/null and b/src/components/modules/blog-detail/BlogDetailImg/img/blogdetail.png differ
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/recipes-list/RecipeListBanner/RecipeListBanner.module.scss b/src/components/modules/recipes-list/RecipeListBanner/RecipeListBanner.module.scss
new file mode 100644
index 000000000..2e5f65a1c
--- /dev/null
+++ b/src/components/modules/recipes-list/RecipeListBanner/RecipeListBanner.module.scss
@@ -0,0 +1,8 @@
+@import "../../../../styles/_utilities";
+
+.recipeListBanner{
+ @apply spacing-horizontal;
+ @screen md {
+ padding:0 3.2rem;
+ }
+}
\ No newline at end of file
diff --git a/src/components/modules/recipes-list/RecipeListBanner/RecipeListBanner.tsx b/src/components/modules/recipes-list/RecipeListBanner/RecipeListBanner.tsx
new file mode 100644
index 000000000..0db63d2e3
--- /dev/null
+++ b/src/components/modules/recipes-list/RecipeListBanner/RecipeListBanner.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Banner } from 'src/components/common'
+import BannerRight from './assets/bannerrecipes.png'
+import s from './RecipeListBanner.module.scss'
+
+interface Props {
+}
+
+const RecipeListBanner = ({ }: Props) => {
+ return (
+
+
+ )
+}
+
+export default RecipeListBanner
diff --git a/public/assets/bannerrecipes.png b/src/components/modules/recipes-list/RecipeListBanner/assets/bannerrecipes.png
similarity index 100%
rename from public/assets/bannerrecipes.png
rename to src/components/modules/recipes-list/RecipeListBanner/assets/bannerrecipes.png
diff --git a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss
new file mode 100644
index 000000000..2f70eb3ca
--- /dev/null
+++ b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss
@@ -0,0 +1,60 @@
+@import "../../../../../styles/_utilities";
+
+.recipesItem {
+ @apply flex justify-between;
+ margin: 1.5rem 0;
+
+ @screen md{
+ @apply block;
+ }
+
+ .recipesItemImage {
+ @apply transition-all duration-200;
+ width: 31%;
+ img {
+ @apply block object-cover;
+ width: 100%;
+ min-height: 12.5rem;
+ border-radius: 1.5rem;
+ }
+
+ @screen md {
+ @apply object-cover cursor-pointer;
+ width: 100%;
+ margin: 0 auto;
+ img{
+ height:100%;
+ border-radius: 2.4rem;
+ }
+ }
+ }
+ .recipesItemText {
+ width: 65%;
+ .recipesItemName{
+ @apply topline font-bold cursor-pointer;
+
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ overflow: hidden;
+ -webkit-box-orient: vertical;
+ font-feature-settings: "salt" on;
+ color:var(--text-active);
+ margin-top: 1.6rem;
+ &:hover {
+ color: var(--primary);
+ }
+ }
+ @screen md {
+ width: 100%;
+ }
+ }
+
+ .recipesItemDescription{
+ color:var(--text-label);
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ -webkit-box-orient: vertical;
+ }
+
+}
diff --git a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx
new file mode 100644
index 000000000..f43227d5a
--- /dev/null
+++ b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx
@@ -0,0 +1,31 @@
+import Link from 'next/link';
+import React from 'react';
+import s from './RecipesItem.module.scss';
+interface RecipesItem {
+ image:string,
+ name: string,
+ description:string,
+ link: string
+}
+
+const RecipesItem = ({ image, name,description, link }: RecipesItem) => {
+ return (
+
+
+ )
+}
+
+export default RecipesItem
diff --git a/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss b/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss
new file mode 100644
index 000000000..5f9ded191
--- /dev/null
+++ b/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss
@@ -0,0 +1,94 @@
+@import "../../../../styles/_utilities";
+
+.recipesListWrapper {
+ @apply spacing-horizontal;
+ @screen md{
+ padding:0 3.2rem;
+ padding-bottom:5.6rem;
+ }
+ .breadcrumb{
+ padding:1rem 0;
+ }
+ .recipesListPageMain{
+ @screen md {
+ @apply flex;
+ }
+ .categories{
+ @apply hidden;
+ @screen md {
+ @apply hidden;
+ }
+ @screen xl{
+ @apply block;
+ width:25%;
+ }
+ }
+ .recipesList{
+ @screen md {
+ @apply flex justify-between flex-wrap w-full;
+ margin: 1rem 0;
+ }
+ @screen xl {
+ width:75%;
+ }
+ .inner{
+ @screen md {
+ @apply flex flex-col items-center justify-center;
+ }
+ .boxItem {
+ @screen md {
+ @apply flex justify-between flex-wrap;
+ margin: 1rem 0;
+ }
+ .item {
+ @screen md {
+ width: calc(97% / 2);
+ margin-top:1rem;
+ }
+ @screen lg{
+ width: calc(97% / 3);
+ margin-top:1rem;
+ }
+ }
+ }
+ }
+ .recipesPagination{
+ @apply flex justify-center w-full;
+ margin: 3rem 0;
+ @screen md {
+ @apply flex justify-center ;
+ margin:2rem 0;
+ }
+ }
+ .boxSelect{
+ @apply flex justify-between w-full;
+ padding: 2.5rem 0;
+
+ @screen xl {
+ @apply block;
+ width: auto;
+ padding:0;
+ }
+ .categorySelectCate{
+ @screen xl {
+ @apply hidden;
+ }
+ }
+ label{
+ @apply font-bold topline ;
+ color:var(--text-active);
+ @screen xl {
+ @apply hidden;
+ }
+ }
+ .select{
+ margin-top: 1rem;
+ }
+ }
+
+ }
+
+ }
+
+
+}
diff --git a/src/components/modules/recipes-list/RecipesList/RecipesList.tsx b/src/components/modules/recipes-list/RecipesList/RecipesList.tsx
new file mode 100644
index 000000000..0788e1a47
--- /dev/null
+++ b/src/components/modules/recipes-list/RecipesList/RecipesList.tsx
@@ -0,0 +1,217 @@
+import React from 'react';
+import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon';
+import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation';
+import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon';
+import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard';
+import image12 from "../../../../../public/assets/images/image12.png";
+import image13 from "../../../../../public/assets/images/image13.png";
+import image14 from "../../../../../public/assets/images/image14.png";
+import RecipesItem from './RecipesItem/RecipesItem';
+import HeadingCommon from "../../../common/HeadingCommon/HeadingCommon";
+import s from './RecipesList.module.scss';
+import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
+import { SelectCommon } from 'src/components/common';
+
+const recipe: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: image12.src
+ },{
+ 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: image13.src
+ },{
+ 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: image14.src
+ },{
+ 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: image12.src
+ },{
+ 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: image13.src
+ },{
+ 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: image14.src
+}];
+const BREADCRUMB = [
+ {
+ name: 'Special Recipes',
+ link: `#`,
+ },
+];
+
+const CATEGORY = [
+ {
+ name: 'All',
+ link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=${OPTION_ALL}`,
+ },
+ {
+ name: 'Malaysian',
+ link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=malaysia`,
+ },
+ {
+ name: 'Vietnamese',
+ link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=vietnamese`,
+ },
+ {
+ name: 'Thailand',
+ link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=thailand`,
+ },
+ {
+ name: 'Indian',
+ link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=indian`,
+ },
+ {
+ name: 'Lao',
+ link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=lao`,
+ },
+ {
+ name: 'Chinese',
+ link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=chinese`,
+ },
+ {
+ name: 'Korean',
+ link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=korean`,
+ },
+ {
+ name: 'Japanese',
+ link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=japanese`,
+ },
+ {
+ name: 'Western',
+ link: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=western`,
+ },
+ ];
+
+const CATEGORYSELECT = [
+{
+ name: 'All',
+ value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=${OPTION_ALL}`,
+},
+{
+ name: 'Malaysian',
+ value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=malaysia`,
+},
+{
+ name: 'Vietnamese',
+ value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=vietnamese`,
+},
+{
+ name: 'Thailand',
+ value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=thailand`,
+},
+{
+ name: 'Indian',
+ value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=indian`,
+},
+{
+ name: 'Lao',
+ value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=lao`,
+},
+{
+ name: 'Chinese',
+ value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=chinese`,
+},
+{
+ name: 'Korean',
+ value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=korean`,
+},
+{
+ name: 'Japanese',
+ value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=japanese`,
+},
+{
+ name: 'Western',
+ value: `${ROUTE.RECIPES}/?${QUERY_KEY.RECIPES}=western`,
+},
+];
+
+const OPTIONSLECT=[
+ {
+ name:"Most Viewed",
+ value:"most-viewed"
+ },
+ {
+ name:"Lastest Blogs",
+ value:"lastest-blogs"
+ },
+ {
+ name:"Recent Blogs",
+ value:"recent-blogs"
+ },
+];
+
+interface Props{
+ data?: RecipeCardProps[],
+ recipes?:{
+ id:string,
+ title:string,
+ image:string,
+ description:string,
+ link:string
+ }[],
+}
+
+
+const RecipesList = ({ data =recipe}:Props) => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ {name}
+ {description}
+
+
+
+
+
+ )
+}
+
+export default RecipesList
diff --git a/src/components/modules/recipes-list/index.ts b/src/components/modules/recipes-list/index.ts
new file mode 100644
index 000000000..dc665674c
--- /dev/null
+++ b/src/components/modules/recipes-list/index.ts
@@ -0,0 +1,2 @@
+export { default as RecipeListBanner } from './RecipeListBanner/RecipeListBanner'
+export { default as RecipesList} from './RecipesList/RecipesList'
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
}
+
+
+
+
+
+
+
+
+
+ SPECIAL RECIPES
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {data?.map((item,index) => (
+
+
+
+ ))}
+
+
+
+