mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 04:14:18 +00:00
fix: fix conflict next.config.js
This commit is contained in:
commit
fdfb03438b
@ -1,13 +1,11 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
ButtonCommon,
|
||||
Layout, ModalInfo
|
||||
} from 'src/components/common'
|
||||
Layout
|
||||
} from 'src/components/common';
|
||||
import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation';
|
||||
|
||||
import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList'
|
||||
import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList';
|
||||
import { RecipesListPage } from 'src/components/modules/recipes';
|
||||
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
|
||||
|
||||
const CATEGORY = [
|
||||
{
|
||||
name: 'All',
|
||||
@ -64,7 +62,7 @@ export default function Test() {
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <RecipesListPage/> */}
|
||||
<RecipesListPage/>
|
||||
<MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>
|
||||
<MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={BRAND}/>
|
||||
</>
|
||||
|
@ -1,3 +1,4 @@
|
||||
@import '../../../styles/utilities';
|
||||
.authorWarper{
|
||||
@apply flex flex-row items-center;
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
74
src/components/common/PaginationCommon/PaginationCommon.tsx
Normal file
74
src/components/common/PaginationCommon/PaginationCommon.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
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 = ({
|
||||
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
|
@ -59,7 +59,8 @@
|
||||
.cardBot{
|
||||
min-height: 4rem;
|
||||
@apply flex justify-between items-center;
|
||||
.cardButton{
|
||||
.cardIcon{
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
11
src/components/common/ProductList/ProductList.module.scss
Normal file
11
src/components/common/ProductList/ProductList.module.scss
Normal file
@ -0,0 +1,11 @@
|
||||
.wrapper{
|
||||
.list{
|
||||
// max-width: 109.4rem;
|
||||
@apply flex flex-wrap justify-around;
|
||||
}
|
||||
.pagination{
|
||||
padding-top: 4.8rem;
|
||||
// max-width: 109.4rem;
|
||||
@apply flex justify-center items-center ;
|
||||
}
|
||||
}
|
30
src/components/common/ProductList/ProductList.tsx
Normal file
30
src/components/common/ProductList/ProductList.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import React, { useState } from 'react'
|
||||
import PaginationCommon from '../PaginationCommon/PaginationCommon'
|
||||
import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'
|
||||
import s from "./ProductList.module.scss"
|
||||
interface ProductListProps {
|
||||
data: ProductCardProps[]
|
||||
}
|
||||
|
||||
const ProductList = ({data}: ProductListProps) => {
|
||||
const [currentPage, setCurrentPage] = useState(0)
|
||||
const onPageChange = (page:number) => {
|
||||
setCurrentPage(page)
|
||||
}
|
||||
return (
|
||||
<div className={s.wrapper}>
|
||||
<div className={s.list}>
|
||||
{
|
||||
data.slice(currentPage*20,(currentPage+1)*20).map((product,index)=>{
|
||||
return <ProductCard {...product} key={index}/>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<div className={s.pagination}>
|
||||
<PaginationCommon total={data.length} pageSize={20} onChange={onPageChange}/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductList
|
@ -30,6 +30,7 @@ export { default as SelectCommon} from './SelectCommon/SelectCommon'
|
||||
export { default as ModalCommon} from './ModalCommon/ModalCommon'
|
||||
export { default as ModalConfirm} from "./ModalConfirm/ModalConfirm"
|
||||
export { default as ModalInfo} from "./ModalInfo/ModalInfo"
|
||||
export { default as ProductList} from "./ProductList/ProductList"
|
||||
export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo'
|
||||
export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
|
||||
export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'
|
||||
|
@ -15,6 +15,8 @@ export { default as IconGoogleColor } from './IconGoogleColor'
|
||||
export { default as IconApple } from './IconApple'
|
||||
export { default as ArrowLeft } from './ArrowLeft'
|
||||
export { default as ArrowRight } from './ArrowRight'
|
||||
export { default as ArrowLeftSmall } from './ArrowLeftSmall'
|
||||
export { default as ArrowRightSmall } from './ArrowRightSmall'
|
||||
export { default as Close } from './Close'
|
||||
export { default as IconPassword } from './IconPassword'
|
||||
export { default as IconPasswordCross } from './IconPasswordCross'
|
||||
|
@ -112,11 +112,9 @@ module.exports = {
|
||||
'sm-only': {'min': '0', 'max': '767px'},
|
||||
'sm': '640px',
|
||||
// => @media (min-width: 640px) { ... }
|
||||
|
||||
'md-only': {'min': '768px', 'max': '1023px'},
|
||||
'md': '768px',
|
||||
// => @media (min-width: 768px) { ... }
|
||||
|
||||
'lg-only': {'min': '1024px', 'max': '1279px'},
|
||||
'lg': '1024px',
|
||||
// => @media (min-width: 1024px) { ... }
|
||||
|
Loading…
x
Reference in New Issue
Block a user