Bernt
430cb24ef0
- Responsive font sizes with clamp() - Shorter navigation labels (Explorer, Upload, Console, Health, Pilot, Ready) - Developer Mode -> Dev - Flex wrap for mobile screens - Smaller padding and gaps Tested on pilot.landvex.com
64 lines
2.5 KiB
TypeScript
64 lines
2.5 KiB
TypeScript
import { Routes, Route, Link } from 'react-router-dom';
|
|
import { useState } from 'react';
|
|
import DatasetExplorer from './pages/DatasetExplorer';
|
|
import ArtifactViewer from './pages/ArtifactViewer';
|
|
import MissionUpload from './pages/MissionUpload';
|
|
import FieldConsole from './pages/FieldConsole';
|
|
import HealthDashboard from './pages/HealthDashboard';
|
|
import PilotChecklist from './pages/PilotChecklist';
|
|
import ReadinessDashboard from './pages/ReadinessDashboard';
|
|
|
|
function App() {
|
|
const [developerMode, setDeveloperMode] = useState(false);
|
|
|
|
return (
|
|
<div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: 1200, margin: '0 auto', padding: 20 }}>
|
|
<header style={{ borderBottom: '2px solid #333', paddingBottom: 20, marginBottom: 20 }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap' }}>
|
|
<h1 style={{ fontSize: 'clamp(1.2rem, 5vw, 2rem)', margin: 0 }}>LandveX {developerMode ? '(Dev)' : ''}</h1>
|
|
<button
|
|
onClick={() => setDeveloperMode(!developerMode)}
|
|
style={{
|
|
padding: '6px 12px',
|
|
background: developerMode ? '#ffd700' : '#f0f0f0',
|
|
border: '1px solid #ccc',
|
|
borderRadius: 4,
|
|
cursor: 'pointer',
|
|
fontSize: '0.8rem',
|
|
}}
|
|
>
|
|
{developerMode ? '🔓 Dev' : '🔒 Normal'}
|
|
</button>
|
|
</div>
|
|
<nav style={{ display: 'flex', gap: 10, marginTop: 10, flexWrap: 'wrap', fontSize: '0.85rem' }}>
|
|
<Link to="/">Explorer</Link>
|
|
<Link to="/upload">Upload</Link>
|
|
<Link to="/console">Console</Link>
|
|
<Link to="/health">Health</Link>
|
|
<Link to="/pilot">Pilot</Link>
|
|
<Link to="/readiness">Ready</Link>
|
|
{developerMode && (
|
|
<>
|
|
<Link to="/datasets">Data</Link>
|
|
<Link to="/models">Models</Link>
|
|
<Link to="/training">Train</Link>
|
|
</>
|
|
)}
|
|
</nav>
|
|
</header>
|
|
|
|
<Routes>
|
|
<Route path="/" element={<DatasetExplorer />} />
|
|
<Route path="/upload" element={<MissionUpload />} />
|
|
<Route path="/artifact/:id" element={<ArtifactViewer />} />
|
|
<Route path="/console" element={<FieldConsole />} />
|
|
<Route path="/health" element={<HealthDashboard />} />
|
|
<Route path="/pilot" element={<PilotChecklist />} />
|
|
<Route path="/readiness" element={<ReadinessDashboard />} />
|
|
</Routes>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|