Will-Frontend

package.json

@@ -19,7 +19,7 @@
     "glob": "^11.0.0",
     "lru-cache": "^11.0.1",
     "postcss-resolve-url": "^0.0.1",
-    "react": "^19.0.0",
+    "react": "^18.3.1",
     "react-cookie": "^7.2.2",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.2",

src/App.tsx

@@ -4,12 +4,12 @@ import "./style/App.css";
 import Home from "./shared/pages/Home.tsx";
 import PageNotFound from "./shared/pages/404.tsx";
 import MainNavigation from "./shared/components/Navigation/MainNavigation.tsx";
-import Jobs from "./opportunities/pages/Jobs.js";
+import Jobs from "./opportunities/pages/Jobs.tsx";
 import Departments from "./staff/pages/Departments.tsx";
 import StaffPage from "./staff/pages/Staff.tsx";
 import Department from "./staff/pages/Department.tsx";
 import CreatePost from "./staff/pages/CreatePost.tsx";
-import IndividualPost from "./opportunities/pages/IndividualPost.js";
+import IndividualPost from "./opportunities/pages/IndividualPost.tsx";
 import ProfilePage from "./shared/pages/Profile.tsx";
 import LoginRedirection from "./auth/Login.tsx";
 import LogoutRedirection from "./auth/Logout.tsx";

src/opportunities/components/FiltersField.tsx

@@ -0,0 +1,50 @@
+import React, {useState, useEffect} from "react";
+import SmallTextButton from "./SmallTextButton.tsx";
+import SearchBar from "./SearchBar.tsx";
+import GroupedComponents from "../../shared/components/UIElements/GroupedComponents";
+import HorizontalIconButton from "./HorizontalIconButton.tsx";
+import { PiSlidersHorizontal } from "react-icons/pi";
+import { MdCancel } from "react-icons/md";
+
+const FiltersField = ({ clearFilters, deleteFilter, filters, setPopUpMenu}) => {
+
+  return (
+    <div>
+      <hr />
+      <div className="px-3 max-h-20 flex">
+        <div className="flex gap-2 w-full">
+          <SearchBar />
+
+          <SmallTextButton className="" onClick={setPopUpMenu} special={true}>
+            <PiSlidersHorizontal />
+            All Filters
+            <PiSlidersHorizontal />
+          </SmallTextButton>
+
+          {/* Fix rendering with new filters = [ [],[],[] ]*/}
+          <GroupedComponents gap={2}>
+            {filters[1].map((filter) => {
+              return(
+                <HorizontalIconButton
+                  onClick={deleteFilter}
+                  icon={<MdCancel />}
+                  key={filter}
+                  special={false}
+                >
+                  {filter}
+                </HorizontalIconButton>
+              )
+            })}
+          </GroupedComponents>
+        </div>
+
+        <SmallTextButton className="flex flex-right" onClick={clearFilters} special={true}>
+          Clear
+        </SmallTextButton>
+      </div>
+      <hr />
+    </div>
+  );
+};
+
+export default FiltersField;