Add bio/description filter option to search

- Add 'Description' option to search criteria dropdown
- Implement bio search logic with fuzzy matching and fallback
- Include bio matches in relevance sorting algorithm
- Support searching through user descriptions/bios
- Maintain consistent search experience across all filter types

Author: 7sg56

src/Homepage.jsx

@@ -280,6 +280,28 @@ function App() {
             });
           }
         }
+      } else if (criteria === 'bio') {
+        // Enhanced bio/description search with fuzzy matching
+        if (fuse) {
+          const bioFuse = new Fuse(combinedData, {
+            keys: ['bio'],
+            threshold: 0.3,
+            includeScore: true,
+          });
+          const fuseResults = bioFuse.search(value);
+          filteredResults = fuseResults.map((result) => result.item);
+
+          // Fallback to exact match if no fuzzy results
+          if (filteredResults.length === 0) {
+            filteredResults = combinedData.filter((user) => {
+              return normalizeString(user.bio || '').includes(normalizeString(value));
+            });
+          }
+        } else {
+          filteredResults = combinedData.filter((user) => {
+            return normalizeString(user.bio || '').includes(normalizeString(value));
+          });
+        }
       } else if (criteria === 'location') {
         // Enhanced location search with fuzzy matching
         if (fuse) {
@@ -399,6 +421,13 @@ function App() {
         if (aSocialExact && !bSocialExact) return -1;
         if (!aSocialExact && bSocialExact) return 1;
 
+        // Check for exact matches in bio/description
+        const aBioExact = normalizeString(a.bio || '').includes(searchValue);
+        const bBioExact = normalizeString(b.bio || '').includes(searchValue);
+
+        if (aBioExact && !bBioExact) return -1;
+        if (!aBioExact && bBioExact) return 1;
+
         // Finally, sort alphabetically by name
         return a.name.localeCompare(b.name);
       });

src/components/Search/Search.jsx

@@ -97,17 +97,7 @@ function Search({ onSearch }) {
         </a>
       </StyledWrapper>
       <div className="relative flex items-center justify-end space-x-4">
-        <select
-          className="focus:border-primaryFocus focus:bg-primaryLight dark:focus:border-secondaryFocus dark:focus:bg-secondaryLight h-12 rounded-lg border-2 border-borderSecondary bg-primaryColor px-4 py-3 text-base text-secondaryColor outline-none dark:border-borderColor dark:bg-secondaryColor dark:text-white"
-          value={searchCriteria}
-          onChange={handleCriteriaChange}
-        >
-          <option value="all">All Fields</option>
-          <option value="name">Name</option>
-          <option value="location">Location</option>
-          <option value="skill">Skills</option>
-        </select>
-        <div className="relative w-full">
+        <div className="relative flex-[3]">
           <input
             className="focus:border-primaryFocus focus:bg-primaryLight dark:focus:border-secondaryFocus dark:focus:bg-secondaryLight h-12 w-full rounded-lg border-2 border-borderSecondary bg-primaryColor px-4 py-3 pr-20 font-spaceMono text-base text-secondaryColor outline-none dark:border-borderColor dark:bg-secondaryColor dark:text-white"
             ref={searchInput}
@@ -136,6 +126,17 @@ function Search({ onSearch }) {
             icon={faMicrophone}
           /> */}
         </div>
+        <select
+          className="focus:border-primaryFocus focus:bg-primaryLight dark:focus:border-secondaryFocus dark:focus:bg-secondaryLight h-12 flex-1 rounded-lg border-2 border-borderSecondary bg-primaryColor px-4 py-3 text-base text-secondaryColor outline-none dark:border-borderColor dark:bg-secondaryColor dark:text-white"
+          value={searchCriteria}
+          onChange={handleCriteriaChange}
+        >
+          <option value="all">All Fields</option>
+          <option value="name">Name</option>
+          <option value="location">Location</option>
+          <option value="skill">Skills</option>
+          <option value="bio">Description</option>
+        </select>
       </div>
 
       <VoiceSearch setVoiceText={setVoiceText} isListening={isListening} setIsListening={setIsListening} />