From 06b5b23d01c7a1f979573e619a03a7af0b48a7dc Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Wed, 1 Sep 2021 13:41:07 +0700
Subject: [PATCH] :sparkles: feat: CardItemCheckout

:%s
---
 pages/test.tsx                                | 15 +++++-----
 .../CardItemCheckout.module.scss              | 29 +++++++++++++++++++
 .../CardItemCheckout/CardItemCheckout.tsx     | 29 +++++++++++++++++++
 src/components/common/index.ts                |  1 +
 4 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 src/components/common/CardItemCheckout/CardItemCheckout.module.scss
 create mode 100644 src/components/common/CardItemCheckout/CardItemCheckout.tsx

diff --git a/pages/test.tsx b/pages/test.tsx
index a0d99978c..24d55e9ac 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import {
   ButtonCommon,
+  CardItemCheckout,
   Layout,
   ModalCommon,
   ModalConfirm,
@@ -19,7 +20,7 @@ const dataTest = [
     weight: '250g',
     category: 'VEGGIE',
     price: 'Rp 27.500',
-    imageSrc: image5.src,
+    imageSrc: image7.src,
   },
   {
     name: 'Tomato',
@@ -410,12 +411,12 @@ export default function Test() {
   }
   return (
     <>
-      <ButtonCommon onClick={onOpen}>open</ButtonCommon>
-      <ModalInfo visible={visible} onClose={onClose}>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi qui, esse eos nobis soluta suscipit aliquid nostrum corporis. Nihil eligendi similique recusandae minus mollitia aliquam, molestias fugit tenetur voluptatibus maiores et. Quaerat labore corporis inventore nostrum, amet autem exercitationem eligendi?
-      </ModalInfo>
-      <PaginationCommon total={40} pageSize={10}/>
-      <ProductList data={dataTest}/>
+      <CardItemCheckout {...dataTest[0]} quantity={2}/>
+      <div className="w-full" >
+        <ButtonCommon>
+          test
+        </ButtonCommon>
+      </div>
     </>
   )
 }
diff --git a/src/components/common/CardItemCheckout/CardItemCheckout.module.scss b/src/components/common/CardItemCheckout/CardItemCheckout.module.scss
new file mode 100644
index 000000000..374529453
--- /dev/null
+++ b/src/components/common/CardItemCheckout/CardItemCheckout.module.scss
@@ -0,0 +1,29 @@
+.warpper{
+    max-width: 49.9rem;
+    max-height: 12rem;
+    padding:1.6rem 0;
+    @apply flex items-center;
+    .image{
+        min-width: 13.3rem;
+        max-width: 8.8rem;
+        margin: 0.8rem;
+        @apply flex justify-center items-center;
+        img{
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .right{
+        width: 100%;
+        .name{
+            color: var(--text-active);
+            margin-bottom: 0.5erm;
+        }
+        .quantity {
+            @apply flex justify-between text-label;
+            .price{
+                color: var(--text-base);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/CardItemCheckout/CardItemCheckout.tsx b/src/components/common/CardItemCheckout/CardItemCheckout.tsx
new file mode 100644
index 000000000..dd9fb14c5
--- /dev/null
+++ b/src/components/common/CardItemCheckout/CardItemCheckout.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import s from "./CardItemCheckout.module.scss"
+import { ProductProps } from 'src/utils/types.utils'
+interface CardItemCheckoutProps extends ProductProps {
+    quantity:number
+}
+
+const CardItemCheckout = ({imageSrc,name,price,weight,quantity,category}: CardItemCheckoutProps) => {
+    return (
+        <div className={s.warpper}>
+            <div className={s.image}>
+                <img src={imageSrc} alt="image" />
+            </div>
+            <div className={s.right}>
+                <div className={s.name}>
+                    {`${name} (${weight})`}
+                </div>
+                <div className={s.quantity}>
+                    Quantity: 
+                    <div className={s.price}>
+                        {`${quantity} x ${price}`}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CardItemCheckout
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index f3d73ad96..b4d2591cb 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -33,3 +33,4 @@ 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 CardItemCheckout} from './CardItemCheckout/CardItemCheckout'