54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import { BarChart3, Play, Database, Home } from 'lucide-react';
|
|
|
|
const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const location = useLocation();
|
|
|
|
const navigation = [
|
|
{ name: 'Dashboard', href: '/', icon: Home },
|
|
{ name: 'Run Analysis', href: '/run-analysis', icon: Play },
|
|
{ name: 'View Agent Outputs', href: '/results', icon: Database },
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<nav className="bg-white shadow-sm border-b">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between h-16">
|
|
<div className="flex items-center">
|
|
<BarChart3 className="h-8 w-8 text-primary-600" />
|
|
<span className="ml-2 text-xl font-bold text-gray-900">TradingAgents</span>
|
|
</div>
|
|
<div className="flex space-x-8">
|
|
{navigation.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = location.pathname === item.href;
|
|
return (
|
|
<Link
|
|
key={item.name}
|
|
to={item.href}
|
|
className={`inline-flex items-center px-1 pt-1 text-sm font-medium ${
|
|
isActive
|
|
? 'border-b-2 border-primary-500 text-gray-900'
|
|
: 'text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<Icon className="h-4 w-4 mr-2" />
|
|
{item.name}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Layout;
|