diff --git a/src/assets/icons/vuesax-linear-group.svg b/src/assets/icons/vuesax-linear-group.svg new file mode 100644 index 0000000..efee704 --- /dev/null +++ b/src/assets/icons/vuesax-linear-group.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/icons/vuesax-linear-shield-tick.svg b/src/assets/icons/vuesax-linear-shield-tick.svg new file mode 100644 index 0000000..f897d79 --- /dev/null +++ b/src/assets/icons/vuesax-linear-shield-tick.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/vuesax-linear-tick-circle.svg b/src/assets/icons/vuesax-linear-tick-circle.svg new file mode 100644 index 0000000..2f17e2a --- /dev/null +++ b/src/assets/icons/vuesax-linear-tick-circle.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/AddToCart/index.js b/src/components/AddToCart/index.js new file mode 100644 index 0000000..14c83bf --- /dev/null +++ b/src/components/AddToCart/index.js @@ -0,0 +1,51 @@ +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 +}) =>{ + const specialities = [ + { + icon: circleTick, + description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`, + }, + { + icon: linearGroup, + description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`, + }, + { + icon: shieldTick, + description: `گارانتی اصالت و سلامت فیزیکی`, + } + ]; + return( +
+ {specialities.map((item, index) => ( +
+ {item.icon && } +

{item.description}

+
+ ))} +
+

+ {price} + تومان

+ { profit &&
با خرید این کالا {profit} تومان سود کنید
} +
+
+ {button} +
+
+ ); +}; + +export default AddToCartCard; \ No newline at end of file diff --git a/src/components/Button/index.js b/src/components/Button/index.js index c93f23c..e4303b3 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -10,6 +10,10 @@ export default function Button({ onClick, selectable, active, + borderType, + twPaddings, + customStyle, + radius }) { return (