UI improvements.

src/App.js

@@ -22,6 +22,7 @@ function App() {
     [filterCheckbox, setFilterCheckbox] = useState([true, true, true]),
     [sortBy, setSortBy] = useState(1),
     [loader, setLoader] = useState(false),
+    [path, setPath] = useState("/"),
     [lightMode, setLightMode] = useState(
       localStorage.getItem("light-mode") === "true"
     ),
@@ -55,6 +56,11 @@ function App() {
     setToggle(!toggle);
   }
 
+  function SetPath(pathname) {
+    setPath(pathname);
+    console.log(path)
+  }
+
   const filteredData = filter(data, searchQuery, filterCheckbox);
 
   async function fetchData() {
@@ -71,6 +77,11 @@ function App() {
     // eslint-disable-next-line
   }, [sortBy, filterCheckbox]);
 
+  useEffect(() => {
+    const currentURL = new URL(window.location.href);
+    SetPath(currentURL.pathname);
+  })
+
   useEffect(() => {
     fetchData();
     // eslint-disable-next-line
@@ -107,7 +118,7 @@ function App() {
           <input
             className="search"
             type="search"
-            placeholder="&#xf002; Search"
+            placeholder={` Search "${path}"`}
             onChange={search}
           />
 
@@ -159,6 +170,7 @@ function App() {
           element={
             <div className="content">
               <List
+                SetPath={() => SetPath()}
                 lightMode={lightMode}
                 SetLoader={SetLoader}
                 data={filteredData}
@@ -174,6 +186,7 @@ function App() {
           path="tags/:tagId"
           element={
             <Tags
+              SetPath={() => SetPath()}
               lightMode={lightMode}
               SetLoader={SetLoader}
               data={filteredData}
@@ -188,6 +201,7 @@ function App() {
           path="collections/:collectionId"
           element={
             <Collections
+              SetPath={() => SetPath()}
               lightMode={lightMode}
               SetLoader={SetLoader}
               data={filteredData}