search box added

src/components/ReactTable3/GlobalFilter.js

@@ -1,6 +1,8 @@
 import React, {useState} from 'react';
 import { useAsyncDebounce } from 'react-table';
 
+import search from "./search-normal.svg";
+
 export const GlobalFilter = ({ filter, setFilter }) => {
 
   const [value, setValue] = useState(filter);
@@ -10,20 +12,24 @@ export const GlobalFilter = ({ filter, setFilter }) => {
   }, 1000)
 
   return (
-      
-    <span>
-
-        جستجو:
-
-        <input
-          value={value || ''}
-          onChange={(e) => {
-            setValue(e.target.value)
-            onChange(e.target.value)
-          }}
-         />
-
-    </span>
-    
+    <div className="flex flex-row-reverse items-center relative w-full">
+      <img
+        src={search}
+        alt=""
+        className="w-1 h-12 absolute left-3"
+      />
+      <input
+        value={value || ''}
+        onChange={(e) => {
+          setValue(e.target.value)
+          onChange(e.target.value)
+        }}
+        type="text"
+        placeholder="نام کالا را جستجو کنید..."
+        className="text-xs rounded-sm pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor	placeholder-gray-400 focus:outline-none"
+      />
+    </div>    
   );
 };
+
+