add and update

src/components/Digikala/Offer.js

@@ -3,21 +3,27 @@ import React from "react";
 import leftArrow from "./white-left-arrow.svg";
 import General from "./General.png";
 
-const Offer = () => {
+import oloom4 from "./oloom4.jpg";
+import o2 from "./o2.jpg";
+import o3 from "./o3.jpg";
+import r1 from "./r1.jpg";
+import r2 from "./r2.jpg";
+
+const Offer = ({ products }) => {
   return (
     <section
-      className="my-10 w-7/12 mx-auto rounded-2xl p-5"
+      className="my-10 w-8/12 mx-auto rounded-2xl p-5"
       style={{ backgroundColor: "#ef3a4f" }}
     >
-      <div className="bg-orange-300">
+      <div className="flex flex-row items-center p-2">
         {/* right */}
-        <div className="flex flex-col items-center justify-center bg-yellow-300">
+        <div className="flex flex-col items-center justify-between bg-blue-400  w-2/12">
-          <span className="text-base text-center text-white font-bold">
+          <span className="text-base text-center text-white font-bold leading-8">
-            پیشنهاد
+            پیـــــشنهاد
             <br />
-            شگفت
+            شگــــفت
             <br />
-            انگیز
+            انـــگیز
           </span>
           <img src={General} className="w-28 my-2" />
           <button className="text-sm text-white flex flex-row items-center">
@@ -26,10 +32,46 @@ const Offer = () => {
           </button>
         </div>
         {/* left */}
-        <div className="flex-1 bg-blue-300"></div>
+        <div className="flex-1 w-10/12 flex flex-row items-center rounded-lg bg-white">
+          {products.map((product, index) => (
+            <div className="flex flex-col p-2">
+              <img src={product.image} className="rounded w-40" />
+              <div className="flex flex-row justify-between items-center mt-4">
+                {/* right */}
+                <p className="text-xs text-white bg-red-600 px-2 py-0.5 rounded-lg mr-1">
+                  {product.discount}
+                  <span className="">%</span>
+                </p>
+                {/* left */}
+                <div className="flex flex-row items-center">
+                  <p className="text-sm ml-1">{product.price}</p>
+                  <div className="relative">
+                    <span className="text-xs">توما</span>
+                    <span className="text-xs absolute left-0.5 -top-2">ن</span>
+                  </div>
+                </div>
+              </div>
+              <p
+                className="text-left text-xs line-through my-2 ml-3"
+                style={{ color: "#c0c2c5" }}
+              >
+                559000
+              </p>
+            </div>
+          ))}
+        </div>
       </div>
     </section>
   );
 };
 
 export default Offer;
+
+Offer.defaultProps = {
+  products: [
+    { image: o2, price: 20900000, discount: 7, rangeWidht: 33 },
+    { image: o3, price: 11000000, discount: 2, rangeWidht: 75 },
+    { image: r1, price: 3205000, discount: 70, rangeWidht: 72 },
+    { image: r2, price: 30000, discount: 75, rangeWidht: 96 },
+  ],
+};