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

bug: fix datatest recipes

Browse Source
This commit is contained in:
Quangnhankie 2021-09-14 15:18:42 +07:00
parent ccb52169f8
commit 1fc2dec6de
10 changed files with 121 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/index.tsx
View File

@ -1,5 +1,6 @@
import { Layout } from 'src/components/common';
import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
import HomeSpice from 'src/components/modules/home/HomeSpice/HomeSpice';
export default function Home() {
return (
@ -9,6 +10,7 @@ export default function Home() {
<HomeCategories />
<HomeCollection />
<HomeVideo />
<HomeSpice/>
<HomeCTA />
<HomeRecipe />
<HomeSubscribe />

7
src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
View File

@ -30,10 +30,13 @@ const HeaderMenu = memo(({ visibleFilter,isFull, openModalAuthen, openModalInfo,
name: 'Login (Demo)',
},
{
// onClick: openModalInfo,
link: '/account-not-login',
onClick: openModalInfo,
name: 'Create User Info (Demo)',
},
{
link: '/account-not-login',
name: 'Account Not Login',
},
{
link: ROUTE.ACCOUNT,
name: 'Account',

3
src/components/common/MenuNavigation/MenuNavigation.module.scss
View File

@ -1,6 +1,9 @@
@import "../../../styles/utilities";
.menuNavigationWrapper{
@apply hidden;
@screen md {
@apply block;
}
.menuNavigationHeading{
@screen md {
@apply sub-headline font-bold ;

1
src/components/modules/account/AccountSignIn/AccountSignIn.module.scss
View File

@ -1,5 +1,6 @@
@import "../../../../styles/utilities";
.accountSignInWrapper{
padding: 5rem;
@apply w-full;
.imgError{
@apply w-full flex justify-center;

24
src/components/modules/account/AccountSignIn/AccountSignIn.tsx
View File

@ -23,17 +23,19 @@ const AccountSignIn = memo(({ } : AccountSignIn) => {
return (
<>
<div className={s.accountSignInWrapper}>
<div className={s.imgError}>
<StaticImage src={AccountSignInImg} />
</div>
<div className={s.text}>
Sign in to get more interesting <br/> features
</div>
<div className={s.btn}>
<ButtonCommon size="default" onClick={openLogin}>{LANGUAGE.BUTTON_LABEL.SIGNIN}</ButtonCommon>
</div>
<div className={s.dontHaveAccount}>
<div>Don't have an account? &nbsp;</div> <span><a><Link href="/"> Create Account</Link></a></span>
<div>
<div className={s.imgError}>
<StaticImage src={AccountSignInImg} />
</div>
<div className={s.text}>
Sign in to get more interesting <br/> features
</div>
<div className={s.btn}>
<ButtonCommon size="default" onClick={openLogin}>{LANGUAGE.BUTTON_LABEL.SIGNIN}</ButtonCommon>
</div>
<div className={s.dontHaveAccount}>
<div>Don't have an account? &nbsp;</div> <span><a><Link href="/"> Create Account</Link></a></span>
</div>
</div>
</div>
</>

3
src/components/modules/home/HomeSpice/HomeSpice.module.scss Normal file
View File

@ -0,0 +1,3 @@
.homeSpiceWarpper{
margin: 5.6rem 0;
}

19
src/components/modules/home/HomeSpice/HomeSpice.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from 'react'
import { ProductCarousel } from 'src/components/common'
import { SPICE_DATA_TEST } from "../../../../utils/demo-data"
import s from './HomeSpice.module.scss'
interface HomeSpice {
}
const HomeSpice = ({}: HomeSpice) => {
return (
<div className={s.homeSpiceWarpper}>
<ProductCarousel data={SPICE_DATA_TEST} itemKey="product-7"/>
</div>
)
}
export default HomeSpice

5
src/components/modules/home/HomeVideo/HomeVideo.tsx
View File

@ -2,9 +2,9 @@ import Image from 'next/image'
import React from 'react'
import s from './HomeVideo.module.scss'
import LogoBrand from './assets/logo_maggi.png'
import { ProductCarousel, VideoPlayer } from 'src/components/common'
import { VideoPlayer } from 'src/components/common'
import HeadingCommon from '../../../common/HeadingCommon/HeadingCommon'
import {PRODUCT_DATA_TEST} from "../../../../utils/demo-data";
interface Props {
className?: string
@ -27,7 +27,6 @@ const HomeVideo = ({ }: Props) => {
{/* todo: change url video */}
<VideoPlayer url='https://www.youtube.com/watch?v=nXH23nYYM3s' controls={true} />
</div>
<ProductCarousel data={PRODUCT_DATA_TEST} itemKey="product-7"/>
</section >
)
}

16
src/components/modules/recipes-list/RecipesList/RecipesList.tsx
View File

@ -6,7 +6,8 @@ import PaginationCommon from 'src/components/common/PaginationCommon/PaginationC
import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard';
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
import HeadingCommon from "../../../common/HeadingCommon/HeadingCommon";
import RecipesItem from './RecipesItem/RecipesItem';
import { RecipeCard } from 'src/components/common'
import s from './RecipesList.module.scss';
const recipe:RecipeCardProps[] = [
@ -46,6 +47,7 @@ const recipe:RecipeCardProps[] = [
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png',
slug:"the-best-recipe-of-beef-noodle-soup"
},];
const DEFAULT_PAGESIZE_RECIPELIST = 6;
const BREADCRUMB = [
@ -159,11 +161,10 @@ const OPTIONSLECT=[
interface Props{
data?: RecipeCardProps[],
recipes?:{
id:string,
title:string,
image:string,
imageSrc:string,
description:string,
link:string
slug:string
}[],
}
@ -203,12 +204,7 @@ const RecipesList = ({ data =recipe}:Props) => {
<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="#"
/>
<RecipeCard slug={item.slug} imageSrc={item.imageSrc} title={item.title} description={item.description}/>
</div>
))}
</div>

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

@ -68,7 +68,72 @@ export const PRODUCT_DATA_TEST = [
imageSrc: "https://user-images.githubusercontent.com/76729908/131646231-2d1c3ad1-4f5b-4a8e-9874-ca731f4ce128.png",
},
]
export const SPICE_DATA_TEST = [
{
name: 'Tomato',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/89437339/133218370-4145e774-4d99-45f9-9200-9dc1f55b967d.png",
},
{
name: 'Cucumber',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/89437339/133218428-20bd1a2b-b3e2-477a-8cef-2b9f0a5c8899.png",
},
{
name: 'Carrot',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/89437339/133218473-99e96817-40b6-45a4-9fed-daa269ae912f.png",
},
{
name: 'Salad',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/89437339/133218528-9da429bf-11ab-43a2-9700-ed7c7114cd12.png",
},
{
name: 'Tomato',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/89437339/133218535-60015545-fe6d-4af0-9650-3c18f14b4b20.png",
},
{
name: 'Cucumber',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/89437339/133218538-10d41f11-a484-4f42-ae1f-dc95ac9e5773.png",
},
{
name: 'Tomato',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/89437339/133218370-4145e774-4d99-45f9-9200-9dc1f55b967d.png",
},
{
name: 'Cucumber',
slug: 'tomato',
weight: '250g',
category: 'VEGGIE',
price: 'Rp 27.500',
imageSrc: "https://user-images.githubusercontent.com/89437339/133218428-20bd1a2b-b3e2-477a-8cef-2b9f0a5c8899.png",
},
]
export const PRODUCT_CART_DATA_TEST = [
{
name: 'Tomato',