mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
refactor: Refactor RecipeListPage
This commit is contained in:
quangnhankie
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;
|
@apply topline;
|
||||||
|
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
|
|
||||||
@@ -42,7 +42,7 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-weight:bold;
|
font-weight:bold;
|
||||||
color:var(--text-active);
|
color:var(--text-active);
|
||||||
margin-bottom: 1rem;
|
margin-top: 1.6rem;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--primary);
|
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'
|
|
||||||
Reference in New Issue
Block a user