45 lines
1.4 KiB
JavaScript
45 lines
1.4 KiB
JavaScript
import React from "react";
|
|
import { FiMenu, FiBell } from "react-icons/fi";
|
|
|
|
const Header = ({ toggleSidebar, toggleMobileSidebar }) => {
|
|
return (
|
|
<header className="flex items-center justify-between bg-white shadow px-4 py-3 sticky top-0 z-20">
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
className="md:hidden p-2 rounded-md hover:bg-gray-100 transition"
|
|
onClick={toggleMobileSidebar}
|
|
>
|
|
<FiMenu className="text-[#4880FF]" />
|
|
</button>
|
|
|
|
<button
|
|
className="hidden md:block p-2 rounded-md hover:bg-gray-100 transition"
|
|
onClick={toggleSidebar}
|
|
>
|
|
<FiMenu className="text-[#4880FF]" />
|
|
</button>
|
|
|
|
<h1 className="text-xl font-semibold hidden md:block text-[#4880FF]">
|
|
Dashboard
|
|
</h1>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<button className="p-2 rounded-md hover:bg-gray-100 transition">
|
|
<FiBell className="text-[#4880FF]" />
|
|
</button>
|
|
<div className="hidden md:flex items-center gap-2">
|
|
<span className="text-gray-700">Admin</span>
|
|
<img
|
|
src="/avatar.png"
|
|
alt="avatar"
|
|
className="w-8 h-8 rounded-full border-2 border-[#4880FF]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|