crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-21 03:41:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

create component RecipeList and RecipesList

Browse Source
This commit is contained in:
quangnhankie 2021-09-07 15:42:57 +07:00
parent b4f42a3b4b
commit 16ca52162b
10 changed files with 89 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
pages/test.tsx
View File

@ -3,8 +3,10 @@ import {
} from 'src/components/common';
import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation';
import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList';
import BlogContent from 'src/components/modules/blogs/BlogContent/BlogContent';
import { RecipesListPage } from 'src/components/modules/recipes';
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
import imageAuthor from '../src/components/common/Author/img/author.png';
const CATEGORY = [
{
@ -57,14 +59,53 @@ const BRAND = [
name: 'Sauce',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
},
]
];
const BLOGDETAIL=
{
date:'APRIL 30, 2021',
title:'The Best Sesame Soy Broccoli Salad',
imageAuthor:imageAuthor,
nameAuthor:'Alessandro Del Piero',
content:`
<p> 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.
</p>
<h2>What is broccoli salad</h2>
<p>
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.
</p>
<h2>What about broccoli stems?</h2>
<p>
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.
</p>
`
};
export default function Test() {
return (
<>
{/* <BlogContent
date={BLOGDETAIL.date}
title={BLOGDETAIL.title}
imageAuthor={BLOGDETAIL.imageAuthor}
nameAuthor={BLOGDETAIL.nameAuthor}
content={BLOGDETAIL.content}
/> */}
<RecipesListPage/>
<MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>
<MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={BRAND}/>
{/* <MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>
<MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={BRAND}/> */}
</>
)
}

2
src/components/common/Author/Author.tsx
View File

@ -4,7 +4,7 @@ import classNames from 'classnames';
import Image from "next/image";
interface Props {
image:any,
image:StaticImageData,
name: string
}

23
src/components/modules/blogs/BlogContent/BlogContent.tsx
View File

