frontend/src/components/Header.js

// Header.js
import React from "react";
import Link from "next/link";
import "./Header.css"; // Ensure to import the CSS file

const Header = () => {
  return (
    <header className="header">
      <div className="header-container">
        <h1 className="logo">
          <img src="/favicon-32x32.png"/>
          Nexora<sup className="header-music">Music</sup>
        </h1>
        <nav className="nav">
          <Link href="/" className="nav-link">
            Home
          </Link>
          <Link href="/playlists" className="nav-link">
            Playlists
          </Link>
        </nav>
      </div>
    </header>
  );
};

export default Header;