From d6a0c41e9987f3d0af8a69c4404152e0ddc1345f Mon Sep 17 00:00:00 2001 From: quangnhankie Date: Wed, 8 Sep 2021 23:50:47 +0700 Subject: [PATCH] refactor: Refactor RecipeListPage --- pages/recipes.tsx | 15 + .../RecipeListBanner.module.scss | 8 + .../RecipeListBanner/RecipeListBanner.tsx | 27 ++ .../assets/bannerrecipes.png | Bin .../RecipesItem/RecipesItem.module.scss | 4 +- .../RecipesList/RecipesItem/RecipesItem.tsx | 0 .../RecipesList/RecipesList.module.scss | 86 ++++++ .../recipes-list/RecipesList/RecipesList.tsx | 215 +++++++++++++++ src/components/modules/recipes-list/index.ts | 2 + .../RecipeListPage/RecipeListPage.module.scss | 79 ------ .../recipes/RecipeListPage/RecipeListPage.tsx | 258 ------------------ .../RecipesList/RecipesList.module.scss | 43 --- .../recipes/RecipesList/RecipesList.tsx | 45 --- src/components/modules/recipes/index.ts | 1 - 14 files changed, 355 insertions(+), 428 deletions(-) create mode 100644 pages/recipes.tsx create mode 100644 src/components/modules/recipes-list/RecipeListBanner/RecipeListBanner.module.scss create mode 100644 src/components/modules/recipes-list/RecipeListBanner/RecipeListBanner.tsx rename {public => src/components/modules/recipes-list/RecipeListBanner}/assets/bannerrecipes.png (100%) rename src/components/modules/{recipes => recipes-list}/RecipesList/RecipesItem/RecipesItem.module.scss (95%) rename src/components/modules/{recipes => recipes-list}/RecipesList/RecipesItem/RecipesItem.tsx (100%) create mode 100644 src/components/modules/recipes-list/RecipesList/RecipesList.module.scss create mode 100644 src/components/modules/recipes-list/RecipesList/RecipesList.tsx create mode 100644 src/components/modules/recipes-list/index.ts delete mode 100644 src/components/modules/recipes/RecipeListPage/RecipeListPage.module.scss delete mode 100644 src/components/modules/recipes/RecipeListPage/RecipeListPage.tsx delete mode 100644 src/components/modules/recipes/RecipesList/RecipesList.module.scss delete mode 100644 src/components/modules/recipes/RecipesList/RecipesList.tsx delete mode 100644 src/components/modules/recipes/index.ts diff --git a/pages/recipes.tsx b/pages/recipes.tsx new file mode 100644 index 000000000..ba2388038 --- /dev/null +++ b/pages/recipes.tsx @@ -0,0 +1,15 @@ +import { Layout } from 'src/components/common'; +import RecipeListBanner from 'src/components/modules/recipes-list/RecipeListBanner/RecipeListBanner'; +import RecipesList from 'src/components/modules/recipes-list/RecipesList/RecipesList'; + + +export default function Recipes() { + return ( + <> + + + + ) +} + +Recipes.Layout = Layout 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/RecipesList/RecipesItem/RecipesItem.module.scss b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss similarity index 95% rename from src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.module.scss rename to src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss index 24c2b4d52..59d1c60ef 100644 --- a/src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.module.scss +++ b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss @@ -34,7 +34,7 @@ @apply topline; display: -webkit-box; - -webkit-line-clamp: 2; + -webkit-line-clamp: 1; overflow: hidden; -webkit-box-orient: vertical; @@ -42,7 +42,7 @@ cursor: pointer; font-weight:bold; color:var(--text-active); - margin-bottom: 1rem; + margin-top: 1.6rem; &:hover { color: var(--primary); diff --git a/src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.tsx b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx similarity index 100% rename from src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.tsx rename to src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx 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..1e33eecd2 --- /dev/null +++ b/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss @@ -0,0 +1,86 @@ +@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:4rem; + } + @screen lg{ + width: calc(97% / 3); + margin-top:4rem; + } + } + } + } + .recipesPagination{ + @apply flex justify-center w-full; + margin: 3rem 0; + @screen md { + @apply flex justify-center ; + margin:2rem 0; + } + } + .select{ + @apply flex justify-between w-full; + padding: 2.5rem 0; + + @screen xl { + @apply block; + width: auto; + padding:0; + } + .categorySelect{ + + @screen xl { + @apply hidden; + } + } + + } + + } + + } + + +} 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..5ade75eec --- /dev/null +++ b/src/components/modules/recipes-list/RecipesList/RecipesList.tsx @@ -0,0 +1,215 @@ +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: 'Home', + link: "/", + }, + { + 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 ( + <> +
+
+ +
+
+ +
+ +
+ +
+ SPECIAL RECIPES + +
+
+ +
+ + +
+ + +
+
+ {data?.map((item,index) => ( +
+ +
+ ))} +
+
+
+ +
+
+ +
+ +
+ + ) +} + +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/components/modules/recipes/RecipeListPage/RecipeListPage.module.scss b/src/components/modules/recipes/RecipeListPage/RecipeListPage.module.scss deleted file mode 100644 index 6d4319ed0..000000000 --- a/src/components/modules/recipes/RecipeListPage/RecipeListPage.module.scss +++ /dev/null @@ -1,79 +0,0 @@ -@import "../../../../styles/_utilities"; -.recipesListPageWrapper{ - @apply spacing-horizontal; - - @screen md { - padding:0 3.2rem; - } - - .recipesListPageBreadcrumbDesktop{ - @apply hidden; - @screen md { - @apply block; - } - } - .recipesListPageHeadMobile{ - margin-top: 2rem; - h2{ - margin-bottom: 0.7rem; - } - @screen md { - @apply hidden; - padding: 3rem 0; - } - } - .recipesListPageMain{ - @screen md { - @apply flex; - } - .categoriesDesktop{ - @apply hidden; - @screen md { - @apply block; - width:25%; - } - } - .sortByMobile{ - @apply flex justify-end; - } - .categoriesMobile{ - ul{ - @apply flex-nowrap ; - overflow: auto; - } - } - .recipesList{ - @screen md { - width:75%; - } - .sortByDesktop{ - @apply hidden; - @screen md { - @apply flex justify-between; - margin-top:1.5rem; - h2{ - @apply heading-3; - } - } - @screen xl{ - @apply flex justify-between; - h2{ - @apply heading-2; - } - } - } - .selectMobile{ - @apply flex justify-between; - margin: 2rem 0; - label{ - @apply topline; - font-weight: bold; - } - @screen md { - @apply hidden; - } - } - } - } - -} diff --git a/src/components/modules/recipes/RecipeListPage/RecipeListPage.tsx b/src/components/modules/recipes/RecipeListPage/RecipeListPage.tsx deleted file mode 100644 index c3e931cb6..000000000 --- a/src/components/modules/recipes/RecipeListPage/RecipeListPage.tsx +++ /dev/null @@ -1,258 +0,0 @@ -import React from 'react'; -import { Banner, SelectCommon } from 'src/components/common'; -import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon'; -import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation'; -import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'; -import HeadingCommon from "../../../common/HeadingCommon/HeadingCommon"; -import RecipesList from '../RecipesList/RecipesList'; -import s from './RecipeListPage.module.scss'; - -const BREADCRUMB = [ - { - name: 'Home', - link: "/", - }, - { - 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 RECIPES = [ - { - id: '1', - image: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png', - 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...', - link: `${ROUTE.RECIPES}` - }, { - id: '2', - image: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png', - 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...', - link: `${ROUTE.RECIPES}` - } - , { - id: '3', - image: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png', - title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit", - description: 'Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...', - link: `${ROUTE.RECIPES}` - } - , { - id: '4', - image: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png', - 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...', - link: `${ROUTE.RECIPES}`, - }, { - id: '5', - image: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png', - 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...', - link: `${ROUTE.RECIPES}`, - } - , { - id: '6', - image: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png', - 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...', - link: `${ROUTE.RECIPES}`, - }, - { - id: '1', - image: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png', - 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...', - link: `${ROUTE.RECIPES}` - }, { - id: '2', - image: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png', - 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...', - link: `${ROUTE.RECIPES}` - } - , { - id: '3', - image: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png', - title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit", - description: 'Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...', - link: `${ROUTE.RECIPES}` - } - , { - id: '4', - image: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png', - 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...', - link: `${ROUTE.RECIPES}`, - }, { - id: '5', - image: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png', - 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...', - link: `${ROUTE.RECIPES}`, - } - , { - id: '6', - image: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png', - 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...', - link: `${ROUTE.RECIPES}`, - }, -]; - -const OPTIONSLECT=[ - { - name:"Most Viewed", - value:"most-viewed" - }, - { - name:"Lastest Blogs", - value:"lastest-blogs" - }, - { - name:"Recent Blogs", - value:"recent-blogs" - }, -] -const BANNER =[ - { - imgLink:'assets/bannerrecipes.png', - title:'SPECIAL RECIPE OF THE WEEK', - subtitle:'Last call! Shop deep deals on 100+ bulk picks while you can.', - } -] - -const RecipesListPage = () => { - return ( -
- - - -
- -
- -
-
- SPECIAL RECIPES - -
-
- -
- -
- -
- -
-
- SPECIAL RECIPES - -
-
-
- - -
-
- - -
-
- -
-
-
- ) -} - -export default RecipesListPage diff --git a/src/components/modules/recipes/RecipesList/RecipesList.module.scss b/src/components/modules/recipes/RecipesList/RecipesList.module.scss deleted file mode 100644 index 518a27f11..000000000 --- a/src/components/modules/recipes/RecipesList/RecipesList.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -@import "../../../../styles/_utilities"; - -.recipesListWrapper { - @screen md{ - padding-bottom:5.6rem; - } - .recipesHead{ - @apply flex justify-end; - @screen md{ - @apply justify-between; - } - } - .recipesListBlogs{ - @screen md { - @apply flex flex-col items-center justify-center; - } - .recipesList { - @screen md { - @apply flex justify-between flex-wrap; - margin: 1rem 0; - } - .recipesItem { - @screen md { - width: calc(97% / 2); - margin-top:4rem; - } - @screen lg{ - width: calc(97% / 3); - margin-top:4rem; - } - } - } - } - .recipesPagination{ - @apply flex justify-center; - margin: 3rem 0; - @screen md { - @apply flex justify-center; - margin:2rem 0; - } - } - -} diff --git a/src/components/modules/recipes/RecipesList/RecipesList.tsx b/src/components/modules/recipes/RecipesList/RecipesList.tsx deleted file mode 100644 index 6359d4c34..000000000 --- a/src/components/modules/recipes/RecipesList/RecipesList.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'; -import RecipesItem from './RecipesItem/RecipesItem'; -import s from './RecipesList.module.scss'; -interface Props{ - recipes:{ - id:string, - title:string, - image:string, - description:string, - link:string - }[], -} - -const RecipesList = ({recipes}:Props) => { - return ( - <> -
-
- -
- -
-
- {recipes?.map(item => ( -
- -
- ))} -
-
-
- -
-
- - ) -} - -export default RecipesList diff --git a/src/components/modules/recipes/index.ts b/src/components/modules/recipes/index.ts deleted file mode 100644 index 5cbf11ecf..000000000 --- a/src/components/modules/recipes/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as RecipeListPage } from './RecipeListPage/RecipeListPage'