@ -1,14 +1,23 @@
import React from 'react';
import { DateTime } from "src/components/common";
interface Props{
image:StaticImageData,
import { Author, DateTime } from "src/components/common";
import s from './BlogContent.module.scss';
interface BlogContentProps {
date: string,
title: string,
imageAuthor:StaticImageData,
nameAuthor:string,
content:string
}
const BlogContent = ({}:Props) => {
const BlogContent = ({date,title,imageAuthor,nameAuthor,content}:BlogContentProps) => {
return (
<>
<DateTime date="APRIL 30, 2021"/>
<div className={s.blogContentWrapper}>
<DateTime date={date}/>
<h1 >{title}</h1>
<Author image={imageAuthor} name={nameAuthor} />
<p>{content}</p>
</div>
</>
)
}

0
src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx → src/components/modules/blogs/BlogContent/BlogDetailImg/BlogDetailImg.tsx
View File

0
src/components/modules/blogs/BlogDetailImg/img/blogdetail.png → src/components/modules/blogs/BlogContent/BlogDetailImg/img/blogdetail.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 709 KiB

After

Width:  |  Height:  |  Size: 709 KiB

2
src/components/modules/blogs/index.ts
View File

@ -1 +1 @@
export { default as BlogDetailImg } from './BlogDetailImg/BlogDetailImg'
export { default as BlogDetailImg } from './BlogContent/BlogDetailImg/BlogDetailImg'

17
src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.tsx
View File

@ -1,9 +1,8 @@
import React from 'react';
import s from './RecipesItem.module.scss'
import classNames from 'classnames';
import Image from "next/image";
import Link from 'next/link';
import React from 'react';
import s from './RecipesItem.module.scss';
interface RecipesItem {
image:StaticImageData,
@ -14,8 +13,8 @@ interface RecipesItem {
const RecipesItem = ({ image, name,description, link }: RecipesItem) => {
return (
<div className={classNames(s.recipesItem)}>
<div className={classNames(s.recipesItemImage)}>
<div className={s.recipesItem}>
<div className={s.recipesItemImage}>
<Link href={link}>
<a>
<Image src={image} />
@ -23,9 +22,9 @@ const RecipesItem = ({ image, name,description, link }: RecipesItem) => {
</Link>
</div>
<Link href={link}>
<a className={classNames(s.recipesItemText)}>
<div className={classNames(s.recipesItemName)}>{name}</div>
<div className={classNames(s.recipesItemDescription)}>{description}</div>
<a className={s.recipesItemText}>
<div className={s.recipesItemName}>{name}</div>
<div className={s.recipesItemDescription}>{description}</div>
</a>
</Link>
</div >

19
src/components/modules/recipes/RecipesList/RecipesList.tsx
View File

@ -1,9 +1,8 @@
import classNames from 'classnames';
import React from 'react';
import s from './RecipesList.module.scss';
import RecipesItem from './RecipesItem/RecipesItem';
import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon';
import RecipesItem from './RecipesItem/RecipesItem';
import s from './RecipesList.module.scss';
interface Props{
recipes:{
@ -20,15 +19,15 @@ interface Props{
const RecipesList = ({recipes}:Props) => {
return (
<>
<div className={classNames(s.recipesListWrapper)}>
<div className={classNames(s.recipesHead)}>
<div className={s.recipesListWrapper}>
<div className={s.recipesHead}>
</div>
<div className={classNames(s.recipesListBlogs)}>
<div className={classNames(s.recipesList)}>
<div className={s.recipesListBlogs}>
<div className={s.recipesList}>
{recipes?.map(item => (
<div key={item.id} className={classNames(s.recipesItem)}>
<div key={item.id} className={s.recipesItem}>
<RecipesItem
name={item.title}
image={item.image}
@ -39,7 +38,7 @@ const RecipesList = ({recipes}:Props) => {
))}
</div>
</div>
<div className={classNames(s.recipesPagination)}>
<div className={s.recipesPagination}>
<PaginationCommon pageSize={6} total={9}/>
</div>
</div>

21
src/components/modules/recipes/RecipesListPage/RecipesListPage.tsx
View File

@ -1,4 +1,3 @@
import classNames from 'classnames';
import React from 'react';
import { Banner, SelectCommon } from 'src/components/common';
import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon';
@ -21,7 +20,7 @@ const BREADCRUMB = [
},
{
name: 'Special Recipes',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
link: `#`,
},
];
@ -132,33 +131,33 @@ const BANNER =[
const RecipesListPage = () => {
return (
<div className={classNames(s.recipesListPageWrapper)}>
<div className={s.recipesListPageWrapper}>
<Banner data={BANNER}/>
<div className={classNames(s.recipesListPageBreadcrumbDesktop)}>
<div className={s.recipesListPageBreadcrumbDesktop}>
<BreadcrumbCommon crumbs={BREADCRUMB} />
</div>
<div className={classNames(s.recipesListPageHeadMobile)}>
<div className={classNames(s.heading)}>
<div className={s.recipesListPageHeadMobile}>
<div className={s.heading}>
<HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
<BreadcrumbCommon crumbs={BREADCRUMB} />
</div>
</div>
<div className={classNames(s.recipesListPageMain)}>
<div className={s.recipesListPageMain}>
<div className={classNames(s.categoriesDesktop)}>
<div className={s.categoriesDesktop}>
<MenuNavigation categories={CATEGORY} heading="Categories"/>
</div>
<div className={classNames(s.recipesList)}>
<div className={classNames(s.sortByDesktop)}>
<div className={s.recipesList}>
<div className={s.sortByDesktop}>
<HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
<SelectCommon option={OPTIONSLECT} />
</div>
<div className={classNames(s.selectMobile)}>
<div className={s.selectMobile}>
<div>
<label htmlFor="">Categories</label>
<SelectCommon option={CATEGORY}/>

45
src/utils/demo-data.ts
View File

@ -1,47 +1,3 @@
<<<<<<< HEAD
export const RECIPE_DATA_TEST= [
{
id: '1',
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:",
image: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png',
link:'#'
},
{
id: '2',
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...",
image: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png',
link:'#'
},
{
id: '3',
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,...",
image: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png',
link:'#'
},
{
id: '4',
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:",
image: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png',
link:'#'
},
{
id: '5',
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...",
image: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png',
link:'#'
},
{
id: '6',
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,...",
image: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png',
link:'#'
=======
import { RecipeCardProps } from "src/components/common/RecipeCard/RecipeCard"
export const PRODUCT_DATA_TEST = [
@ -255,6 +211,5 @@ export const RECIPE_DATA_TEST: RecipeCardProps[] = [
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'
>>>>>>> a9f9f06eb9dee2a1ddefe907ff804237a78c5210
},
]