made search bar component

apps/applicant-tracking/src/app/applicants/page.tsx

@@ -1,3 +1,3 @@
 export default function ApplicantsPage() {
-    return <h1>Applicants page</h1>
-  }
+  return <h1>Applicants page</h1>;
+}

apps/applicant-tracking/src/app/page.tsx

@@ -1,3 +1,5 @@
+import SearchField from '@/components/SearchField';
+
 export default function DashboardPage() {
   return <h1>Dashboard page</h1>;
 }

apps/applicant-tracking/src/components/SearchField/index.tsx

@@ -0,0 +1,50 @@
+'use client';
+import { useRouter } from 'next/navigation';
+import { TextField } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import { useState, useCallback } from 'react';
+import { usePathname } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
+
+export default function SearchField() {
+  const router = useRouter();
+  const [searchQuery, setSearchQuery] = useState('');
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  // Handle changes in the search input
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newSearchQuery = event.target.value;
+    setSearchQuery(newSearchQuery);
+    if (newSearchQuery === '') {
+      router.push(pathname);
+      return;
+    }
+    router.push(pathname + '?' + createQueryString('q', newSearchQuery));
+  };
+
+  // Function to create a query string with given name and value
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set(name, value);
+
+      return params.toString();
+    },
+    [searchParams]
+  );
+
+  return (
+    // Render the TextField component for search input
+    <TextField
+      label="Search"
+      value={searchQuery || searchParams.get('q') || ''}
+      onChange={handleSearchChange}
+      variant="outlined"
+      style={{ width: 500 }}
+      InputProps={{
+        endAdornment: <SearchIcon sx={{ color: 'gray' }} />,
+      }}
+    />
+  );
+}