84 lines
2.8 KiB
JavaScript
84 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
|
import { Toaster } from 'react-hot-toast';
|
|
import { AuthProvider } from './contexts/AuthContext';
|
|
import { SocketProvider } from './contexts/SocketContext';
|
|
import APP_CONFIG from './config/app';
|
|
import Layout from './components/Layout';
|
|
import Dashboard from './pages/Dashboard';
|
|
import MapView from './pages/MapView';
|
|
import Devices from './pages/Devices';
|
|
import Detections from './pages/Detections';
|
|
import Alerts from './pages/Alerts';
|
|
import Debug from './pages/Debug';
|
|
import Login from './pages/Login';
|
|
import ProtectedRoute from './components/ProtectedRoute';
|
|
|
|
function App() {
|
|
return (
|
|
<AuthProvider>
|
|
<SocketProvider>
|
|
<Router basename={APP_CONFIG.basePath}>
|
|
<div className="App">
|
|
<Toaster
|
|
position="top-center"
|
|
toastOptions={{
|
|
duration: 3000, // Shorter duration for mobile
|
|
style: {
|
|
background: '#363636',
|
|
color: '#fff',
|
|
maxWidth: '90vw', // Limit width on mobile
|
|
fontSize: '14px', // Smaller text on mobile
|
|
},
|
|
success: {
|
|
duration: 2000, // Even shorter for success
|
|
iconTheme: {
|
|
primary: '#4ade80',
|
|
secondary: '#fff',
|
|
},
|
|
},
|
|
error: {
|
|
duration: 4000, // Moderate duration for errors
|
|
iconTheme: {
|
|
primary: '#ef4444',
|
|
secondary: '#fff',
|
|
},
|
|
},
|
|
}}
|
|
// Limit number of visible toasts to prevent screen overflow
|
|
gutter={8}
|
|
containerStyle={{
|
|
top: '1rem',
|
|
left: '1rem',
|
|
right: '1rem',
|
|
bottom: 'auto',
|
|
}}
|
|
// Custom container class for responsive styling
|
|
containerClassName="toast-container"
|
|
/>
|
|
|
|
<Routes>
|
|
<Route path="/login" element={<Login />} />
|
|
|
|
<Route path="/" element={
|
|
<ProtectedRoute>
|
|
<Layout />
|
|
</ProtectedRoute>
|
|
}>
|
|
<Route index element={<Dashboard />} />
|
|
<Route path="map" element={<MapView />} />
|
|
<Route path="devices" element={<Devices />} />
|
|
<Route path="detections" element={<Detections />} />
|
|
<Route path="alerts" element={<Alerts />} />
|
|
<Route path="debug" element={<Debug />} />
|
|
</Route>
|
|
</Routes>
|
|
</div>
|
|
</Router>
|
|
</SocketProvider>
|
|
</AuthProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|