46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
// frontend/src/App.tsx
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
|
|
import Layout from './components/Layout/Layout';
|
|
import Dashboard from './pages/Dashboard';
|
|
import Login from './pages/Login';
|
|
import Courts from './pages/Courts';
|
|
import Tournament from './pages/Tournament';
|
|
|
|
export default function App() {
|
|
const [darkMode, setDarkMode] = useState<boolean>(() => localStorage.theme === 'dark');
|
|
|
|
useEffect(() => {
|
|
const root = window.document.documentElement;
|
|
const darkColor = '#09090b';
|
|
const lightColor = '#fafafa';
|
|
|
|
if (darkMode) {
|
|
root.classList.add('dark');
|
|
localStorage.setItem('theme', 'dark');
|
|
root.style.backgroundColor = darkColor;
|
|
} else {
|
|
root.classList.remove('dark');
|
|
localStorage.setItem('theme', 'light');
|
|
root.style.backgroundColor = lightColor;
|
|
}
|
|
}, [darkMode]);
|
|
|
|
return (
|
|
<BrowserRouter>
|
|
<Routes>
|
|
<Route path="/login" element={<Login />} />
|
|
|
|
{/* Main App Layout */}
|
|
<Route element={<Layout darkMode={darkMode} setDarkMode={setDarkMode} />}>
|
|
<Route path="/" element={<Dashboard />} />
|
|
<Route path="/courts" element={<Courts />} />
|
|
<Route path="/tournaments/:id" element={<Tournament />} />
|
|
</Route>
|
|
|
|
<Route path="*" element={<Navigate to="/" replace />} />
|
|
</Routes>
|
|
</BrowserRouter>
|
|
);
|
|
} |