= pageNum - 1,
+ [s.disable]: currentPage >= pageNum - 1,
})}
onClick={onNextClick}
>
diff --git a/src/components/common/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss
index 73be21ab1..cffbe063b 100644
--- a/src/components/common/ProductCard/ProductCard.module.scss
+++ b/src/components/common/ProductCard/ProductCard.module.scss
@@ -59,7 +59,8 @@
.cardBot{
min-height: 4rem;
@apply flex justify-between items-center;
- .cardButton{
+ .cardIcon{
+ margin-right: 0.8rem;
}
}
}
\ No newline at end of file
diff --git a/src/components/common/ProductList/ProductList.module.scss b/src/components/common/ProductList/ProductList.module.scss
new file mode 100644
index 000000000..c49696ea5
--- /dev/null
+++ b/src/components/common/ProductList/ProductList.module.scss
@@ -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 ;
+ }
+}
\ No newline at end of file
diff --git a/src/components/common/ProductList/ProductList.tsx b/src/components/common/ProductList/ProductList.tsx
new file mode 100644
index 000000000..7428e3a63
--- /dev/null
+++ b/src/components/common/ProductList/ProductList.tsx
@@ -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 (
+
+
+ {
+ data.slice(currentPage*20,(currentPage+1)*20).map((product,index)=>{
+ return
+ })
+ }
+
+
+
+ )
+}
+
+export default ProductList
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index d7095de6f..56896f790 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -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 CardBlog} from './CardBlog/CardBlog'
export { default as RelevantBlogPosts} from './RelevantBlogPosts/RelevantBlogPosts'
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index d773a0b03..36c2f5c64 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -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'
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index 0e901ff04..1522e477f 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -49,4 +49,5 @@ export const KEY = {
ENTER: 'Enter',
}
-export const OPTION_ALL = 'all';
\ No newline at end of file
+export const OPTION_ALL = 'all';
+export const DEFAULT_PAGE_SIZE=20
\ No newline at end of file
diff --git a/src/utils/demo-data.ts b/src/utils/demo-data.ts
index 97222b2e9..64c8128ae 100644
--- a/src/utils/demo-data.ts
+++ b/src/utils/demo-data.ts
@@ -1,47 +1,3 @@
-<<<<<<< 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 = [
@@ -255,6 +211,5 @@ 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
},
]
\ No newline at end of file