feat: implement SearchPageComponent and useSearch context for search functionality

Author: tomast1337

web/src/modules/search/components/SearchPageComponent.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+
+import { useSearch } from './client/context/useSearch';
+
+export const SearchPageComponent = () => {
+  const searchParams = useSearchParams();
+  const { results, query, fetchSearchResults } = useSearch();
+
+  useEffect(() => {
+    const query = searchParams.get('query') || '';
+    const page = searchParams.get('page') || '1';
+    const limit = searchParams.get('limit') || '20';
+
+    fetchSearchResults(query, parseInt(page), parseInt(limit));
+  }, []);
+
+  return (
+    <>
+      {/* Search Header */}
+      <div className='relative w-0 h-0' aria-hidden={true}>
+        <FontAwesomeIcon
+          icon={faMagnifyingGlass}
+          className='absolute text-[8rem] md:text-[12rem] text-zinc-400 opacity-15 rotate-[-15deg] translate-y-8'
+        />
+      </div>
+
+      <h1 className='text-center text-5xl text-zinc-300 font-light uppercase mt-12 mb-6'>
+        Search Results
+      </h1>
+      {query && (
+        <h2 className='text-center text-xl font-light mb-12'>
+          {`Showing results for "${query}"`}
+        </h2>
+      )}
+
+      {results.length === 0 ? (
+        <div className='text-center text-xl font-light'>
+          No results found. Try searching for something else.
+        </div>
+      ) : (
+        <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
+          {JSON.stringify(results, null, 2)}
+        </div>
+      )}
+    </>
+  );
+};

web/src/modules/search/components/client/context/useSearch.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { create } from 'zustand';
+
+import axios from '@web/src/lib/axios';
+
+type SearchState = {
+  fetchSearchResults: (
+    query: string,
+    page: number,
+    limit: number,
+  ) => Promise<void>;
+  query: string;
+  page: number;
+  limit: number;
+  results: any[];
+  isLoading: boolean;
+};
+
+export const useSearch = create<SearchState>((set, get) => {
+  const fetchSearchResults = async (
+    query: string,
+    page: number,
+    limit: number,
+  ) => {
+    set({ isLoading: true });
+
+    const result = await axios.get('/user', {
+      params: {
+        query: query,
+        page: page,
+        limit: limit,
+      },
+    });
+
+    set({
+      query,
+      page,
+      limit,
+      results: result.data,
+      isLoading: false,
+    });
+  };
+
+  return {
+    fetchSearchResults,
+    query: '',
+    page: 1,
+    limit: 20,
+    results: [],
+    isLoading: false,
+  };
+});

web/src/modules/search/context/search.ts

@@ -1,6 +1,7 @@
 'use client';
 import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
 import { cn } from '@web/src/lib/tailwind.utils';
@@ -9,6 +10,7 @@ import { Popover, PopoverContent, PopoverTrigger } from './popover';
 
 export const BlockSearch = () => {
   const [query, setQuery] = useState('');
+  const router = useRouter();
 
   return (
     <Popover>
@@ -33,7 +35,13 @@ export const BlockSearch = () => {
           <button
             className='bg-zinc-600 text-white rounded-md p-2 hover:bg-zinc-500 w-12 h-12'
             onClick={() => {
-              console.log('Searching for:', query);
+              const queryParam = new URLSearchParams({
+                page: '1',
+                limit: '20',
+                query,
+              });
+
+              router.push(`/search?${queryParam.toString()}`);
             }}
           >
             <FontAwesomeIcon icon={faMagnifyingGlass} />