Make profile navbar and search bar reusable

Author: chauhanshilpa

app/components/profile_components/ProfileNavbar.tsx

@@ -1,11 +1,27 @@
-import React from 'react'
+import React from "react";
+import SearchBar from "../reusable/SearchBar";
+import { IoMdHome, IoIosNotifications } from "react-icons/io";
+import { BiSolidMessageRounded } from "react-icons/bi";
+import Image from "next/image";
 
 const Navbar = () => {
   return (
-    <div>
-      I am navbar for profile
+    <div className="flex justify-between mt-2 mb-8">
+      <SearchBar placeholder="Enter interests" />
+      <div className="flex gap-10 items-center">
+        <IoMdHome className="text-2xl" />
+        <BiSolidMessageRounded className="text-2xl" />
+        <IoIosNotifications className="text-2xl" />
+        <Image
+          src="/profile-image.png"
+          height={35}
+          width={35}
+          alt="profile-image"
+          className="rounded-full"
+        />
+      </div>
     </div>
-  )
-}
+  );
+};
 
 export default Navbar;

app/components/reusable/SearchBar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-const SearchBar = () => {
+const SearchBar = ({placeholder}: {placeholder: string}) => {
   return (
     <form className="min-w-[50%] text-center">
       <label
@@ -31,7 +31,7 @@ const SearchBar = () => {
           type="search"
           id="default-search"
           className="block w-full p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-          placeholder="Find new friends, chat, and discover communities"
+          placeholder={placeholder}
           required
         />
         {/* <button