update dashboard header file

Author: codervivek5

src/User/components/Dashboard/Header.jsx

@@ -1,15 +1,34 @@
-import React from "react";
+import React from 'react';
+
+// HIGHLIGHT: handleLogout prop ko yahan receive karein
+const Header = ({ handleLogout }) => { 
+  // localStorage se username nikalein
+  const username = localStorage.getItem("username");
 
-function Header() {
   return (
-    <>
-      <header className="flex justify-between items-center mb-6">
-        <a href="dashboard" className="text-3xl text-green-700 font-bold">
-          Dashboard
-        </a>
-      </header>
-    </>
+    <header className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
+      
+      {/* Welcome Message Section */}
+      <div>
+        {/* HIGHLIGHT: User ka naam aur welcome message */}
+        <h1 className="text-3xl font-bold text-gray-800">Welcome, {username || 'User'}!</h1>
+        <p className="text-gray-500">Here's what's new and trending today.</p>
+      </div>
+
+      {/* Logout Button Section */}
+      <div>
+        {/* HIGHLIGHT: Logout button jo Dashboard se pass kiye gaye function ko call karta hai */}
+        <button 
+          onClick={handleLogout} 
+          className="bg-red-500 text-white px-5 py-2 rounded-lg font-semibold hover:bg-red-600 transition shadow-md"
+        >
+          Logout
+        </button>
+      </div>
+      
+    </header>
   );
-}
+};
 
 export default Header;
+

src/User/pages/Dashboard/Dashboard.jsx

@@ -171,7 +171,9 @@ const Dashboard = () => {
       <main className="flex-1 p-6 mt-10">
         {/* Header */}
         <Header handleLogout={handleLogout} />{" "}
+        
         {/* Pass handleLogout to Header */}
+      
         {/* Search Bar */}
         <SearchBar searchTerm={searchTerm} handleSearch={handleSearch} />
         {/* New Today Section */}