Add To Cart Card Version 1.0.0 Pushed

src/components/AddToCart/index.js

@@ -0,0 +1,64 @@
+import React from "react";
+
+import circleTick from '../../assets/icons/vuesax-linear-tick-circle.svg';
+import shieldTick from '../../assets/icons/vuesax-linear-shield-tick.svg';
+import linearGroup from '../../assets/icons/vuesax-linear-group.svg';
+
+
+
+const AddToCartCard = ({
+    numberOfSuggest,
+    sendingTime,
+    button,
+    price,
+    profit,
+    showProduct,
+    productName,
+    productImg,
+    productCat
+}) =>{
+    const specialities = [
+        {
+            icon: circleTick,
+            description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`,
+        },
+        {
+            icon: linearGroup,
+            description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`,
+        },
+        {
+            icon: shieldTick,
+            description: `گارانتی اصالت و سلامت فیزیکی`,
+        }
+    ];
+    return(
+        <div className="felx flex-col bg-grayF7 p-4 pt-0 w-full mx-4 items-center justify-center ">
+            {
+                showProduct && <div className="flex w-full max-w-8 overflow-hidden items-center py-4  m-0 justify-center">
+                        <img src={productImg} style={{maxWidth:'100px'}} className=" bg-grayF4 py-2 px-4 bg-grayF4 rounded ml-4" />
+                        <div className="text-sm">  
+                            <h1 className="text-sm">{productName}</h1>
+                            <p className=" text-xs pt-2 text-blueC0">{productCat}</p>
+                            </div>
+                    </div>
+            }
+            {specialities.map((item, index) => (
+                <div className="flex items-center  p-2 w-full border-0 border-b border-solid border-gray-300">
+                    {item.icon && <img src={item.icon} className="pl-3" />}
+                    <p className="text-sm text-blue52 text-right">{item.description}</p>
+                    </div>
+            ))}
+            <div className="w-full flex flex-col items-center justify-center p-4">
+                <h1 className="text-xl text-gray-500">
+                    <span className=" text-blueC0"> {price} </span> 
+                      تومان </h1>
+                    { profit && <h5 className="text-xs p-2 pb-0 text-blue52">با خرید این کالا {profit} تومان سود کنید</h5>}
+            </div>
+            <div className="w-full flex justify-center">
+                {button}
+            </div>
+        </div>
+    );
+};
+
+export default AddToCartCard;