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

🔨 refactor: ProductList

Browse Source 
:%s
This commit is contained in:
unknown 2021-08-31 16:46:24 +07:00
parent 78813a063c
commit 7e2eb087bd
4 changed files with 175 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
pages/test.tsx
View File

@ -182,6 +182,132 @@ const dataTest = [
price: 'Rp 27.500', price: 'Rp 27.500',
imageSrc: image5.src, imageSrc: image5.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: '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: '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: '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: '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: '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', name: 'Cucumber',
weight: '250g', weight: '250g',
@ -217,6 +343,48 @@ const dataTest = [
price: 'Rp 27.500', price: 'Rp 27.500',
imageSrc: image8.src, imageSrc: image8.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: '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: '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', name: 'Tomato',
weight: '250g', weight: '250g',

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

@ -57,7 +57,8 @@
.cardBot{ .cardBot{
min-height: 4rem; min-height: 4rem;
@apply flex justify-between items-center; @apply flex justify-between items-center;
.cardButton{ .cardIcon{
margin-right: 0.8rem;
} }
} }
} }

6
src/components/common/ProductList/ProductList.module.scss
View File

@ -1,11 +1,11 @@
.wrapper{ .wrapper{
.list{ .list{
max-width: 109.4rem; // max-width: 109.4rem;
@apply flex flex-wrap; @apply flex flex-wrap justify-around;
} }
.pagination{ .pagination{
padding-top: 4.8rem; padding-top: 4.8rem;
max-width: 109.4rem; // max-width: 109.4rem;
@apply flex justify-center items-center ; @apply flex justify-center items-center ;
} }
} }

4
src/components/common/ProductList/ProductList.tsx
View File

@ -15,8 +15,8 @@ const ProductList = ({data}: ProductListProps) => {
<div className={s.wrapper}> <div className={s.wrapper}>
<div className={s.list}> <div className={s.list}>
{ {
data.slice(currentPage*20,(currentPage+1)*20).map((product)=>{ data.slice(currentPage*20,(currentPage+1)*20).map((product,index)=>{
return <ProductCard {...product}/> return <ProductCard {...product} key={index}/>
}) })
} }
</div> </div>