More converting to typescript

frontend/src/App.tsx

@@ -0,0 +1,44 @@
+// 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 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="/tournaments/:id" element={<Tournament />} />
+        </Route>
+
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}