From 5a9e551f28c211a21bd0dfd41e88a3e7ea79900b Mon Sep 17 00:00:00 2001 From: mahdi Date: Sun, 16 Jan 2022 14:35:10 +0330 Subject: [PATCH] update --- src/App.js | 6 +- .../ProductStatusCard/arrow-icon.svg | 11 ++ .../ProductStatusCard/delivery-icon.svg | 11 ++ .../ProductStatusCard/icon-shop.svg | 12 ++ src/components/ProductStatusCard/icon1.svg | 6 + src/components/ProductStatusCard/index.js | 117 ++++++++++++++++++ .../ProductStatusCard/info-circle.svg | 6 + .../ProductStatusCard/shield-tick.svg | 5 + .../ProductStatusCard/tick-circle.svg | 5 + 9 files changed, 177 insertions(+), 2 deletions(-) create mode 100644 src/components/ProductStatusCard/arrow-icon.svg create mode 100644 src/components/ProductStatusCard/delivery-icon.svg create mode 100644 src/components/ProductStatusCard/icon-shop.svg create mode 100644 src/components/ProductStatusCard/icon1.svg create mode 100644 src/components/ProductStatusCard/index.js create mode 100644 src/components/ProductStatusCard/info-circle.svg create mode 100644 src/components/ProductStatusCard/shield-tick.svg create mode 100644 src/components/ProductStatusCard/tick-circle.svg diff --git a/src/App.js b/src/App.js index 7b82a88..71f4e57 100644 --- a/src/App.js +++ b/src/App.js @@ -29,6 +29,7 @@ import ProductImage from "./components/ProductImage"; import VodProduct from "./components/VodProduct"; import VodProductNew from "./components/VodProductNew"; import ProductTab from "./components/ProductTab"; +import ProductStatusCard from "./components/ProductStatusCard"; function App() { return ( @@ -37,7 +38,7 @@ function App() { {/* */} {/* */} {/* */} - + {/* */} {/* */} {/* */} {/* */} @@ -59,7 +60,8 @@ function App() { {/* */} {/* */} {/* */} - + {/* */} + ); diff --git a/src/components/ProductStatusCard/arrow-icon.svg b/src/components/ProductStatusCard/arrow-icon.svg new file mode 100644 index 0000000..930bd30 --- /dev/null +++ b/src/components/ProductStatusCard/arrow-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/ProductStatusCard/delivery-icon.svg b/src/components/ProductStatusCard/delivery-icon.svg new file mode 100644 index 0000000..e4cc601 --- /dev/null +++ b/src/components/ProductStatusCard/delivery-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/ProductStatusCard/icon-shop.svg b/src/components/ProductStatusCard/icon-shop.svg new file mode 100644 index 0000000..564b601 --- /dev/null +++ b/src/components/ProductStatusCard/icon-shop.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/ProductStatusCard/icon1.svg b/src/components/ProductStatusCard/icon1.svg new file mode 100644 index 0000000..b4287d7 --- /dev/null +++ b/src/components/ProductStatusCard/icon1.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/ProductStatusCard/index.js b/src/components/ProductStatusCard/index.js new file mode 100644 index 0000000..28ca70f --- /dev/null +++ b/src/components/ProductStatusCard/index.js @@ -0,0 +1,117 @@ +import React from "react"; + +import arrow from "./arrow-icon.svg"; +import delivery from "./delivery-icon.svg"; +import checked from "./icon1.svg"; +import circle from "./info-circle.svg"; +import shield from "./shield-tick.svg"; +import tick from "./tick-circle.svg"; +import shop from "./icon-shop.svg"; + +const ProductStatusCard = ({ items, productPrice, discountPrice }) => { + console.log(items.alertIcon); + + return ( +
+
+ {items.map((item, index) => ( +
+
+ +
+

+ {item.subtitle} + {item.title} +

+ {item.customerSatisfaction && ( +

+ رضایت خریداران: + + {item.customerSatisfactionPercent} + +

+ )} +
+
+ {item.alertIcon && } +
+ ))} +
+

+ {productPrice} + تومان +

+

+ با خرید این کالا + {discountPrice} + صرفه جویی کنید +

+
+
+ +
+
+
+
+ +
+
+

+ بازگشت بی چون و چرا +

+

+ از اونجایی که ما خیلی خوب هستیم و دوستون داریم در صورتی که از کالایی + خوشتون نیومده میتونید بی قید و شرط پس بدید +

+
+
+
+ ); +}; + +export default ProductStatusCard; + +ProductStatusCard.defaultProps = { + items: [ + { + icon: tick, + title: "توصیه به خرید توسط 4420 نفر", + subtitle: null, + alertIcon: false, + customerSatisfaction: false, + customerSatisfactionPercent: null, + }, + { + icon: shop, + title: " آپادانا ", + subtitle: " فروشنده", + alertIcon: true, + customerSatisfaction: true, + customerSatisfactionPercent: " 91.5 ", + }, + { + icon: delivery, + title: " 20 روز کاری پس از سفارش ", + subtitle: "زمان ارسال", + alertIcon: false, + customerSatisfaction: false, + customerSatisfactionPercent: null, + }, + { + icon: shield, + title: "اصالت و سلامت فیزیکی", + subtitle: "گارانتی ", + alertIcon: true, + customerSatisfaction: false, + customerSatisfactionPercent: null, + }, + ], + + productPrice: " 56/894/000 ", + discountPrice: " 540.000 ", +}; diff --git a/src/components/ProductStatusCard/info-circle.svg b/src/components/ProductStatusCard/info-circle.svg new file mode 100644 index 0000000..4910bd7 --- /dev/null +++ b/src/components/ProductStatusCard/info-circle.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/ProductStatusCard/shield-tick.svg b/src/components/ProductStatusCard/shield-tick.svg new file mode 100644 index 0000000..fd2e0f8 --- /dev/null +++ b/src/components/ProductStatusCard/shield-tick.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/ProductStatusCard/tick-circle.svg b/src/components/ProductStatusCard/tick-circle.svg new file mode 100644 index 0000000..d969ba7 --- /dev/null +++ b/src/components/ProductStatusCard/tick-circle.svg @@ -0,0 +1,5 @@ + + + + +