Tags Done

src/view/addProduct/Sidebar/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import Grades from "../components/grade";
+import TagsInput from "../components/tags";
 
 
 const SideAP = () => {
@@ -20,6 +21,7 @@ const SideAP = () => {
 
             </div>
             <Grades />
+            <TagsInput />
         </div>
     )
 }

src/view/addProduct/components/grade.js

@@ -20,7 +20,7 @@ const Grades = () => {
                     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}/>
+                                <Checkbox name={'GradeCheckBox' + index}/>
                                 <p className="mr-2">{item}</p>
                             </div>    
                         )

src/view/addProduct/components/tags.js

@@ -0,0 +1,48 @@
+import React, {useState, useEffect} from "react";
+
+const TagsInput = () => {
+    const [tags, setTags] = useState([]);
+    const [tag, setTag] = useState(null);
+    const [fakeState, setFakeState] = useState(5);
+    
+    useEffect(() => {
+        if (tag) {
+          tags.push(tag);
+          setFakeState(fakeState + 1)
+          console.log(tags)
+        }
+        
+      }, [tag]);
+    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  px-4">
+            <input type="text"  className="bg-white border border-grayE0 h-12 w-full outline-none px-2 ml-2 rounded-md" id="tagInput" onKeyDown={(e) => {if(e.key == 'Enter'){ setTag(e.target.value); document.getElementById('tagInput').value = null}}}/>
+            <button className="bg-grayE0 w-24 font-bold text-gray-600 rounded-md" onClick={() => {setTag(document.getElementById('tagInput').value); document.getElementById('tagInput').value = null}}>
+                افزودن
+            </button>
+
+            </div>
+            <div className="w-full px-4 flex flex-wrap mt-2">
+                {
+                    tags.map(
+                        (item, index) => (
+                            <div className="bg-gray-200 py-1 flex items-center justify-center px-4 m-1 rtl rounded-md">
+
+                                <p>{item}</p>
+                                <p className="mr-1">x</p>
+                            
+                            </div>
+                        )
+                    )
+                }
+            </div>
+
+           
+        </div>
+    )
+}
+
+export default TagsInput;