App.tsx
1 import { BrowserRouter, Routes, Route, Link, useLocation } from 'react-router-dom'; 2 import { DashboardPage } from './pages/DashboardPage'; 3 import { ProposalsPage } from './pages/ProposalsPage'; 4 import { MintingPage } from './pages/MintingPage'; 5 import { GovernorsPage } from './pages/GovernorsPage'; 6 import { SettingsPage } from './pages/SettingsPage'; 7 8 function NavLink({ to, children }: { to: string; children: React.ReactNode }) { 9 const location = useLocation(); 10 const isActive = location.pathname === to || (to !== '/' && location.pathname.startsWith(to)); 11 12 return ( 13 <Link 14 to={to} 15 className={`px-3 py-2 rounded-lg transition-colors ${ 16 isActive 17 ? 'bg-alpha text-text-primary' 18 : 'text-text-secondary hover:text-text-primary hover:bg-card-hover' 19 }`} 20 > 21 {children} 22 </Link> 23 ); 24 } 25 26 function App() { 27 return ( 28 <BrowserRouter> 29 <div className="min-h-screen bg-background"> 30 {/* Navigation */} 31 <nav className="border-b border-border"> 32 <div className="max-w-7xl mx-auto px-4 py-4"> 33 <div className="flex items-center justify-between"> 34 <Link to="/" className="text-xl font-bold text-text-primary"> 35 ACDC Governor 36 </Link> 37 <div className="flex items-center gap-2"> 38 <NavLink to="/">Dashboard</NavLink> 39 <NavLink to="/proposals">Proposals</NavLink> 40 <NavLink to="/minting">Minting</NavLink> 41 <NavLink to="/governors">Governors</NavLink> 42 <NavLink to="/settings">Settings</NavLink> 43 <button className="ml-4 px-4 py-2 bg-alpha text-text-primary rounded-lg hover:bg-alpha-dark transition-colors"> 44 Connect Wallet 45 </button> 46 </div> 47 </div> 48 </div> 49 </nav> 50 51 {/* Content */} 52 <main> 53 <Routes> 54 <Route path="/" element={<DashboardPage />} /> 55 <Route path="/proposals" element={<ProposalsPage />} /> 56 <Route path="/proposals/:id" element={<ProposalsPage />} /> 57 <Route path="/minting" element={<MintingPage />} /> 58 <Route path="/governors" element={<GovernorsPage />} /> 59 <Route path="/settings" element={<SettingsPage />} /> 60 </Routes> 61 </main> 62 </div> 63 </BrowserRouter> 64 ); 65 } 66 67 export default App;