82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom'
|
|
import {
|
|
LayoutDashboard,
|
|
Leaf,
|
|
Image,
|
|
Play,
|
|
Download,
|
|
Settings,
|
|
} from 'lucide-react'
|
|
import { clsx } from 'clsx'
|
|
|
|
import Dashboard from './pages/Dashboard'
|
|
import Species from './pages/Species'
|
|
import Images from './pages/Images'
|
|
import Jobs from './pages/Jobs'
|
|
import Export from './pages/Export'
|
|
import SettingsPage from './pages/Settings'
|
|
|
|
const navItems = [
|
|
{ to: '/', icon: LayoutDashboard, label: 'Dashboard' },
|
|
{ to: '/species', icon: Leaf, label: 'Species' },
|
|
{ to: '/images', icon: Image, label: 'Images' },
|
|
{ to: '/jobs', icon: Play, label: 'Jobs' },
|
|
{ to: '/export', icon: Download, label: 'Export' },
|
|
{ to: '/settings', icon: Settings, label: 'Settings' },
|
|
]
|
|
|
|
function Sidebar() {
|
|
return (
|
|
<aside className="w-64 bg-white border-r border-gray-200 min-h-screen">
|
|
<div className="p-4 border-b border-gray-200">
|
|
<h1 className="text-xl font-bold text-green-600 flex items-center gap-2">
|
|
<Leaf className="w-6 h-6" />
|
|
PlantScraper
|
|
</h1>
|
|
</div>
|
|
<nav className="p-4">
|
|
<ul className="space-y-2">
|
|
{navItems.map((item) => (
|
|
<li key={item.to}>
|
|
<NavLink
|
|
to={item.to}
|
|
className={({ isActive }) =>
|
|
clsx(
|
|
'flex items-center gap-3 px-3 py-2 rounded-lg transition-colors',
|
|
isActive
|
|
? 'bg-green-50 text-green-700'
|
|
: 'text-gray-600 hover:bg-gray-100'
|
|
)
|
|
}
|
|
>
|
|
<item.icon className="w-5 h-5" />
|
|
{item.label}
|
|
</NavLink>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
)
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<BrowserRouter>
|
|
<div className="flex min-h-screen">
|
|
<Sidebar />
|
|
<main className="flex-1 p-8">
|
|
<Routes>
|
|
<Route path="/" element={<Dashboard />} />
|
|
<Route path="/species" element={<Species />} />
|
|
<Route path="/images" element={<Images />} />
|
|
<Route path="/jobs" element={<Jobs />} />
|
|
<Route path="/export" element={<Export />} />
|
|
<Route path="/settings" element={<SettingsPage />} />
|
|
</Routes>
|
|
</main>
|
|
</div>
|
|
</BrowserRouter>
|
|
)
|
|
}
|