File size: 2,513 Bytes
c89a139 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import React from 'react';
import { LayoutDashboard, TrendingUp, Zap, Shield, Lock, Globe, Database } from 'lucide-react';
const Layout = ({ children }) => {
const navItems = [
{ name: 'Overview', path: '#top', icon: <LayoutDashboard size={20} /> },
{ name: 'Fintech Growth', path: '#fintech', icon: <TrendingUp size={20} /> },
{ name: 'AI Talent', path: '#ai_talent', icon: <Zap size={20} /> },
{ name: 'ESG Impact', path: '#esg', icon: <Shield size={20} /> },
{ name: 'Regulatory', path: '#regulatory', icon: <Lock size={20} /> },
{ name: 'Supply Chain', path: '#supply_chain', icon: <Globe size={20} /> },
];
return (
<div className="min-h-screen bg-slate-50 text-slate-900 font-sans flex" id="top">
{/* Sidebar */}
<aside className="w-64 bg-white border-r border-slate-200 fixed h-full z-50 hidden md:block shadow-sm">
<div className="p-6 border-b border-slate-100 flex items-center gap-3">
<div className="bg-blue-600 p-2 rounded-lg shadow-lg shadow-blue-600/20">
<Database size={24} className="text-white" />
</div>
<span className="font-bold text-xl tracking-tight text-slate-900">HHeuristics</span>
</div>
<nav className="p-4 space-y-2">
{navItems.map((item) => (
<a
key={item.name}
href={item.path}
className="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-500 hover:bg-blue-50 hover:text-blue-600 transition-all font-medium"
>
{item.icon}
<span>{item.name}</span>
</a>
))}
</nav>
<div className="absolute bottom-0 w-full p-6 border-t border-slate-100">
<div className="flex items-center gap-3">
<div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
<span className="text-xs font-mono text-emerald-600 font-bold">SYSTEM ONLINE</span>
</div>
</div>
</aside>
{/* Main Content */}
<main className="flex-1 md:ml-64 p-8 relative">
{children}
</main>
</div>
);
};
export default Layout;
|