From 97eaf1e4849bf73d338e0e2ca7f4fc92ac2f2b43 Mon Sep 17 00:00:00 2001 From: "theis.gaedigk" Date: Mon, 11 Aug 2025 20:10:36 +0200 Subject: [PATCH] Refactor layout components to include title prop and update header rendering; modify index and home pages for improved structure and icon usage --- frontend/index.html | 4 ++-- frontend/src/components/Admin.tsx | 6 +++++- frontend/src/components/Header.tsx | 12 ++++++++---- frontend/src/components/Home.tsx | 10 +++++----- frontend/src/components/MainForm.tsx | 2 +- frontend/src/layout/Layout.tsx | 7 ++++--- 6 files changed, 25 insertions(+), 16 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index e4b78ea..6c89f55 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,9 +2,9 @@ - + - Vite + React + TS + MCS Lose
diff --git a/frontend/src/components/Admin.tsx b/frontend/src/components/Admin.tsx index 3c2b47d..8f9ce85 100644 --- a/frontend/src/components/Admin.tsx +++ b/frontend/src/components/Admin.tsx @@ -1,9 +1,13 @@ +import "../App.css"; +import Layout from "../layout/Layout"; import React from "react"; const Admin: React.FC = () => { return ( <> -

Admin

+ +

Admin

+ ); }; diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index e5629a4..0ffb059 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -1,14 +1,18 @@ import React from "react"; -import { Award, RectangleEllipsis } from "lucide-react"; +import { Ticket, RectangleEllipsis } from "lucide-react"; -const Header: React.FC = () => { +type HeaderProps = { + title: string; +}; + +const Header: React.FC = ({ title }) => { return (
- +

- MCS Lose + {title}

diff --git a/frontend/src/components/Home.tsx b/frontend/src/components/Home.tsx index dc0b16d..cef93a4 100644 --- a/frontend/src/components/Home.tsx +++ b/frontend/src/components/Home.tsx @@ -1,16 +1,16 @@ import "../App.css"; import Layout from "../layout/Layout"; import MainForm from "./MainForm"; -import "react-toastify/dist/ReactToastify.css"; +import React from "react"; -function App() { +const Home: React.FC = () => { return ( <> - + ); -} +}; -export default App; +export default Home; diff --git a/frontend/src/components/MainForm.tsx b/frontend/src/components/MainForm.tsx index 0a8d80e..cddb159 100644 --- a/frontend/src/components/MainForm.tsx +++ b/frontend/src/components/MainForm.tsx @@ -122,7 +122,7 @@ const MainForm: React.FC = () => { type="submit" className="mt-2 w-full rounded-xl bg-blue-600 px-4 py-3 text-base font-bold text-white shadow transition hover:bg-blue-700 active:bg-blue-800" > - Los Registrieren + Los registrieren

Wenn Sie die Daten eines Loses bearbeiten möchten,{" "} diff --git a/frontend/src/layout/Layout.tsx b/frontend/src/layout/Layout.tsx index 6f20ddc..786e95f 100644 --- a/frontend/src/layout/Layout.tsx +++ b/frontend/src/layout/Layout.tsx @@ -4,13 +4,14 @@ import "../App.css"; import { ToastContainer } from "react-toastify"; type LayoutProps = { - children: React.ReactNode; + children: React.ReactNode, + title: string }; -const Layout: React.FC = ({ children }) => { +const Layout: React.FC = ({ children, title }) => { return ( <> -

+
{children}