Search functionality & mock data improvements

[TheRealLowyer]

Pull Request Description: Enhanced Search Functionality and UI Improvements

Summary

This pull request introduces a fully functional, categorized search component to our project. It also includes significant UI improvements and better handling of popular search results. Below are the key features and changes made in this update:

---

Features

1. Search Functionality:

   • Categorized Search:
     • Users can now search across five categories: popular, tags, subforums, posts, and users.
     • The search results are filtered dynamically based on the selected category.
   • Popular Search Logic:
     • Returns results in the order: Subforums → Posts → Users → Tags.
     • Combines all relevant categories for comprehensive results.
   • Case-insensitive search for all categories.

2. Result Rendering:

   • Users:
     • Displays user's avatar, full name, username, and follower count.
   • Tags:
     • Shows tag label and associated statistics (posts and people count).
   • Subforums:
     • Links to the subforum page with its name prominently displayed.
   • Posts:
     • Displays the post’s username and content, linking to the respective post.

3. Styling Improvements:

   • Added hover effects to all result cards for better interactivity.
   • Improved button styles for category selectors.
   • Consistent design language across components using a modern and clean UI.

4. Category Selection:

   • Users can toggle between categories, dynamically updating the search results based on the selected type.

5. Dynamic Updates:

   • Results update immediately as the user types into the search bar.
   • Switching categories re-applies the search to the new category.

---

Technical Changes

1. Search Component:

   • Implemented the Search.jsx component with state management using React's useState.
   • Dynamic filtering logic is applied to mock data (mockData.js).

2. Mock Data Usage:

   • Leveraged mock data for subforums, tags, users, and posts to simulate search results.

3. Styling:

   • Created a new Search.css file for component-specific styles.
   • Added hover effects, responsive styling, and consistent design for result cards, buttons, and the search bar.

4. Code Organization:

   • Modularized and cleaned up logic for clarity and maintainability.
   • Result rendering uses a type field to conditionally render different result types (e.g., users, posts, etc.).

---

Screenshots

1. Search Component UI:
   

2. Results Example:
   

---

[OguzTNCR]

Improved mock data and the search functionality seems fine.