58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
"use client";
|
||
import Image from "next/image";
|
||
import { Bell } from "lucide-react";
|
||
import { useState } from "react";
|
||
import Link from "next/link";
|
||
|
||
export default function AdminNavbar() {
|
||
const [activeTab, setActiveTab] = useState("Manajemen User");
|
||
|
||
return (
|
||
<div className="w-full bg-white shadow-sm flex justify-between items-center px-6 py-3 border-b border-gray-200">
|
||
{/* Logo */}
|
||
<div className="flex items-center gap-2">
|
||
<Link href={"/"}>
|
||
<Image src="/campaign.png" alt="Logo" width={60} height={60} />
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Middle Tabs */}
|
||
<div className="flex items-center gap-8">
|
||
<button
|
||
onClick={() => setActiveTab("Manajemen User")}
|
||
className={`flex flex-col items-center text-sm font-medium px-4 py-2 rounded-md transition ${
|
||
activeTab === "Manajemen User"
|
||
? "bg-[#f7f7f7] border-b-2 border-[#C4A663] text-gray-900"
|
||
: "text-gray-500 hover:text-gray-800"
|
||
}`}
|
||
>
|
||
<span className="text-base">🖼️</span>
|
||
<span>Manajemen User</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Right Section */}
|
||
<div className="flex items-center gap-4">
|
||
{/* Notifikasi */}
|
||
<button className="relative text-gray-600 hover:text-gray-800">
|
||
<Bell className="w-5 h-5" />
|
||
<span className="absolute -top-1 -right-1 bg-blue-500 text-white text-[10px] w-4 h-4 flex items-center justify-center rounded-full">
|
||
6
|
||
</span>
|
||
</button>
|
||
|
||
{/* Avatar Admin */}
|
||
<div className="flex items-center gap-2">
|
||
<Image
|
||
src="/non-user.png"
|
||
alt="User"
|
||
width={36}
|
||
height={36}
|
||
className="rounded-full border"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|