63 lines
2.0 KiB
TypeScript
63 lines
2.0 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 ApproverNavbar() {
|
|||
|
|
const [activeTab, setActiveTab] = useState("Kurasi Konten");
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="w-full bg-white border-b shadow-sm">
|
|||
|
|
<div className="flex justify-between items-center px-6 py-3">
|
|||
|
|
{/* Left: Logo */}
|
|||
|
|
<div className="flex items-center">
|
|||
|
|
<Link href={"/"}>
|
|||
|
|
<Image src="/campaign.png" alt="Logo" width={60} height={60} />
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Middle: Tabs */}
|
|||
|
|
<div className="flex items-center gap-12">
|
|||
|
|
{["Kurasi Konten", "Publish Konten"].map((tab) => (
|
|||
|
|
<button
|
|||
|
|
key={tab}
|
|||
|
|
onClick={() => setActiveTab(tab)}
|
|||
|
|
className={`flex flex-col items-center text-sm font-medium transition ${
|
|||
|
|
activeTab === tab
|
|||
|
|
? "text-black border-b-2 border-[#C4A663]"
|
|||
|
|
: "text-gray-500 hover:text-gray-800"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{tab === "Kurasi Konten" ? (
|
|||
|
|
<span className="text-xl mb-1">🖼️</span>
|
|||
|
|
) : (
|
|||
|
|
<span className="text-xl mb-1">🔁</span>
|
|||
|
|
)}
|
|||
|
|
<span>{tab}</span>
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Right: Notification + Avatar */}
|
|||
|
|
<div className="flex items-center gap-4">
|
|||
|
|
<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>
|
|||
|
|
<Image
|
|||
|
|
src="/non-user.png"
|
|||
|
|
alt="User"
|
|||
|
|
width={36}
|
|||
|
|
height={36}
|
|||
|
|
className="rounded-full border"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|