From 0b4266be175f0486a477d31a2fd84a1561f3f3ba Mon Sep 17 00:00:00 2001
From: Pkpedram <pkpedram80@gmail.com>
Date: Mon, 21 Feb 2022 18:22:07 +0330
Subject: [PATCH] Tags Done

---
 src/view/addProduct/Sidebar/index.js    |  2 ++
 src/view/addProduct/components/grade.js |  2 +-
 src/view/addProduct/components/tags.js  | 48 +++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 src/view/addProduct/components/tags.js

diff --git a/src/view/addProduct/Sidebar/index.js b/src/view/addProduct/Sidebar/index.js
index c64e8fa..3497c32 100644
--- a/src/view/addProduct/Sidebar/index.js
+++ b/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>
     )
 }
diff --git a/src/view/addProduct/components/grade.js b/src/view/addProduct/components/grade.js
index bc865d5..06f2c33 100644
--- a/src/view/addProduct/components/grade.js
+++ b/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>    
                         )
diff --git a/src/view/addProduct/components/tags.js b/src/view/addProduct/components/tags.js
new file mode 100644
index 0000000..dc0b99b
--- /dev/null
+++ b/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;
\ No newline at end of file