Dashboard Componeets files are added some

2026-07-14 13:20:26 +01:00
parent ca40bd4095
commit 4c8c537f9c
13 changed files with 499 additions and 20 deletions
--- a/components/dashboard/navbar.tsx
+++ b/components/dashboard/navbar.tsx
@@ -0,0 +1,80 @@
+import { Search, HelpCircle, Globe, Sun, Bell, ChevronDown, MapPin } from 'lucide-react';
+
+export default function Navbar() {
+  return (
+    <header className="flex items-center justify-between 
+     bg-[#071321] ">
+      
+      {/* 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">
+  <span className="h-2 w-2 rounded-full bg-[#10b981] shrink-0"></span>
+  <span className="font-semibold">Apple One</span>
+  <ChevronDown className="h-3.5 w-3.5 text-[#10b981]" />
+</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">
+  <MapPin className="h-4 w-4 text-gray-500 shrink-0" />
+  <span className="whitespace-nowrap">
+    Apple One — <span className="text-[#cbd5e1] font-semibold">HQ Tower</span>
+  </span>
+  <ChevronDown className="h-4 w-4 text-gray-500 shrink-0" />
+</div>
+
+        {/* Search Bar */}
+        <div className="relative w-60">
+          <Search className="absolute left-4 top-3 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-teal-500"
+          />
+        </div>
+      </div>
+
+      {/* Right Utilities */}
+      <div className="flex items-center gap-3">
+        {/* Tour */}
+        <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>
+        
+        {/* Language */}
+        <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>
+
+        {/* Live Indicator */}
+        <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>
+
+        {/* Theme Toggle */}
+        <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>
+
+        {/* Notifications */}
+        <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>
+
+        {/* Profile Avatar */}
+        <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>
+    </header>
+  );
+}