Infos And Payment Added

src/assets/img/arrow-left-1.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 19.9201L8.47997 13.4001C7.70997 12.6301 7.70997 11.3701 8.47997 10.6001L15 4.08008" stroke="#e0e0e0" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/Calendar/index.css

@@ -10,17 +10,18 @@
   
   .DatePicker__input {
     background: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.4);
-    padding: 0.6em 1.2em;
+    border: 1px solid #e0e0e0;
+    padding:1em 1.2em;
     /* font-family:'iranSans'; */
     text-align: center;
     font-size: 12px;
     border-radius: 7px;
+   color: #00253a;
     
   }
   .DatePicker__input:focus{
-    outline:1px solid #06BACE;
-    color: #06BACE;
+    outline:1px solid #1064cd;
+    color: #1064cd;
   }
   
   .DatePicker__input.-rtl {
@@ -28,10 +29,10 @@
   }
   
   .DatePicker__input::placeholder {
-    color: #979797;
+    color: #aaaaaa
   }
   .DatePicker__input:focus::placeholder{
-    color: #06BACE;
+    color: #1064cd;
   }
   
   .DatePicker__calendarContainer.-top + .DatePicker__calendarArrow {

src/components/RangeDatePicker/index.js

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import DatePicker from "../Calendar/CalendarComponents";
+
+const RangeDatePicker = ({title}) => {
+    const [selectedDayRange, setSelectedDayRange] = useState({
+      from: null,
+      to: null
+    });
+    return (
+      <DatePicker
+        value={selectedDayRange}
+        calendarClassName="range-date-picker"
+        onChange={setSelectedDayRange}
+        inputPlaceholder={title ? title : 'یک بازه زمانی انختاب کنید'}
+        shouldHighlightWeekends
+        locale='fa'
+
+      />
+    );
+  };
+  
+  export default RangeDatePicker;

src/view/addProduct/Main/index.js

@@ -1,7 +1,9 @@
 import React from "react";
 import { Editor } from "react-draft-wysiwyg";
 import AddPic from "../components/addPic";
+import ProductInfos from "../components/infos";
 import Metrics from "../components/metrics";
+import Payment from "../components/payment";
 import './editor.css';
 
 const MainAP = () => {
@@ -23,8 +25,9 @@ const MainAP = () => {
             <div className="flex justify-between w-full">
                 <AddPic />
                 <Metrics />
-                <Metrics />
+                <Payment />
             </div>
+            <ProductInfos />
         </div>
     )
 }

src/view/addProduct/components/addPic.js

@@ -3,11 +3,12 @@ import React, {useState, useEffect} from "react";
 const AddPic = () => {
     const [imageUrl, setImageUrl] = useState([]);
     const [selectedImage, setSelectedImage] = useState(null);
+    const [fakeState, setFakeState] = useState(5);
     
     useEffect(() => {
         if (selectedImage) {
           imageUrl.push(URL.createObjectURL(selectedImage));
-          
+          setFakeState(fakeState + 1)
           console.log(imageUrl)
         }
         
@@ -29,7 +30,7 @@ const AddPic = () => {
                 <div className="flex flex-wrap items-center">
                     {
                        imageUrl.slice(1,imageUrl.length).map((item, index) => (
-                           <img src={item} className="w-16 h-16 m-2 rounded-md"/>
+                           <img src={item} className="w-14 h-14 m-2 rounded-md"/>
                        ))
                     }
                     

src/view/addProduct/components/infos.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from "react";
+import Checkbox from "../../../components/Checkbox";
+import arrow from '../../../assets/img/arrow-left-1.svg';
+import RangeDatePicker from "../../../components/RangeDatePicker";
+
+const ProductInfos = () => {
+    const type = [
+        {
+            id: 0,
+            title: 'لطفا نوع محصول را مشخص کنید'
+        },
+        {
+            id: 1,
+            title: 'ساده'
+        },
+        {
+            id: 2,
+            title: 'متغیر'
+        },
+        {
+            id: 3,
+            title: 'الکترونیکی'
+        },
+        {
+            id: 4,
+            title: 'لورم ایپسوم'
+        },
+    ]
+    const inputs = [
+
+    ]
+    return (
+        <div className="w-full bg-white border mx-2 my-6 rounded-lg border-grayE0  flex flex-col py-6">
+            <h1 className="text-blue3A text-lg font-bold w-full text-right px-4 mb-6 border-r-4 border-blue65">
+                اطلاعات محصول
+            </h1>
+            <div className="flex w-full px-6 justify-between items-center">
+                <select className="bg-white border border-solid border-gray-200 w-1/5 px-3 rounded-lg text-xs text-gray-400 outline-blueCD mx-2 h-12">
+                    {type.map((item) => (
+                        <option key={`TYPE_OF_PRODUCT__${item.id}`}>{item.title}</option>
+                    ))}
+                </select>
+                    <img src={arrow} />
+                    <input type="number" placeholder='قیمت اصلی کالا' className="bg-white border border-grayE0 h-12 w-1/6 outline-none px-2 rounded-md" />
+                    <img src={arrow} />
+                    <input type="number" placeholder='قیمت کالا با تخفیف' className="bg-white border border-grayE0 h-12 w-1/6 outline-none px-2 rounded-md" />
+                    <img src={arrow} />
+                    <RangeDatePicker title='زمانبندی تخفیف' />
+                    <img src={arrow} />
+                    <input type="number" placeholder='موجودی' className="bg-white border border-grayE0 h-12 w-1/6 outline-none px-2 rounded-md" />
+                   
+            </div>
+            <div className="flex w-[80%] mr-[20%] py-4 items-center justify-between pr-[6%] pl-8">
+                    <input type="text" placeholder='شناسه کالا' className="bg-white border border-grayE0 h-12 w-1/2 outline-none px-2 rounded-md" />
+                    <div className="flex items-center font-bold text-gray70">
+                        <Checkbox />
+                        <p>آیا امکان پیش فروش این کالا باشد؟ </p>
+                    </div>
+            </div>
+
+        </div>
+    )
+}
+
+export default ProductInfos;

src/view/addProduct/components/metrics.js

@@ -12,11 +12,11 @@ const Metrics = () => {
             <h1 className="text-blue3A text-lg font-bold w-full text-right px-4 mb-6 border-r-4 border-blue65">
                 وزن و ابعاد محصول
             </h1>
-            <div className="flex flex-wrap">
+            <div className="flex flex-wrap px-4">
                 {
                     inputs.map(
                         (item, index) => (
-                            <div className="w-1/2 p-4 py-2">
+                            <div className="w-1/2 p-2">
                                 <input type="number" placeholder={item} className="bg-white border border-grayE0 h-14 w-full outline-none px-2 rounded-md" />
                             </div>    
                         )

src/view/addProduct/components/payment.js

@@ -0,0 +1,33 @@
+import React, {useState, useEffect} from "react";
+import Checkbox from "../../../components/Checkbox";
+
+const Payment = () => {
+   const inputs = [
+       'آنلاین',
+       'درب محل',
+       'کارت به کارت',
+       'قسطی',
+   ]
+    return(
+        <div className="w-1/3 bg-white border mx-2 rounded-lg border-grayE0  flex flex-col py-6">
+            <h1 className="text-blue3A text-lg font-bold w-full text-right px-4 mb-6 border-r-4 border-blue65">
+                نحوه پرداخت
+            </h1>
+            <div className="flex flex-wrap px-4">
+                {
+                    inputs.map(
+                        (item, index) => (
+                            <div className="w-1/2 p-2 h-14 my-2 flex items-center font-bold" style={{color: '#707070'}}>
+                                <Checkbox name={'paymentCheckBox' + index}/>
+                                <p>{item}</p>
+                            </div>    
+                        )
+                    )
+                }
+            </div>
+           
+        </div>
+    )
+}
+
+export default Payment;

tailwind.config.js

@@ -32,6 +32,7 @@ module.exports = {
         grayFD : '#fdfdfd',
         grayE0 : '#e0e0e0',
         gray81 : '#818181',
+        gray70 : '#707070',
         red82OP: 'rgba(223, 20, 82, 0.08)',
         pinkF5: '#fff1f5',
         pinkD6 : '#ffd6d6',