Lobo_Corp/ToBePlayed-Frontend
Public Access
3
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added routing, jwt handling and Dashboard.jsx

Browse Source
This commit is contained in:
lobo committed 2026-04-04 10:49:14 +02:00
1 parent af4eb58e35
commit 6e2a23c3ef
6 files changed
+164 -44
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/App.jsx
+35 -35
View File
@@ -1,10 +1,11 @@
import {BrowserRouter, Link, Route, Routes} from 'react-router-dom';
import {Link, Route, Routes} from 'react-router-dom';
import {useTranslation} from 'react-i18next';
import {useEffect, useState} from 'react';
import LandingPage from './pages/LandingPage';
import LoginPage from './pages/LoginPage';
import ImprintPage from './pages/ImprintPage';
import Dashboard from "./pages/Dashboard.jsx";
function App() {
const {t, i18n} = useTranslation();
@@ -28,43 +29,42 @@ function App() {
};
return (
<BrowserRouter>
<div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950 transition-colors duration-300 font-sans">
<header className="p-4 flex justify-between items-center border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 sticky top-0 z-50">
<Link to="/" className="font-black text-blue-600 dark:text-blue-500 text-2xl flex items-center tracking-tight">
<i className="mdi mdi-controller mr-2 text-3xl"></i> Game Log
<div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950 transition-colors duration-300 font-sans">
<header className="p-4 flex justify-between items-center border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 sticky top-0 z-50">
<Link to="/" className="font-black text-blue-600 dark:text-blue-500 text-2xl flex items-center tracking-tight">
<i className="mdi mdi-controller mr-2 text-3xl"></i> Game Log
</Link>
<div className="flex gap-5 items-center">
<button onClick={toggleLanguage} className="text-sm font-bold text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
{i18n.language.toUpperCase()}
</button>
<button onClick={() => {
setIsDarkMode(!isDarkMode);
}} className="text-xl text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
<i className={isDarkMode ? "mdi mdi-weather-sunny" : "mdi mdi-weather-night"}></i>
</button>
<Link to="/login" className="bg-blue-600 hover:bg-blue-500 text-white px-5 py-2 rounded-lg font-bold transition-all shadow-md shadow-blue-500/20">
{t('login')}
</Link>
</div>
</header>
<div className="flex gap-5 items-center">
<button onClick={toggleLanguage} className="text-sm font-bold text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
{i18n.language.toUpperCase()}
</button>
<button onClick={() => {
setIsDarkMode(!isDarkMode);
}} className="text-xl text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
<i className={isDarkMode ? "mdi mdi-weather-sunny" : "mdi mdi-weather-night"}></i>
</button>
<Link to="/login" className="bg-blue-600 hover:bg-blue-500 text-white px-5 py-2 rounded-lg font-bold transition-all shadow-md shadow-blue-500/20">
{t('login')}
</Link>
</div>
</header>
<main className="grow flex flex-col">
<Routes>
<Route path="/" element={<LandingPage/>}/>
<Route path="/login" element={<LoginPage/>}/>
<Route path="/dashboard" element={<Dashboard/>}/>
<Route path="/impressum" element={<ImprintPage/>}/>
</Routes>
</main>
<main className="grow flex flex-col">
<Routes>
<Route path="/" element={<LandingPage/>}/>
<Route path="/login" element={<LoginPage/>}/>
<Route path="/impressum" element={<ImprintPage/>}/>
</Routes>
</main>
<footer className="p-6 text-center border-t border-slate-200 dark:border-slate-800 text-slate-500 dark:text-slate-400 text-sm bg-white dark:bg-slate-900">
<Link to="/impressum" className="hover:text-blue-500 font-semibold transition-colors">
{t('IMPRINT.TITLE')}
</Link>
</footer>
</div>
</BrowserRouter>
<footer className="p-6 text-center border-t border-slate-200 dark:border-slate-800 text-slate-500 dark:text-slate-400 text-sm bg-white dark:bg-slate-900">
<Link to="/impressum" className="hover:text-blue-500 font-semibold transition-colors">
{t('IMPRINT.TITLE')}
</Link>
</footer>
</div>
);
}