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

fix: fix loi pagination

Browse Source
This commit is contained in:
quangnhankie 2021-09-07 14:11:51 +07:00
parent fb52871d37
commit c754cf6964
12 changed files with 54 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/test.tsx
View File

@ -6,6 +6,7 @@ import {
import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation';
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 = [
{
@ -63,6 +64,7 @@ export default function Test() {
return (
<>
{/* <RecipesListPage/> */}
<MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>
<MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={BRAND}/>
</>

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

@ -2,10 +2,7 @@
.breadcrumbCommon {
color: var(--text-base);
<<<<<<< HEAD
=======
.currentItem {
cursor: default;
}
>>>>>>> a9f9f06eb9dee2a1ddefe907ff804237a78c5210
}

22
src/components/common/PaginationCommon/PaginationCommon.module.scss
View File

@ -1,22 +0,0 @@
.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
View File

@ -1,74 +0,0 @@
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

21
src/components/common/PaginationCommon/components/PaginationItem.tsx
View File

@ -1,21 +0,0 @@
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

0
src/components/modules/blogs/BlogContent/BlogContent.module.scss Normal file
View File

16
src/components/modules/blogs/BlogContent/BlogContent.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
import { DateTime } from "src/components/common";
interface Props{
image:StaticImageData,
}
const BlogContent = ({}:Props) => {
return (
<>
<DateTime date="APRIL 30, 2021"/>
</>
)
}
export default BlogContent

18
src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx Normal file
View File

@ -0,0 +1,18 @@
import Image from "next/image";
import React from 'react';
interface Props{
image:StaticImageData,
}
const BlogDetailImg = ({image}:Props) => {
return (
<>
<Image src={image} />
</>
)
}
export default BlogDetailImg

BIN
src/components/modules/blogs/BlogDetailImg/img/blogdetail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 709 KiB

1
src/components/modules/blogs/index.ts Normal file
View File

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

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

@ -3,8 +3,7 @@ import React from 'react';
import s from './RecipesList.module.scss';
import RecipesItem from './RecipesItem/RecipesItem';
import { PaginationCommon } from 'src/components/common';
import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon';
interface Props{
recipes:{

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

@ -1,14 +1,11 @@
import classNames from 'classnames';
import React from 'react';
import s from './RecipesListPage.module.scss';
import RecipesList from '../RecipesList/RecipesList';
import { Banner, MenuFilter } from 'src/components/common';
import {MenuNavigation} from 'src/components/common';
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
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 { SelectCommon } from 'src/components/common';
import {RECIPE_DATA_TEST} from '../../../../utils/demo-data';
import RecipesList from '../RecipesList/RecipesList';
import blog1 from './img/blog1.png';
import blog2 from './img/blog2.png';
@ -16,7 +13,7 @@ import blog3 from './img/blog3.png';
import blog4 from './img/blog4.png';
import blog5 from './img/blog5.png';
import blog6 from './img/blog6.png';
import s from './RecipesListPage.module.scss';
const BREADCRUMB = [
{
name: 'Home',
@ -125,12 +122,19 @@ const OPTIONSLECT=[
name:"SORT BY 3"
},
]
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={classNames(s.recipesListPageWrapper)}>
<Banner title={'SPECIAL RECIPE OF THE WEEK'} subtitle={'Last call! Shop deep deals on 100+ bulk picks while you can.'} imgLink={'assets/bannerrecipes.png'} size="large"/>
<Banner data={BANNER}/>
<div className={classNames(s.recipesListPageBreadcrumbDesktop)}>
<BreadcrumbCommon crumbs={BREADCRUMB} />
@ -152,16 +156,16 @@ const RecipesListPage = () => {
<div className={classNames(s.recipesList)}>
<div className={classNames(s.sortByDesktop)}>
<HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
<SelectCommon option={OPTIONSLECT} placeHolder="SORT BY"/>
<SelectCommon option={OPTIONSLECT} />
</div>
<div className={classNames(s.selectMobile)}>
<div>
<label htmlFor="">Categories</label>
<SelectCommon option={CATEGORY} placeHolder="Categories"/>
<SelectCommon option={CATEGORY}/>
</div>
<div>
<label htmlFor="">Sort By</label>
<SelectCommon option={OPTIONSLECT} placeHolder="Sort by"/>
<SelectCommon option={OPTIONSLECT} />
</div>
</div>
<RecipesList recipes={RECIPES}/>