Untitled

import React from 'react';
import { FaUser } from 'react-icons/fa';
import { Link } from 'react-router-dom';

const Header = () => {
  return (
    <header className="bg-gray-800 ">
      
      <nav className="container mx-4 px-4 py-2 flex items-center justify-between ">
        <div className='border'>
          <Link to="/" className="text-white font-semibold text-lg">
            <i className="fa-solid fa-circle-nodes"></i>
          </Link>
        </div>
        <div className="flex items-center mr border">
          <div className="hidden md:block">
            <Link to="/" className="text-gray-300 hover:text-white px-3 py-2">
              Home
            </Link>
            <Link to="/" className="text-gray-300 hover:text-white px-3 py-2">
              About
            </Link>
            <Link to="/" className="text-gray-300 hover:text-white px-3 py-2">
              Services
            </Link>
            <Link to="/" className="text-gray-300 hover:text-white px-3 py-2">
              Contact
            </Link>
          </div>
          <div className="ml-3 relative">
            <button className="flex items-center focus:outline-none text-gray-300">
              <FaUser />
            </button>
            {/* <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg">
              <Link to="/" className="block px-4 py-2 text-gray-800 hover:bg-gray-100">
                Profile
              </Link>
              <Link to="/" className="block px-4 py-2 text-gray-800 hover:bg-gray-100">
                Settings
              </Link>
              <Link to="/" className="block px-4 py-2 text-gray-800 hover:bg-gray-100">
                Sign out
              </Link>
            </div> */}
          </div>
        </div>
      </nav>
      
    </header>
  );
};

export default Header;