src/components/Header.js

import React from "react";

const Header = ({ user, onLogout }) => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        padding: "10px 20px",
        backgroundColor: "#333",
        color: "#fff",
      }}
    >
      <h3>Chat with Llama3.2:3b</h3>
      {user && (
        <div style={{ display: "flex", alignItems: "center", gap: "15px" }}>
          <span>Welcome, {user.name || user.username}</span>
          <button
            onClick={onLogout}
            style={{
              padding: "8px 15px",
              border: "none",
              backgroundColor: "#ff4d4d",
              color: "#fff",
              borderRadius: "5px",
              cursor: "pointer",
            }}
          >
            Logout
          </button>
        </div>
      )}
    </div>
  );
};

export default Header;