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

Add pages, update App layout and i18n

Browse Source 
Introduce LandingPage, LoginPage and ImprintPage components and replace the previous inline placeholders in App.jsx. Update App layout and header (branding, language toggle, dark mode toggle, route wiring) and use new i18n keys (IMPRINT and LOGIN) in en/de locales. Add client-side validation and UI for the login form. Remove unused assets/icons (public/icons.svg, src/assets/hero.png, vite.svg, vue.svg). Small logging/message tweaks and various Tailwind styling refinements.
This commit is contained in:
lobo committed 2026-03-28 10:02:59 +01:00
1 parent c8f1d66cd2
commit d9c3f40c4a
10 files changed
+220 -81
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/App.jsx
+27 -51
View File
@@ -1,42 +1,16 @@
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useState, useEffect } from 'react';
import {BrowserRouter, Link, Route, Routes} from 'react-router-dom';
import {useTranslation} from 'react-i18next';
import {useEffect, useState} from 'react';
// Placeholder components to keep the routing structure simple
function LandingPage() {
const { t } = useTranslation();
return (
<div className="grow flex items-center justify-center p-4">
<h1 className="text-3xl md:text-5xl font-bold text-slate-900 dark:text-white">
{t('welcome')}
</h1>
</div>
);
}
function LoginPage() {
const { t } = useTranslation();
return (
<div className="grow flex items-center justify-center p-4">
<h2 className="text-2xl text-slate-800 dark:text-slate-200">{t('login')}</h2>
</div>
);
}
function ImprintPage() {
const { t } = useTranslation();
return (
<div className="grow p-8">
<h2 className="text-2xl text-slate-800 dark:text-slate-200">{t('imprint')}</h2>
</div>
);
}
import LandingPage from './pages/LandingPage';
import LoginPage from './pages/LoginPage';
import ImprintPage from './pages/ImprintPage';
function App() {
const { t, i18n } = useTranslation();
const {t, i18n} = useTranslation();
const [isDarkMode, setIsDarkMode] = useState(true);
// Apply dark mode class to the root HTML element for Tailwind
// Sync React state with the HTML class required by Tailwind CSS
useEffect(() => {
if (isDarkMode) {
document.documentElement.classList.add('dark');
@@ -47,44 +21,46 @@ function App() {
const toggleLanguage = () => {
if (i18n.language === 'de') {
i18n.changeLanguage('en').then(r => console.log("Changed language to en"));
i18n.changeLanguage('en').then(r => console.log("Changed language to 'en'"));
} else {
i18n.changeLanguage('de').then(r => console.log("Changed language to en"));
i18n.changeLanguage('de').then(r => console.log("Changed language to 'de'"));
}
};
return (
<BrowserRouter>
<div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950 transition-colors duration-300">
<header className="p-4 flex justify-between items-center border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
<Link to="/" className="font-bold text-blue-600 dark:text-blue-400 text-xl flex items-center">
<i className="mdi mdi-controller mr-2"></i> To Be Played
<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-4 items-center">
<button onClick={toggleLanguage} className="text-sm font-medium dark:text-slate-300">
<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 dark:text-slate-300">
<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-700 text-white px-4 py-2 rounded-lg font-medium transition-colors">
<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="flex-grow flex flex-col">
<main className="grow flex flex-col">
<Routes>
<Route path="/" element={<LandingPage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/impressum" element={<ImprintPage />} />
<Route path="/" element={<LandingPage/>}/>
<Route path="/login" element={<LoginPage/>}/>
<Route path="/impressum" element={<ImprintPage/>}/>
</Routes>
</main>
<footer className="p-4 text-center border-t border-slate-200 dark:border-slate-800 text-slate-500 text-sm bg-white dark:bg-slate-900">
<Link to="/impressum" className="hover:text-blue-500 transition-colors">
{t('imprint')}
<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>