Filters modal popup

src/web/src/App.tsx

@@ -36,6 +36,7 @@ import {
    ScrollToTop,
    GuestPage,
    PrivatePolicy,
+   ProfileSearch,
    TOS,
    ManagePosts,
    EditPosts,
@@ -214,6 +215,7 @@ function App() {
                ></Route>
                <Route path="/resetpassword" element={<ResetPassword />}></Route>
                <Route path="/privatepolicy" element={<PrivatePolicy />}></Route>
+               <Route path="/profilesearch" element={<ProfileSearch />}></Route>
                {role === 'admin' && Verified && (
                   <Route element={<RequireAuth allowedRoles={['admin']} />}>
                      <Route path="/admin" element={<AdminHome />}></Route>

src/web/src/Components.ts

@@ -84,5 +84,7 @@ export { default as FollowingSideNav } from './Components/global/sidebar/Followi
 export { default as PostPageSkeleton } from './Components/post/PostPageSkeleton';
 export { default as LeaderboardPosition } from './Components/profile/LeaderboardPosition';
 export { default as VerificationMessage } from './Components/profile/VerificationMessage';
+export { default as FiltersPopup } from './Components/auth/FiltersPopup';
+export { default as ProfileSearch } from './Pages/user/ProfileSearch';
 export { default as MobileComments } from './Components/post/MobileComments';
 export { default as ZoomableImage } from './Components/post/ZoomableImage';

src/web/src/Components/auth/FiltersPopup.tsx

@@ -0,0 +1,198 @@
+import React, { useState } from 'react';
+
+interface FiltersPopupProps {
+   onClose: () => void;
+   selectedGame: string;
+   onSubmit: (filters: Filters) => void;
+}
+
+interface Filters {
+   [key: string]: string[];
+}
+
+type FilterCategories =
+   | 'mapName'
+   | 'teamSide'
+   | 'grenadeType'
+   | 'jumpThrow'
+   | 'valorantAgent';
+
+const initialFilters: Filters = {
+   teamSide: [],
+   mapName: [],
+   grenadeType: [],
+   jumpThrow: [],
+   valorantAgent: [],
+};
+
+const FiltersPopup: React.FC<FiltersPopupProps> = ({
+   onClose,
+   selectedGame,
+   onSubmit,
+}) => {
+   const [filters, setFilters] = useState<Filters>(initialFilters);
+
+   // Add value in FilterCategory only if it is not yet toggled
+   const toggleCheckbox = (category: FilterCategories, value: string) => {
+      setFilters((prevFilters) => {
+         const currVal = prevFilters[category];
+         if (currVal.includes(value)) {
+            return {
+               ...prevFilters,
+               [category]: currVal.filter((v) => v !== value),
+            };
+         } else {
+            return {
+               ...prevFilters,
+               [category]: [...currVal, value],
+            };
+         }
+      });
+   };
+
+   // Format each checkbox - e.g. hover effects
+   const renderCheckboxes = (
+      title: string,
+      category: FilterCategories,
+      options: string[],
+   ) => (
+      <div>
+         <h3 className="text-base/loose font-semibold">{title}</h3>
+         {options.map((option) => (
+            <label
+               key={option}
+               className="flex items-center mb-2 cursor-pointer"
+            >
+               <input
+                  type="checkbox"
+                  checked={filters[category].includes(option)}
+                  onChange={() => toggleCheckbox(category, option)}
+                  className="appearance-none h-4 w-4 border border-gray-300 rounded checked:bg-blue-500 checked:border-transparent focus:outline-none mr-2 cursor-pointer hover:border-blue-500"
+               />
+               <span className="text-white">{option}</span>
+            </label>
+         ))}
+      </div>
+   );
+
+   const pressedSubmit = () => {
+      onSubmit(filters);
+      onClose();
+   };
+
+   return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 rounded-xl">
+         <div className="bg-gray-900 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 divide-y divide-gray-800 text-white w-full md:w-96">
+            <div className="flex items-center justify-between p-4 border-b">
+               <h2 className="text-lg font-medium">Filters</h2>
+               <button
+                  className="p-2 rounded-full hover:bg-gray-200"
+                  onClick={onClose}
+               >
+                  <svg
+                     className="w-5 h-5 text-gray-600"
+                     fill="none"
+                     stroke="currentColor"
+                     viewBox="0 0 24 24"
+                     xmlns="http://www.w3.org/2000/svg"
+                  >
+                     <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M6 18L18 6M6 6l12 12"
+                     />
+                  </svg>
+               </button>
+            </div>
+            <div className="max-h-96 overflow-y-auto p-4">
+               {selectedGame === 'Valorant' && (
+                  <>
+                     {renderCheckboxes('Side', 'teamSide', [
+                        'Attacker',
+                        'Defender',
+                     ])}
+                     {renderCheckboxes('Map', 'mapName', [
+                        'abyss',
+                        'ascent',
+                        'bind',
+                        'breeze',
+                        'fracture',
+                        'haven',
+                        'icebox',
+                        'lotus',
+                        'pearl',
+                        'split',
+                        'sunset',
+                     ])}
+                     {renderCheckboxes('Agent', 'valorantAgent', [
+                        'Brimstone',
+                        'Phoenix',
+                        'Sage',
+                        'Sova',
+                        'Viper',
+                        'Cypher',
+                        'Reyna',
+                        'Killjoy',
+                        'Breach',
+                        'Omen',
+                        'Jett',
+                        'Raze',
+                        'Skye',
+                        'Yoru',
+                        'Astra',
+                        'KAY/O',
+                        'Chamber',
+                        'Neon',
+                        'Fade',
+                        'Harbor',
+                        'Gekko',
+                        'Deadlock',
+                        'Iso',
+                        'Clove',
+                        'Vyse',
+                     ])}
+                  </>
+               )}
+               {selectedGame === 'CS2' && (
+                  <>
+                     {renderCheckboxes('Side', 'teamSide', ['T', 'CT'])}
+                     {renderCheckboxes('Map', 'mapName', [
+                        'mirage',
+                        'inferno',
+                        'nuke',
+                        'overpass',
+                        'vertigo',
+                        'ancient',
+                        'anubis',
+                        'dust2',
+                     ])}
+                     {renderCheckboxes('Grenade', 'grenadeType', [
+                        'he',
+                        'smoke',
+                        'flashbangs',
+                        'decoy',
+                        'molotov',
+                        'incendiary',
+                     ])}
+                     {renderCheckboxes('Jumpthrow?', 'jumpThrow', [
+                        'YES',
+                        'NO',
+                     ])}
+                  </>
+               )}
+            </div>
+            <div className="p-4 border-t">
+               <button
+                  onClick={pressedSubmit}
+                  className="w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+               >
+                  Submit
+               </button>
+            </div>
+         </div>
+      </div>
+   );
+};
+
+export default FiltersPopup;