Add Header Component

client/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.1.0",
     "react-router-dom": "^6.22.3"
   },
   "devDependencies": {

client/src/App.jsx

@@ -4,10 +4,12 @@ import SignIn from "./pages/SignIn";
 import SignUp from "./pages/SignUp";
 import About from "./pages/About";
 import Profile from "./pages/Profile";
+import Header from "./components/Header";
 
 const App = () => {
   return (
     <BrowserRouter>
+      <Header />
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/sign-in" element={<SignIn />} />

client/src/components/Header.jsx

@@ -0,0 +1,28 @@
+import { FaSearch } from 'react-icons/fa';
+import { Link } from 'react-router-dom';
+
+const Header = () => {
+  return (
+    <header className="bg-slate-200 shadow-md">
+      <div className="flex justify-between items-center max-w-6xl mx-auto p-3">
+        <Link to='/'>
+        <h1 className="font-bold text-sm sm:text-xl flex flex-wrap">
+          <span className="text-slate-500">Home</span>
+          <span className="text-slate-700">Services</span>
+        </h1>
+        </Link>
+        <form className="bg-slate-100 p-3 rounded-lg flex items-center">
+          <input type="text" placeholder="Search" className="bg-transparent focus:outline-none w-24 sm:w-64" />
+          <FaSearch className='text-slate-600'/>
+        </form>
+        <ul className='flex gap-4'>
+            <Link to='/'><li className='hidden sm:inline text-slate-700 hover:underline cursor-pointer'>Home</li></Link>
+            <Link to='/about'><li className='hidden sm:inline text-slate-700 hover:underline cursor-pointer'>About</li></Link>
+            <Link to='/sign-in'><li className='text-slate-700 hover:underline cursor-pointer'>Sign In</li></Link>
+        </ul>
+      </div>
+    </header>
+  );
+};
+
+export default Header;