Initial commit — PlantGuideScraper project

frontend/src/App.tsx

@@ -0,0 +1,81 @@
+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>
+  )
+}