mirror of
https://github.com/vercel/commerce.git
synced 2025-07-21 19:51:22 +00:00
Merge pull request #20 from KieIO/m4-quangnhan
create components MenuFilter and MenuNavigation
This commit is contained in:
lytrankieio123
GitHub
commit
2ac6cec8d5
@ -27,6 +27,8 @@
|
||||
"classnames": "^2.3.1",
|
||||
"cookie": "^0.4.1",
|
||||
"email-validator": "^2.0.4",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-next": "^11.1.2",
|
||||
"immutability-helper": "^3.1.1",
|
||||
"js-cookie": "^2.2.1",
|
||||
"keen-slider": "^5.5.1",
|
||||
@ -66,6 +68,7 @@
|
||||
"@types/node": "^15.12.4",
|
||||
"@types/react": "^17.0.8",
|
||||
"deepmerge": "^4.2.2",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"graphql": "^15.5.1",
|
||||
"husky": "^6.0.0",
|
||||
"lint-staged": "^11.0.0",
|
||||
|
||||
100
pages/test.tsx
100
pages/test.tsx
@ -1,103 +1,7 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
ButtonCommon,
|
||||
Layout,
|
||||
ModalCommon,
|
||||
ProductCarousel,
|
||||
RelevantBlogPosts,
|
||||
CollapseCommon,
|
||||
CollapseCommon, Layout, RelevantBlogPosts
|
||||
} from 'src/components/common'
|
||||
import { CollectionCarcousel } from 'src/components/modules/home'
|
||||
import image5 from '../public/assets/images/image5.png'
|
||||
import image6 from '../public/assets/images/image6.png'
|
||||
import image7 from '../public/assets/images/image7.png'
|
||||
import image8 from '../public/assets/images/image8.png'
|
||||
const dataTest = [
|
||||
{
|
||||
name: 'Tomato',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image5.src,
|
||||
},
|
||||
{
|
||||
name: 'Cucumber',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image6.src,
|
||||
},
|
||||
{
|
||||
name: 'Carrot',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image7.src,
|
||||
},
|
||||
{
|
||||
name: 'Salad',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image8.src,
|
||||
},
|
||||
{
|
||||
name: 'Tomato',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image5.src,
|
||||
},
|
||||
{
|
||||
name: 'Cucumber',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image6.src,
|
||||
},
|
||||
{
|
||||
name: 'Tomato',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image5.src,
|
||||
},
|
||||
{
|
||||
name: 'Cucumber',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image6.src,
|
||||
},
|
||||
{
|
||||
name: 'Carrot',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image7.src,
|
||||
},
|
||||
{
|
||||
name: 'Salad',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image8.src,
|
||||
},
|
||||
{
|
||||
name: 'Tomato',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image5.src,
|
||||
},
|
||||
{
|
||||
name: 'Cucumber',
|
||||
weight: '250g',
|
||||
category: 'VEGGIE',
|
||||
price: 'Rp 27.500',
|
||||
imageSrc: image6.src,
|
||||
},
|
||||
]
|
||||
|
||||
const COLLAPSE_DATA = [
|
||||
{
|
||||
title: "This is a subtitle",
|
||||
|
||||
BIN
public/assets/bannerrecipes.png
Normal file
BIN
public/assets/bannerrecipes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 780 KiB |
@ -1,7 +1,7 @@
|
||||
<svg width="48" height="46" viewBox="0 0 48 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<line opacity="0.1" x1="9.41421" y1="8" x2="21" y2="19.5858" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<line opacity="0.1" x1="1" y1="-1" x2="17.3848" y2="-1" transform="matrix(-0.707107 0.707107 0.707107 0.707107 40 8)" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<line opacity="0.1" x1="1" y1="-1" x2="17.3848" y2="-1" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<line opacity="0.1" x1="38.5858" y1="38" x2="27" y2="26.4142" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<line opacity="0.1" x1="9.41421" y1="8" x2="21" y2="19.5858" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<line opacity="0.1" x1="1" y1="-1" x2="17.3848" y2="-1" transform="matrix(-0.707107 0.707107 0.707107 0.707107 40 8)" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<line opacity="0.1" x1="1" y1="-1" x2="17.3848" y2="-1" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<line opacity="0.1" x1="38.5858" y1="38" x2="27" y2="26.4142" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 797 B After Width: | Height: | Size: 785 B |
@ -2,7 +2,10 @@
|
||||
|
||||
.breadcrumbCommon {
|
||||
color: var(--text-base);
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
.currentItem {
|
||||
cursor: default;
|
||||
}
|
||||
>>>>>>> a9f9f06eb9dee2a1ddefe907ff804237a78c5210
|
||||
}
|
||||
|
||||
40
src/components/common/MenuFilter/MenuFilter.module.scss
Normal file
40
src/components/common/MenuFilter/MenuFilter.module.scss
Normal file
@ -0,0 +1,40 @@
|
||||
@import "../../../styles/utilities";
|
||||
.menuFilterWrapper{
|
||||
|
||||
@screen md {
|
||||
@apply hidden;
|
||||
}
|
||||
.menuFilterHeading{
|
||||
@apply sub-headline font-bold ;
|
||||
color: var(--text-active);
|
||||
font-feature-settings: 'salt' on;
|
||||
margin: 0.8rem 0;
|
||||
}
|
||||
.menuFilterList{
|
||||
@apply flex flex-wrap justify-start relative;
|
||||
margin-bottom: 3rem;
|
||||
box-sizing: border-box;
|
||||
&::after{
|
||||
@apply absolute;
|
||||
top: 110%;
|
||||
content: "";
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--border-line);
|
||||
}
|
||||
|
||||
li{
|
||||
margin: 1rem 0;
|
||||
padding:0;
|
||||
div{
|
||||
padding: 0.8rem 1.6rem;
|
||||
margin-right: 0.8rem;
|
||||
background-color: var(--gray);
|
||||
border-radius: 0.8rem;
|
||||
&.active {
|
||||
color:white;
|
||||
background-color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
48
src/components/common/MenuFilter/MenuFilter.tsx
Normal file
48
src/components/common/MenuFilter/MenuFilter.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import classNames from 'classnames'
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import s from './MenuFilter.module.scss'
|
||||
interface Props {
|
||||
children?: any,
|
||||
heading?:string,
|
||||
categories:{name:string,link:string}[],
|
||||
type:string,
|
||||
onChangeValue?: (value: Object) => void
|
||||
}
|
||||
|
||||
const MenuFilter = ({heading,categories,type,onChangeValue}:Props)=> {
|
||||
const [active, setActive] = useState<string>('');
|
||||
|
||||
function handleClick(link:string){
|
||||
setActive(link);
|
||||
|
||||
if(active === link){
|
||||
setActive('');
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
|
||||
let href = active?.split("=");
|
||||
const linkValue = href[1];
|
||||
|
||||
onChangeValue && onChangeValue({[type]:linkValue});
|
||||
},[active])
|
||||
|
||||
return (
|
||||
<section className={s.menuFilterWrapper}>
|
||||
<h2 className={s.menuFilterHeading}>{heading}</h2>
|
||||
<ul className={s.menuFilterList}>
|
||||
{
|
||||
categories.map(item => <li key={item.name}>
|
||||
<div onClick={()=> handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}>
|
||||
{item.name}
|
||||
</div>
|
||||
</li>)
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default MenuFilter
|
||||
@ -0,0 +1,29 @@
|
||||
@import "../../../styles/utilities";
|
||||
.menuNavigationWrapper{
|
||||
.menuNavigationHeading{
|
||||
@screen md {
|
||||
@apply sub-headline font-bold ;
|
||||
color: var(--text-active);
|
||||
font-feature-settings: 'salt' on;
|
||||
margin: 1.6rem 0;
|
||||
}
|
||||
}
|
||||
.menuNavigationList{
|
||||
@screen md {
|
||||
li{
|
||||
margin: 0.8rem 0;
|
||||
a{
|
||||
display:block;
|
||||
width:100%;
|
||||
color:var(--text-base);
|
||||
&:hover {
|
||||
@apply text-primary;
|
||||
}
|
||||
&.active {
|
||||
@apply text-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
34
src/components/common/MenuNavigation/MenuNavigation.tsx
Normal file
34
src/components/common/MenuNavigation/MenuNavigation.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import classNames from 'classnames'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import s from './MenuNavigation.module.scss'
|
||||
|
||||
interface Props {
|
||||
children?: any,
|
||||
heading:string,
|
||||
categories:{name:string,link:string}[]
|
||||
}
|
||||
|
||||
const MenuNavigation = ({heading,categories}:Props)=> {
|
||||
const router = useRouter()
|
||||
|
||||
return (
|
||||
<section className={s.menuNavigationWrapper}>
|
||||
<h2 className={s.menuNavigationHeading}>{heading}({categories.length})</h2>
|
||||
<ul className={s.menuNavigationList}>
|
||||
{
|
||||
categories.map(item => <li key={item.name}
|
||||
>
|
||||
<Link href={item.link}>
|
||||
<a className={classNames({ [s.active]: router.asPath === item.link})}>
|
||||
{item.name}
|
||||
</a>
|
||||
</Link>
|
||||
</li>)
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default MenuNavigation
|
||||
@ -0,0 +1,45 @@
|
||||
@import "../../../styles/utilities";
|
||||
.menuNavigationProductListDesktop{
|
||||
@screen sm-only {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
.menuNavigationProductListMobile{
|
||||
@apply hidden;
|
||||
&.isShow{
|
||||
@apply block;
|
||||
@screen md {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
.menuNavigationProductModal{
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10000;
|
||||
.content{
|
||||
@apply spacing-horizontal;
|
||||
margin-top: 3rem;
|
||||
padding-top: 2rem ;
|
||||
padding-bottom: 5rem;
|
||||
background-color: white;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
border-radius: 2.4rem 2.4rem 0 0;
|
||||
.head{
|
||||
@apply flex justify-between;
|
||||
h3{
|
||||
@apply heading-3 font-bold;
|
||||
color:var(--text-base);
|
||||
}
|
||||
}
|
||||
button{
|
||||
margin-top: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
import React, { useState } from 'react';
|
||||
import {ButtonCommon} from 'src/components/common';
|
||||
import s from './MenuNavigationProductList.module.scss';
|
||||
import MenuSort from './MenuSort/MenuSort';
|
||||
import {LANGUAGE} from 'src/utils/language.utils';
|
||||
import classNames from 'classnames'
|
||||
import MenuFilter from '../MenuFilter/MenuFilter';
|
||||
import MenuNavigation from '../MenuNavigation/MenuNavigation';
|
||||
import IconHide from 'src/components/icons/IconHide';
|
||||
|
||||
interface Props{
|
||||
categories:{name:string,link:string}[],
|
||||
brands:{name:string,link:string}[],
|
||||
featured:{name:string,link:string}[],
|
||||
}
|
||||
|
||||
const MenuNavigationProductList = ({categories,brands,featured}:Props)=>{
|
||||
|
||||
const [dataSort,setDataSort] = useState({});
|
||||
const [isShow,setIsShow] = useState(true);
|
||||
|
||||
function handleValue(value:Object){
|
||||
setDataSort({...dataSort,...value});
|
||||
}
|
||||
function filter(){
|
||||
console.log(dataSort)
|
||||
}
|
||||
|
||||
function hideMenu(){
|
||||
if(isShow === true){
|
||||
setIsShow(false);
|
||||
}
|
||||
}
|
||||
return(
|
||||
<>
|
||||
<div className={s.menuNavigationProductListDesktop}>
|
||||
<MenuNavigation categories={categories} heading="Categories"/>
|
||||
<MenuNavigation categories={brands} heading="Brands"/>
|
||||
<MenuNavigation categories={featured} heading="Featured"/>
|
||||
</div>
|
||||
<div className={classNames({ [s.menuNavigationProductListMobile] :true,[s.isShow]: isShow})}>
|
||||
<div className={s.menuNavigationProductModal}>
|
||||
<div className={s.content}>
|
||||
<div className={s.head}>
|
||||
<h3>FILTER</h3>
|
||||
<div onClick={hideMenu}><IconHide/></div>
|
||||
</div>
|
||||
<MenuFilter categories={categories} heading="Categories" type="category" onChangeValue={handleValue}/>
|
||||
<MenuFilter categories={brands} heading="Brand" type="brand" onChangeValue={handleValue}/>
|
||||
<MenuFilter categories={featured} heading="Featured" type="featured" onChangeValue={handleValue}/>
|
||||
<MenuSort heading="SORT BY" type="sort" onChangeValue={handleValue}/>
|
||||
<ButtonCommon size="large" onClick={filter}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MenuNavigationProductList
|
||||
@ -0,0 +1,46 @@
|
||||
@import "../../../../styles/utilities";
|
||||
.menuSortWrapper{
|
||||
|
||||
@screen md {
|
||||
@apply hidden;
|
||||
}
|
||||
.menuSortHeading{
|
||||
@apply sub-headline font-bold ;
|
||||
color: var(--text-active);
|
||||
font-feature-settings: 'salt' on;
|
||||
margin: 0.8rem 0;
|
||||
}
|
||||
.menuSortList{
|
||||
box-sizing: border-box;
|
||||
&::after{
|
||||
@apply absolute;
|
||||
top: 110%;
|
||||
content: "";
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--border-line);
|
||||
}
|
||||
li{
|
||||
div{
|
||||
height: 4.8rem;
|
||||
line-height: 4.8rem;
|
||||
padding: 0 1.6rem;
|
||||
margin-right: 0.8rem;
|
||||
border-radius: 0.8rem;
|
||||
&.active {
|
||||
@apply font-bold relative;
|
||||
color:var(--text-active);
|
||||
background-color: var(--primary-lightest);
|
||||
&::after{
|
||||
@apply absolute;
|
||||
content:"";
|
||||
background-image: url('/assets/svg/check.svg');
|
||||
right: 1.6rem;
|
||||
top: calc(50% - 24px/2);
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,67 @@
|
||||
import classNames from 'classnames';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
|
||||
import s from './MenuSort.module.scss';
|
||||
|
||||
interface Props {
|
||||
children?: any,
|
||||
heading:string,
|
||||
type:string,
|
||||
onChangeValue?: (value: Object) => void
|
||||
}
|
||||
const SORT = [
|
||||
{
|
||||
name: 'By Name',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=by-name`,
|
||||
},
|
||||
{
|
||||
name: 'Price(High to Low)',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=high-to-low`,
|
||||
},
|
||||
{
|
||||
name: 'Price (Low to High)',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=low-to-high`,
|
||||
},
|
||||
{
|
||||
name: 'On Sale',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=on-sale`,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const MenuSort = ({heading,type,onChangeValue}:Props)=> {
|
||||
const [active, setActive] = useState<string>('');
|
||||
|
||||
function handleClick(link:string){
|
||||
setActive(link);
|
||||
|
||||
if(active === link){
|
||||
setActive('');
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
|
||||
let href = active?.split("=");
|
||||
const linkValue = href[1];
|
||||
|
||||
onChangeValue && onChangeValue({[type]:linkValue});
|
||||
},[active])
|
||||
|
||||
return (
|
||||
<section className={classNames(s.menuSortWrapper)}>
|
||||
<h2 className={classNames(s.menuSortHeading)}>{heading}</h2>
|
||||
<ul className={s.menuSortList}>
|
||||
{
|
||||
SORT.map(item => <li key={item.name}>
|
||||
<div onClick={()=> handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}>
|
||||
{item.name}
|
||||
</div>
|
||||
</li>)
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default MenuSort
|
||||
@ -0,0 +1,22 @@
|
||||
.warpper{
|
||||
.item{
|
||||
@apply inline-flex items-center justify-center cursor-pointer;
|
||||
background-color: var(--gray);
|
||||
margin: 0 0.4rem;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
&.active{
|
||||
@apply border border-solid;
|
||||
border-color: var(--text-active);
|
||||
background-color: var(--white);
|
||||
}
|
||||
&.disable{
|
||||
svg{
|
||||
path{
|
||||
fill: var(--disabled)
|
||||
}
|
||||
}
|
||||
@apply text-disabled cursor-not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,74 @@
|
||||
import React from 'react'
|
||||
|
||||
import classNames from 'classnames'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { ArrowLeftSmall, ArrowRightSmall } from 'src/components/icons'
|
||||
import PaginationItem from './components/PaginationItem'
|
||||
import s from './PaginationCommon.module.scss'
|
||||
interface PaginationCommonProps {
|
||||
|
||||
defaultCurrent?: number
|
||||
pageSize: number
|
||||
total: number
|
||||
onChange?: (page: number, pageSize: number) => void
|
||||
}
|
||||
|
||||
const PaginationCommon = (props: PaginationCommonProps) => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
const PaginationCommon = ({
|
||||
total,
|
||||
pageSize,
|
||||
defaultCurrent,
|
||||
onChange,
|
||||
}: PaginationCommonProps) => {
|
||||
const [pageNum, setPageNum] = useState<number>(0)
|
||||
const [currentPage, setCurrentPage] = useState<number>(0)
|
||||
useEffect(() => {
|
||||
setPageNum(Math.ceil(total / pageSize))
|
||||
}, [total, pageSize])
|
||||
|
||||
useEffect(() => {
|
||||
if (defaultCurrent) {
|
||||
setCurrentPage(defaultCurrent)
|
||||
}
|
||||
}, [defaultCurrent])
|
||||
|
||||
const onPageClick = (page: number) => {
|
||||
setCurrentPage(page)
|
||||
onChange && onChange(page, pageSize)
|
||||
}
|
||||
|
||||
const onPrevClick = () => {
|
||||
setCurrentPage(currentPage - 1 < 0 ? 0 : currentPage - 1)
|
||||
}
|
||||
|
||||
const onNextClick = () => {
|
||||
setCurrentPage((currentPage + 1) > (pageNum - 1) ? (pageNum - 1) : currentPage + 1)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={s.warpper}>
|
||||
<div
|
||||
className={classNames(s.item, { [`${s.disable}`]: currentPage <= 0 })}
|
||||
onClick={onPrevClick}
|
||||
>
|
||||
<ArrowLeftSmall disable={currentPage <= 0} />
|
||||
</div>
|
||||
{[...Array(pageNum).keys()].map((index) => {
|
||||
return (
|
||||
<PaginationItem
|
||||
page={index}
|
||||
onClick={onPageClick}
|
||||
key={`${index}-item`}
|
||||
active={index === currentPage}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
<div
|
||||
className={classNames(s.item, {
|
||||
[`${s.disable}`]: currentPage >= pageNum - 1,
|
||||
})}
|
||||
onClick={onNextClick}
|
||||
>
|
||||
<ArrowRightSmall disable={currentPage >= pageNum} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PaginationCommon
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
import classNames from 'classnames'
|
||||
import React from 'react'
|
||||
import s from "../PaginationCommon.module.scss"
|
||||
interface PaginationItemProps {
|
||||
onClick:(page:number)=>void
|
||||
page:number
|
||||
active:boolean
|
||||
}
|
||||
|
||||
const PaginationItem = ({onClick, page, active}: PaginationItemProps) => {
|
||||
const onPageClick = () => {
|
||||
onClick && onClick(page)
|
||||
}
|
||||
return (
|
||||
<div onClick={onPageClick} className={classNames(s.item,{[`${s.active}`]:active})}>
|
||||
{page+1}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PaginationItem
|
||||
18
src/components/icons/ArrowLeftSmall.tsx
Normal file
18
src/components/icons/ArrowLeftSmall.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
const ArrowLeft = ({ ...props }) => {
|
||||
return (
|
||||
<svg
|
||||
width="8"
|
||||
height="12"
|
||||
viewBox="0 0 8 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3.28982 6.00019L6.82982 2.46019C7.01607 2.27283 7.12061 2.01938 7.12061 1.75519C7.12061 1.49101 7.01607 1.23756 6.82982 1.05019C6.73686 0.956464 6.62626 0.88207 6.5044 0.831301C6.38254 0.780533 6.25183 0.754395 6.11982 0.754395C5.98781 0.754395 5.8571 0.780533 5.73524 0.831301C5.61339 0.88207 5.50278 0.956464 5.40982 1.05019L1.16982 5.29019C1.07609 5.38316 1.0017 5.49376 0.950931 5.61562C0.900162 5.73747 0.874023 5.86818 0.874023 6.00019C0.874023 6.1322 0.900162 6.26291 0.950931 6.38477C1.0017 6.50663 1.07609 6.61723 1.16982 6.71019L5.40982 11.0002C5.50326 11.0929 5.61408 11.1662 5.73592 11.216C5.85775 11.2657 5.98821 11.291 6.11982 11.2902C6.25143 11.291 6.38189 11.2657 6.50373 11.216C6.62557 11.1662 6.73638 11.0929 6.82982 11.0002C7.01607 10.8128 7.12061 10.5594 7.12061 10.2952C7.12061 10.031 7.01607 9.77756 6.82982 9.59019L3.28982 6.00019Z"
|
||||
fill="#141414"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArrowLeft
|
||||
18
src/components/icons/ArrowRightSmall.tsx
Normal file
18
src/components/icons/ArrowRightSmall.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
const ArrowRight = ({ ...props }) => {
|
||||
return (
|
||||
<svg
|
||||
width="8"
|
||||
height="12"
|
||||
viewBox="0 0 8 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.8297 5.29019L2.5897 1.05019C2.49674 0.956464 2.38613 0.88207 2.26428 0.831301C2.14242 0.780533 2.01171 0.754395 1.8797 0.754395C1.74769 0.754395 1.61698 0.780533 1.49512 0.831301C1.37326 0.88207 1.26266 0.956464 1.1697 1.05019C0.983448 1.23756 0.878906 1.49101 0.878906 1.75519C0.878906 2.01938 0.983448 2.27283 1.1697 2.46019L4.7097 6.00019L1.1697 9.54019C0.983448 9.72756 0.878906 9.98101 0.878906 10.2452C0.878906 10.5094 0.983448 10.7628 1.1697 10.9502C1.26314 11.0429 1.37395 11.1162 1.49579 11.166C1.61763 11.2157 1.74809 11.241 1.8797 11.2402C2.01131 11.241 2.14177 11.2157 2.26361 11.166C2.38544 11.1162 2.49626 11.0429 2.5897 10.9502L6.8297 6.71019C6.92343 6.61723 6.99782 6.50663 7.04859 6.38477C7.09936 6.26291 7.1255 6.1322 7.1255 6.00019C7.1255 5.86818 7.09936 5.73747 7.04859 5.61562C6.99782 5.49376 6.92343 5.38316 6.8297 5.29019Z"
|
||||
fill="#141414"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArrowRight
|
||||
@ -2,7 +2,7 @@ const ArrowUp = () => {
|
||||
|
||||
return (
|
||||
<svg style={{margin:"auto", fontWeight: "bold"}} xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#141414" className="bi bi-chevron-up" viewBox="0 0 16 16">
|
||||
<path stroke="#141414" stroke-width="1" fillRule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
|
||||
<path stroke="#141414" strokeWidth="1" fillRule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
12
src/components/icons/IconHide.tsx
Normal file
12
src/components/icons/IconHide.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react'
|
||||
|
||||
const IconHide = () => {
|
||||
return (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 6L6 18" stroke="#2F2F2F" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M6 6L18 18" stroke="#2F2F2F" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconHide
|
||||
@ -1,19 +1,19 @@
|
||||
<svg width="240" height="268" viewBox="0 0 240 268" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.6">
|
||||
<rect x="170.045" y="167.357" width="32.2656" height="16.5938" rx="4" transform="rotate(-16 170.045 167.357)" stroke="#CDF4DD" stroke-width="4"/>
|
||||
<path d="M170.168 201.23C167.732 192.736 172.644 183.875 181.138 181.439L199.117 176.284C207.611 173.848 216.471 178.76 218.907 187.254L234.907 243.052C236.125 247.299 233.669 251.73 229.422 252.948L196.063 262.513C191.816 263.731 187.386 261.275 186.168 257.028L170.168 201.23Z" stroke="#CDF4DD" stroke-width="4"/>
|
||||
<rect x="170.045" y="167.357" width="32.2656" height="16.5938" rx="4" transform="rotate(-16 170.045 167.357)" stroke="#CDF4DD" strokeWidth="4"/>
|
||||
<path d="M170.168 201.23C167.732 192.736 172.644 183.875 181.138 181.439L199.117 176.284C207.611 173.848 216.471 178.76 218.907 187.254L234.907 243.052C236.125 247.299 233.669 251.73 229.422 252.948L196.063 262.513C191.816 263.731 187.386 261.275 186.168 257.028L170.168 201.23Z" stroke="#CDF4DD" strokeWidth="4"/>
|
||||
<rect x="177.519" y="170.009" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-16 177.519 170.009)" fill="#CDF4DD"/>
|
||||
<rect x="185.494" y="167.723" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-16 185.494 167.723)" fill="#CDF4DD"/>
|
||||
<rect x="193.47" y="165.436" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-16 193.47 165.436)" fill="#CDF4DD"/>
|
||||
</g>
|
||||
<g opacity="0.6">
|
||||
<path d="M36.5973 106.436L39.9701 94.6735L64.4373 101.689L60.9881 113.718C59.4878 118.951 60.973 124.584 64.8578 128.397C69.0553 132.516 70.4233 138.726 68.3451 144.228L55.6959 177.716C54.5922 180.638 51.4315 182.224 48.4292 181.363L11.314 170.721C8.31623 169.861 6.47675 166.848 7.08188 163.789L13.7174 130.242C14.9118 124.203 19.3948 119.345 25.3188 117.671C30.7696 116.131 35.036 111.881 36.5973 106.436Z" stroke="#CDF4DD" stroke-width="4"/>
|
||||
<rect x="42.3359" y="74.5464" width="32" height="19" rx="6" transform="rotate(16 42.3359 74.5464)" stroke="#CDF4DD" stroke-width="4"/>
|
||||
<path d="M36.5973 106.436L39.9701 94.6735L64.4373 101.689L60.9881 113.718C59.4878 118.951 60.973 124.584 64.8578 128.397C69.0553 132.516 70.4233 138.726 68.3451 144.228L55.6959 177.716C54.5922 180.638 51.4315 182.224 48.4292 181.363L11.314 170.721C8.31623 169.861 6.47675 166.848 7.08188 163.789L13.7174 130.242C14.9118 124.203 19.3948 119.345 25.3188 117.671C30.7696 116.131 35.036 111.881 36.5973 106.436Z" stroke="#CDF4DD" strokeWidth="4"/>
|
||||
<rect x="42.3359" y="74.5464" width="32" height="19" rx="6" transform="rotate(16 42.3359 74.5464)" stroke="#CDF4DD" strokeWidth="4"/>
|
||||
<rect x="70.6162" y="92.0181" width="4" height="32" rx="2" transform="rotate(106 70.6162 92.0181)" fill="#CDF4DD"/>
|
||||
</g>
|
||||
<g opacity="0.6">
|
||||
<path d="M186.052 83.4148L179.934 94.0117L157.891 81.2851L164.148 70.448C166.869 65.7341 166.791 59.9085 163.944 55.2694C160.868 50.2567 161.043 43.9002 164.39 39.0645L184.765 9.63163C186.543 7.06354 189.994 6.28885 192.699 7.85054L226.137 27.156C228.837 28.7153 229.893 32.0836 228.566 34.9057L214.012 65.8511C211.392 71.4217 205.867 75.0504 199.714 75.2416C194.052 75.4176 188.885 78.5093 186.052 83.4148Z" stroke="#CDF4DD" stroke-width="4"/>
|
||||
<rect x="172.769" y="112.969" width="32" height="19" rx="6" transform="rotate(-150 172.769 112.969)" stroke="#CDF4DD" stroke-width="4"/>
|
||||
<path d="M186.052 83.4148L179.934 94.0117L157.891 81.2851L164.148 70.448C166.869 65.7341 166.791 59.9085 163.944 55.2694C160.868 50.2567 161.043 43.9002 164.39 39.0645L184.765 9.63163C186.543 7.06354 189.994 6.28885 192.699 7.85054L226.137 27.156C228.837 28.7153 229.893 32.0836 228.566 34.9057L214.012 65.8511C211.392 71.4217 205.867 75.0504 199.714 75.2416C194.052 75.4176 188.885 78.5093 186.052 83.4148Z" stroke="#CDF4DD" strokeWidth="4"/>
|
||||
<rect x="172.769" y="112.969" width="32" height="19" rx="6" transform="rotate(-150 172.769 112.969)" stroke="#CDF4DD" strokeWidth="4"/>
|
||||
<rect x="149.557" y="89.1743" width="4" height="32" rx="2" transform="rotate(-60 149.557 89.1743)" fill="#CDF4DD"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
@ -1,21 +1,21 @@
|
||||
<svg width="237" height="252" viewBox="0 0 237 252" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.6">
|
||||
<rect x="196.607" y="142.667" width="32.2656" height="16.5938" rx="4" transform="rotate(16.8391 196.607 142.667)" stroke="#CDF4DD" stroke-width="4"/>
|
||||
<path d="M178.342 171.193C180.901 162.736 189.833 157.955 198.291 160.514L216.192 165.932C224.649 168.492 229.431 177.424 226.871 185.881L210.055 241.439C208.776 245.668 204.31 248.059 200.081 246.779L166.866 236.726C162.637 235.446 160.246 230.98 161.526 226.751L178.342 171.193Z" stroke="#CDF4DD" stroke-width="4"/>
|
||||
<rect x="196.607" y="142.667" width="32.2656" height="16.5938" rx="4" transform="rotate(16.8391 196.607 142.667)" stroke="#CDF4DD" strokeWidth="4"/>
|
||||
<path d="M178.342 171.193C180.901 162.736 189.833 157.955 198.291 160.514L216.192 165.932C224.649 168.492 229.431 177.424 226.871 185.881L210.055 241.439C208.776 245.668 204.31 248.059 200.081 246.779L166.866 236.726C162.637 235.446 160.246 230.98 161.526 226.751L178.342 171.193Z" stroke="#CDF4DD" strokeWidth="4"/>
|
||||
<rect x="201.447" y="148.949" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(16.8391 201.447 148.949)" fill="#CDF4DD"/>
|
||||
<rect x="209.389" y="151.352" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(16.8391 209.389 151.352)" fill="#CDF4DD"/>
|
||||
<rect x="217.33" y="153.756" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(16.8391 217.33 153.756)" fill="#CDF4DD"/>
|
||||
</g>
|
||||
<g opacity="0.6">
|
||||
<rect x="150.723" y="109.167" width="32.2656" height="16.5938" rx="4" transform="rotate(-150 150.723 109.167)" stroke="#CDF4DD" stroke-width="4"/>
|
||||
<path d="M175.004 85.5494C170.586 93.202 160.8 95.824 153.147 91.4058L136.95 82.0542C129.297 77.6359 126.675 67.8505 131.094 60.1978L160.117 9.92772C162.326 6.10138 167.219 4.79038 171.045 6.99952L201.099 24.3511C204.925 26.5602 206.236 31.4529 204.027 35.2793L175.004 85.5494Z" stroke="#CDF4DD" stroke-width="4"/>
|
||||
<rect x="150.723" y="109.167" width="32.2656" height="16.5938" rx="4" transform="rotate(-150 150.723 109.167)" stroke="#CDF4DD" strokeWidth="4"/>
|
||||
<path d="M175.004 85.5494C170.586 93.202 160.8 95.824 153.147 91.4058L136.95 82.0542C129.297 77.6359 126.675 67.8505 131.094 60.1978L160.117 9.92772C162.326 6.10138 167.219 4.79038 171.045 6.99952L201.099 24.3511C204.925 26.5602 206.236 31.4529 204.027 35.2793L175.004 85.5494Z" stroke="#CDF4DD" strokeWidth="4"/>
|
||||
<rect x="147.439" y="101.949" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-150 147.439 101.949)" fill="#CDF4DD"/>
|
||||
<rect x="140.254" y="97.8003" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-150 140.254 97.8003)" fill="#CDF4DD"/>
|
||||
<rect x="133.068" y="93.6519" width="3.6875" height="11.9844" rx="1.84375" transform="rotate(-150 133.068 93.6519)" fill="#CDF4DD"/>
|
||||
</g>
|
||||
<g opacity="0.6">
|
||||
<path d="M32.8015 122.764L35.7266 112.563L56.9458 118.648L53.9545 129.08C52.6533 133.618 53.9413 138.504 57.3104 141.81C60.9508 145.383 62.1371 150.768 60.3348 155.54L49.6241 183.896C48.5204 186.818 45.3597 188.404 42.3573 187.543L11.5784 178.717C8.5806 177.858 6.74113 174.845 7.34625 171.786L12.9588 143.41C13.9947 138.173 17.8826 133.96 23.0201 132.508C27.7474 131.172 31.4475 127.486 32.8015 122.764Z" stroke="#CDF4DD" stroke-width="4"/>
|
||||
<rect x="37.7793" y="95.1074" width="27.7521" height="16.4778" rx="6" transform="rotate(16 37.7793 95.1074)" stroke="#CDF4DD" stroke-width="4"/>
|
||||
<path d="M32.8015 122.764L35.7266 112.563L56.9458 118.648L53.9545 129.08C52.6533 133.618 53.9413 138.504 57.3104 141.81C60.9508 145.383 62.1371 150.768 60.3348 155.54L49.6241 183.896C48.5204 186.818 45.3597 188.404 42.3573 187.543L11.5784 178.717C8.5806 177.858 6.74113 174.845 7.34625 171.786L12.9588 143.41C13.9947 138.173 17.8826 133.96 23.0201 132.508C27.7474 131.172 31.4475 127.486 32.8015 122.764Z" stroke="#CDF4DD" strokeWidth="4"/>
|
||||
<rect x="37.7793" y="95.1074" width="27.7521" height="16.4778" rx="6" transform="rotate(16 37.7793 95.1074)" stroke="#CDF4DD" strokeWidth="4"/>
|
||||
<rect x="62.3047" y="110.26" width="3.46901" height="27.7521" rx="1.7345" transform="rotate(106 62.3047 110.26)" fill="#CDF4DD"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
@ -33,7 +33,9 @@ export const QUERY_KEY = {
|
||||
TAB: 'tab',
|
||||
CATEGORY: 'category',
|
||||
BRAND: 'brand',
|
||||
FEATURED: 'feature'
|
||||
FEATURED: 'feature',
|
||||
SORTBY:'sortby',
|
||||
RECIPES:'recipes'
|
||||
}
|
||||
|
||||
export enum ProductFeature {
|
||||
@ -47,3 +49,4 @@ export const KEY = {
|
||||
ENTER: 'Enter',
|
||||
}
|
||||
|
||||
export const OPTION_ALL = 'all';
|
||||
@ -1,3 +1,47 @@
|
||||
<<<<<<< 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 = [
|
||||
@ -211,5 +255,6 @@ 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
|
||||
},
|
||||
]
|
||||
@ -2,6 +2,7 @@ export const LANGUAGE = {
|
||||
BUTTON_LABEL: {
|
||||
BUY_NOW: 'Buy now',
|
||||
SHOP_NOW: 'Shop now',
|
||||
CONFIRM:'Confirm',
|
||||
ADD_TO_CARD: 'Add to Cart',
|
||||
PREORDER: 'Pre-Order Now',
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user