136 lines
6.0 KiB
TypeScript
136 lines
6.0 KiB
TypeScript
"use client";
|
|
|
|
import { Search, HelpCircle, Globe, Sun, Bell, ChevronDown, MapPin, ShieldCheck } from "lucide-react";
|
|
import { useNav } from "./context/navContext";
|
|
|
|
|
|
export default function Navbar() {
|
|
const { mode } = useNav();
|
|
|
|
return (
|
|
<header className="fixed top-0 right-0
|
|
left-64 z-30 flex h-16 items-center justify-between border-b
|
|
border-[#142538]/50 bg-[#071321]/80 backdrop-blur-md px-8">
|
|
{mode === "operations" ? (
|
|
/* ================= OPERATIONS NAVBAR ================= */
|
|
<>
|
|
{/* Left Group */}
|
|
<div className="flex items-center gap-2">
|
|
{/* Company Selector */}
|
|
<div className="flex items-center gap-2
|
|
rounded-full bg-[#0a1826] px-3 py-1.5 text-sm font-semibold text-[#10b981] border border-[#132338] cursor-pointer hover:bg-[#0f2338] transition whitespace-nowrap relative">
|
|
<span className="h-2 w-2 rounded-full bg-[#10b981] shrink-0"></span>
|
|
|
|
<select
|
|
className=" bg-[#0a1826] outline-none cursor-pointer font-medium pr-5"
|
|
|
|
defaultValue="Apple One"
|
|
>
|
|
<option>Apple One</option>
|
|
<option>Novotel Pune</option>
|
|
<option>SRM Campus</option>
|
|
<option>Local 1</option>
|
|
</select>
|
|
|
|
<ChevronDown className="absolute right-3 h-3.5 w-3.5 pointer-events-none" />
|
|
</div>
|
|
{/* Location Selector */}
|
|
<div className="flex items-center gap-2 rounded-full bg-[#0a1826] px-4 py-2 text-sm font-medium text-[#cbd5e1] border border-[#132338] cursor-pointer hover:bg-[#0f2338] transition whitespace-nowrap relative">
|
|
<MapPin className="h-4 w-4 text-gray-500 shrink-0" />
|
|
|
|
<select
|
|
className=" bg-[#0a1826] outline-none cursor-pointer font-medium pr-5"
|
|
defaultValue="Apple One — HQ Tower"
|
|
>
|
|
<option>Apple One — HQ Tower</option>
|
|
<option>Apple One — Annexe</option>
|
|
</select>
|
|
|
|
<ChevronDown className="absolute right-4 h-4 w-4 text-gray-500 pointer-events-none" />
|
|
</div>
|
|
|
|
{/* Search Bar */}
|
|
<div className="relative w-60">
|
|
<Search className="absolute left-4 top-2.5 h-4 w-4 text-gray-500" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search requests, equipment, met"
|
|
className="w-full rounded-xl bg-[#0a1826] pl-10 pr-4 py-2 text-sm text-white placeholder-gray-500 border border-[#132338] focus:outline-none focus:border-[#3de0c4]/50"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Utilities */}
|
|
<div className="flex items-center gap-3">
|
|
<button className="flex items-center gap-2 rounded-xl border border-[#132338] bg-[#0a1826] px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#14253d]">
|
|
<HelpCircle className="h-4 w-4 text-gray-400" />
|
|
<span>Tour</span>
|
|
</button>
|
|
|
|
<div className="flex items-center gap-1.5 rounded-xl border border-[#132338] bg-[#0a1826] px-4 py-2 text-sm font-semibold text-[#cbd5e1] cursor-pointer hover:bg-[#14253d]">
|
|
<Globe className="h-4 w-4 text-gray-400" />
|
|
<span>English</span>
|
|
<ChevronDown className="h-4 w-4 text-gray-500" />
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 px-1 text-sm font-bold text-[#10b981] tracking-wider">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-[#10b981]"></span>
|
|
<span className="text-xs font-bold text-gray-400">LIVE</span>
|
|
</div>
|
|
|
|
<button className="flex h-9 w-9 items-center justify-center rounded-xl border border-[#132338] bg-[#0a1826] text-gray-400 hover:text-white transition">
|
|
<Sun className="h-4 w-4" />
|
|
</button>
|
|
|
|
<div className="relative flex h-9 w-9 items-center justify-center rounded-xl border border-[#132338] bg-[#0a1826] cursor-pointer hover:bg-[#14253d] transition">
|
|
<Bell className="h-4 w-4 text-gray-400" />
|
|
<span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-[#ef4444] text-[9px] font-bold text-white">
|
|
8
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-full bg-[#1b3454] text-xs font-bold text-white cursor-pointer hover:opacity-90 transition">
|
|
DH
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
/* ================= ADMIN NAVBAR ================= */
|
|
<>
|
|
{/* Left Breadcrumb */}
|
|
<div className="flex items-center gap-2 text-sm text-slate-300">
|
|
<ShieldCheck size={18} className="text-[#3de0c4]" />
|
|
<span className="font-bold text-white">Administration</span>
|
|
<span className="text-slate-500">›</span>
|
|
<span className="text-slate-400">Mobile Flows</span>
|
|
</div>
|
|
|
|
{/* Right Utilities */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="relative w-64">
|
|
<Search className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search tenants, users, sites..."
|
|
className="w-full rounded-lg bg-[#0a1826] pl-9 pr-4 py-1.5 text-xs text-white placeholder-slate-500 border border-[#132338] focus:outline-none focus:border-[#3de0c4]/50"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1.5 rounded-full border border-teal-500/30 bg-teal-500/10 px-3 py-1 text-xs font-bold text-[#3de0c4]">
|
|
<span className="h-2 w-2 rounded-full bg-[#3de0c4]"></span>
|
|
<span>PRODUCTION • us-east-1</span>
|
|
</div>
|
|
|
|
<button className="flex h-8 w-8 items-center justify-center rounded-lg border border-[#132338] bg-[#0a1826] text-slate-400 hover:text-white transition">
|
|
<Sun className="h-4 w-4" />
|
|
</button>
|
|
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-[#1b3454] text-xs font-bold text-white">
|
|
SA
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</header>
|
|
);
|
|
} |