2026-04-15-1 dashboard

2026-04-15 01:05:15 +03:00
parent 50573eb9d3
commit 3802af0651
38 changed files with 4871 additions and 18 deletions
@@ -0,0 +1,40 @@
+import { Search, Bell, HelpCircle, ChevronDown } from 'lucide-react';
+
+const Header = () => {
+  return (
+    <header className="h-20 flex items-center justify-between px-8 bg-transparent sticky top-0 z-10">
+      <div className="relative w-96">
+        <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500" size={18} />
+        <input 
+          type="text" 
+          placeholder="Search for keys, documentation, or settings..." 
+          className="w-full bg-slate-900/50 border border-slate-800 rounded-xl py-2.5 pl-12 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500/40 transition-all"
+        />
+      </div>
+
+      <div className="flex items-center gap-6">
+        <div className="flex items-center gap-4 border-r border-slate-800 pr-6 mr-1">
+          <button className="text-slate-400 hover:text-white transition-colors relative">
+            <Bell size={20} />
+            <span className="absolute -top-1 -right-1 w-2 h-2 bg-blue-500 rounded-full border-2 border-bg-deep"></span>
+          </button>
+          <button className="text-slate-400 hover:text-white transition-colors">
+            <HelpCircle size={20} />
+          </button>
+        </div>
+
+        <button className="flex items-center gap-2 group">
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-slate-700 to-slate-600 border border-slate-700 overflow-hidden">
+            <div className="w-full h-full flex items-center justify-center text-[10px] font-bold text-slate-300">HA</div>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="text-sm font-medium text-slate-300 group-hover:text-white transition-colors">Hamza Admin</span>
+            <ChevronDown size={14} className="text-slate-500 group-hover:text-slate-300" />
+          </div>
+        </button>
+      </div>
+    </header>
+  );
+};
+
+export default Header;
@@ -0,0 +1,87 @@
+import { 
+  LayoutDashboard, 
+  Key, 
+  BarChart3, 
+  CreditCard, 
+  Settings, 
+  LogOut, 
+  Map as MapIcon, 
+  Terminal 
+} from 'lucide-react';
+import { NavLink } from 'react-router-dom';
+
+interface SidebarItemProps {
+  icon: any;
+  label: string;
+  to: string;
+}
+
+const SidebarItem = ({ icon: Icon, label, to }: SidebarItemProps) => (
+  <NavLink 
+    to={to}
+    className={({ isActive }) => `
+      w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-300
+      ${isActive 
+        ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20' 
+        : 'text-slate-400 hover:text-white hover:bg-white/5'}
+    `}
+  >
+    <Icon size={18} />
+    {label}
+  </NavLink>
+);
+
+const Sidebar = () => {
+  return (
+    <aside className="w-72 h-screen glass border-r border-slate-800 flex flex-col p-6 sticky top-0">
+      <div className="flex items-center gap-3 mb-10 px-2">
+        <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/20">
+          <MapIcon className="text-white" size={24} />
+        </div>
+        <div>
+          <h2 className="text-xl font-bold tracking-tight flex items-center gap-2">
+            Intaleq <span className="text-blue-500">Map</span>
+            <span className="text-[8px] bg-blue-500/20 text-blue-500 px-1 rounded">v1.5</span>
+          </h2>
+          <p className="text-[10px] text-slate-500 uppercase tracking-widest font-black">Developer Portal</p>
+        </div>
+      </div>
+
+      <nav className="flex-1 space-y-2">
+        <SidebarItem icon={LayoutDashboard} label="Dashboard" to="/" />
+        <SidebarItem icon={BarChart3} label="Analytics" to="/analytics" />
+        <SidebarItem icon={Terminal} label="Documentation" to="/documentation" />
+        <SidebarItem icon={CreditCard} label="Billing" to="/billing" />
+        <SidebarItem icon={Key} label="Playground" to="/playground" />
+      </nav>
+
+      <div className="mt-auto pt-6 border-t border-slate-800/50">
+        <NavLink 
+          to="/settings"
+          className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-slate-400 hover:text-white hover:bg-white/5"
+        >
+          <Settings size={18} />
+          Project Settings
+        </NavLink>
+        
+        <div className="mt-4 p-4 rounded-xl bg-slate-900/50 border border-slate-800">
+          <div className="flex items-center gap-3 mb-3">
+            <div className="w-8 h-8 rounded-full bg-slate-700"></div>
+            <div className="overflow-hidden">
+              <p className="text-sm font-semibold truncate">Hamza Al-Eghwairyeen</p>
+              <p className="text-xs text-slate-500 truncate">hamza@intaleq.xyz</p>
+            </div>
+          </div>
+          <button 
+            className="w-full flex items-center justify-center gap-2 text-xs text-rose-500 hover:bg-rose-500/10 py-2 rounded-lg transition-colors"
+          >
+            <LogOut size={14} />
+            Sign Out
+          </button>
+        </div>
+      </div>
+    </aside>
+  );
+};
+
+export default Sidebar;