✨ feat: CardItemCheckout

:%s

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'