✨ feat: CardItemCheckout

:%s

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>
     </>
   )
 }

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

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

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'