mirror of
https://github.com/vercel/commerce.git
synced 2025-07-21 11:51:20 +00:00
refactor: Refactor RecipeListPage
This commit is contained in:
quangnhankie
parent
58664e7523
commit
d6a0c41e99
15
pages/recipes.tsx
Normal file
15
pages/recipes.tsx
Normal file
@ -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 (
|
||||
<>
|
||||
<RecipeListBanner />
|
||||
<RecipesList/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Recipes.Layout = Layout
|
||||
@ -0,0 +1,8 @@
|
||||
@import "../../../../styles/_utilities";
|
||||
|
||||
.recipeListBanner{
|
||||
@apply spacing-horizontal;
|
||||
@screen md {
|
||||
padding:0 3.2rem;
|
||||
}
|
||||
}
|
||||
@ -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 (
|
||||
<div className={s.recipeListBanner}>
|
||||
<Banner
|
||||
data={
|
||||
[{
|
||||
title: "Save 15% on your first order",
|
||||
subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
|
||||
imgLink: BannerRight.src,
|
||||
size: "large",
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</div >
|
||||
)
|
||||
}
|
||||
|
||||
export default RecipeListBanner
|
||||
|
Before Width: | Height: | Size: 780 KiB After Width: | Height: | Size: 780 KiB |
@ -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);
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
215
src/components/modules/recipes-list/RecipesList/RecipesList.tsx
Normal file
215
src/components/modules/recipes-list/RecipesList/RecipesList.tsx
Normal file
@ -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 (
|
||||
<>
|
||||
<div className={s.recipesListWrapper}>
|
||||
<div className={s.breadcrumb}>
|
||||
<BreadcrumbCommon crumbs={BREADCRUMB} />
|
||||
</div>
|
||||
<div className={s.recipesListPageMain}>
|
||||
|
||||
<div className={s.categories}>
|
||||
<MenuNavigation categories={CATEGORY} heading="Categories"/>
|
||||
</div>
|
||||
|
||||
<div className={s.recipesList}>
|
||||
<HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
|
||||
|
||||
<div className={s.select}>
|
||||
<div className={s.categorySelect}>
|
||||
<SelectCommon option={CATEGORYSELECT} placeholder="Categories"/>
|
||||
</div>
|
||||
|
||||
<SelectCommon option={OPTIONSLECT} placeholder="Sort By" />
|
||||
</div>
|
||||
|
||||
|
||||
<div className={s.inner}>
|
||||
<div className={s.boxItem}>
|
||||
{data?.map((item,index) => (
|
||||
<div key={index} className={s.item}>
|
||||
<RecipesItem
|
||||
name={item.title}
|
||||
image={item.imageSrc}
|
||||
description={item.description}
|
||||
link="#"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.recipesPagination}>
|
||||
<PaginationCommon pageSize={6} total={9}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default RecipesList
|
||||
2
src/components/modules/recipes-list/index.ts
Normal file
2
src/components/modules/recipes-list/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export { default as RecipeListBanner } from './RecipeListBanner/RecipeListBanner'
|
||||
export { default as RecipesList} from './RecipesList/RecipesList'
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -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 (
|
||||
<div className={s.recipesListPageWrapper}>
|
||||
|
||||
<Banner data={BANNER}/>
|
||||
|
||||
<div className={s.recipesListPageBreadcrumbDesktop}>
|
||||
<BreadcrumbCommon crumbs={BREADCRUMB} />
|
||||
</div>
|
||||
|
||||
<div className={s.recipesListPageHeadMobile}>
|
||||
<div className={s.heading}>
|
||||
<HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
|
||||
<BreadcrumbCommon crumbs={BREADCRUMB} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={s.recipesListPageMain}>
|
||||
|
||||
<div className={s.categoriesDesktop}>
|
||||
<MenuNavigation categories={CATEGORY} heading="Categories"/>
|
||||
</div>
|
||||
|
||||
<div className={s.recipesList}>
|
||||
<div className={s.sortByDesktop}>
|
||||
<HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
|
||||
<SelectCommon option={OPTIONSLECT} placeholder="Sort By" />
|
||||
</div>
|
||||
<div className={s.selectMobile}>
|
||||
<div>
|
||||
<label htmlFor="">Categories</label>
|
||||
<SelectCommon option={CATEGORYSELECT} placeholder="Categories"/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="">Sort By</label>
|
||||
<SelectCommon option={OPTIONSLECT} placeholder="Sort By" />
|
||||
</div>
|
||||
</div>
|
||||
<RecipesList recipes={RECIPES}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RecipesListPage
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -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 (
|
||||
<>
|
||||
<div className={s.recipesListWrapper}>
|
||||
<div className={s.recipesHead}>
|
||||
|
||||
</div>
|
||||
|
||||
<div className={s.recipesListBlogs}>
|
||||
<div className={s.recipesList}>
|
||||
{recipes?.map(item => (
|
||||
<div key={item.id} className={s.recipesItem}>
|
||||
<RecipesItem
|
||||
name={item.title}
|
||||
image={item.image}
|
||||
description={item.description}
|
||||
link={item.link}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.recipesPagination}>
|
||||
<PaginationCommon pageSize={6} total={9}/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default RecipesList
|
||||
@ -1 +0,0 @@
|
||||
export { default as RecipeListPage } from './RecipeListPage/RecipeListPage'
|
||||
Loading…
x
Reference in New Issue
Block a user