Submit Product And Grades Made

src/view/addProduct/Sidebar/index.js

@@ -1,11 +1,26 @@
 import React from "react";
+import Grades from "../components/grade";
 
 
 const SideAP = () => {
     return (
-        <div className=" w-full bg-green-200">
+        <div className=" flex flex-col pl-4  w-full items-center">
+            <div className="bg-white border w-full mx-2 mb-4 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="w-full px-6 flex rtl justify-between">
+                    <button className="w-1/2 border border-blueED rounded-lg  font-bold text-blueED py-4 ml-2" style={{background: 'rgba(16, 100, 205, 0.24)'}}>
+                    ذخیره در پیشنویس
+                    </button>
+                    <button className="w-1/2 border border-blueCD rounded-lg  font-bold text-white py-4 mr-2 bg-blueCD">
+                    انشتار محصول
+                    </button>
+                </div>
 
             </div>
+            <Grades />
+        </div>
     )
 }
 

src/view/addProduct/components/grade.js

@@ -0,0 +1,35 @@
+import React, {useState, useEffect} from "react";
+import Checkbox from "../../../components/Checkbox";
+
+const Grades = () => {
+   const inputs = [
+       'اول',
+       'دوم',
+       'سوم',
+       'هفتم',
+       'هشتم',
+       'نهم',
+   ]
+    return(
+        <div className="w-full rtl bg-white border mx-2 my-4 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  my-1 flex items-center text-lg font-bold" style={{color: '#707070'}}>
+                                <Checkbox name={'paymentCheckBox' + index}/>
+                                <p className="mr-2">{item}</p>
+                            </div>    
+                        )
+                    )
+                }
+            </div>
+           
+        </div>
+    )
+}
+
+export default Grades;

src/view/addProduct/index.js

@@ -4,7 +4,7 @@ import SideAP from "./Sidebar";
 
 const AddProduct = () => {
     return(
-        <div className="w-[96%] h-screen overflow-x-hidden overflow-scroll bg-grayFD flex items-start mt-20 py-10 justify-center">
+        <div className="w-[96%] h-screen  bg-grayFD flex items-start mt-20 py-10 justify-center">
             <div className="w-1/4">
             <SideAP />
             </div>

tailwind.config.js

@@ -45,6 +45,7 @@ module.exports = {
         blueFF : '#f2f9ff',
         blue65 : '#65a9ff',
         blueE3 : '#4c7fe3',
+        blueED : '#4690ed',
         blueDF : '#14b5df',
         blue52 : '#132c52',
         blue3A : '#00253a',