Merge pull request #23 from KieIO/m4-datnguyen

M4 datnguyen

src/components/common/PaginationCommon/PaginationCommon.tsx

@@ -1,18 +1,19 @@
 import classNames from 'classnames'
 import React, { useEffect, useState } from 'react'
 import { ArrowLeftSmall, ArrowRightSmall } from 'src/components/icons'
+import { DEFAULT_PAGE_SIZE } from 'src/utils/constanst.utils'
 import PaginationItem from './components/PaginationItem'
 import s from './PaginationCommon.module.scss'
 interface PaginationCommonProps {
   defaultCurrent?: number
-  pageSize: number
+  pageSize?: number
   total: number
   onChange?: (page: number, pageSize: number) => void
 }
 
 const PaginationCommon = ({
   total,
-  pageSize,
+  pageSize=DEFAULT_PAGE_SIZE,
   defaultCurrent,
   onChange,
 }: PaginationCommonProps) => {
@@ -54,14 +55,14 @@ const PaginationCommon = ({
           <PaginationItem
             page={index}
             onClick={onPageClick}
-            key={`${index}-item`}
+            key={index}
             active={index === currentPage}
           />
         )
       })}
       <div
         className={classNames(s.item, {
-          [`${s.disable}`]: currentPage >= pageNum - 1,
+          [s.disable]: currentPage >= pageNum - 1,
         })}
         onClick={onNextClick}
       >

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;
         }
     }
 }

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 ;
+    }
+}

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 (
+        <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

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'

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'

src/utils/constanst.utils.ts

@@ -49,4 +49,5 @@ export const KEY = {
     ENTER: 'Enter',
 }
 
-export const OPTION_ALL = 'all';
+export const OPTION_ALL = 'all';
+export const DEFAULT_PAGE_SIZE=20

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
     },
 ]