theis.gaedigk/mcs-lose
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor layout components to include title prop and update header rendering; modify index and home pages for improved structure and icon usage

Browse Source
This commit is contained in:
Theis Gaedigk
2025-08-11 20:10:36 +02:00
parent 11384103c9
commit 97eaf1e484
6 changed files with 25 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/index.html
View File

@@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXRpY2tldC1pY29uIGx1Y2lkZS10aWNrZXQiPjxwYXRoIGQ9Ik0yIDlhMyAzIDAgMCAxIDAgNnYyYTIgMiAwIDAgMCAyIDJoMTZhMiAyIDAgMCAwIDItMnYtMmEzIDMgMCAwIDEgMC02VjdhMiAyIDAgMCAwLTItMkg0YTIgMiAwIDAgMC0yIDJaIi8+PHBhdGggZD0iTTEzIDV2MiIvPjxwYXRoIGQ9Ik0xMyAxN3YyIi8+PHBhdGggZD0iTTEzIDExdjIiLz48L3N2Zz4=" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>MCS Lose</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

6
frontend/src/components/Admin.tsx
View File

@@ -1,9 +1,13 @@
import "../App.css";
import Layout from "../layout/Layout";
import React from "react"; import React from "react";
const Admin: React.FC = () => { const Admin: React.FC = () => {
return ( return (
<> <>
<h1>Admin</h1> <Layout title="MCS Lose - Admin Panel">
<h1>Admin</h1>
</Layout>
</> </>
); );
}; };

12
frontend/src/components/Header.tsx
View File

@@ -1,14 +1,18 @@
import React from "react"; 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<HeaderProps> = ({ title }) => {
return ( return (
<header className="w-full border-b border-black/10 bg-gray-100/95 shadow-sm"> <header className="w-full border-b border-black/10 bg-gray-100/95 shadow-sm">
<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 md:px-6"> <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 md:px-6">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Award className="h-8 w-8 text-black" strokeWidth={2.6} /> <Ticket className="h-8 w-8 text-black" strokeWidth={2.6} />
<h1 className="text-2xl font-black tracking-tight text-neutral-900 md:text-3xl"> <h1 className="text-2xl font-black tracking-tight text-neutral-900 md:text-3xl">
MCS Lose {title}
</h1> </h1>
</div> </div>
<a href="/admin"> <a href="/admin">

10
frontend/src/components/Home.tsx
View File

@@ -1,16 +1,16 @@
import "../App.css"; import "../App.css";
import Layout from "../layout/Layout"; import Layout from "../layout/Layout";
import MainForm from "./MainForm"; import MainForm from "./MainForm";
import "react-toastify/dist/ReactToastify.css"; import React from "react";
function App() { const Home: React.FC = () => {
return ( return (
<> <>
<Layout> <Layout title="MCS Lose - Registrieren">
<MainForm /> <MainForm />
</Layout> </Layout>
</> </>
); );
} };
export default App; export default Home;

2
frontend/src/components/MainForm.tsx
View File

@@ -122,7 +122,7 @@ const MainForm: React.FC = () => {
type="submit" 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" 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
</button> </button>
<p className="mt-1 text-xs text-zinc-500"> <p className="mt-1 text-xs text-zinc-500">
Wenn Sie die Daten eines Loses bearbeiten möchten,{" "} Wenn Sie die Daten eines Loses bearbeiten möchten,{" "}

7
frontend/src/layout/Layout.tsx
View File

@@ -4,13 +4,14 @@ import "../App.css";
import { ToastContainer } from "react-toastify"; import { ToastContainer } from "react-toastify";
type LayoutProps = { type LayoutProps = {
children: React.ReactNode; children: React.ReactNode,
title: string
}; };
const Layout: React.FC<LayoutProps> = ({ children }) => { const Layout: React.FC<LayoutProps> = ({ children, title }) => {
return ( return (
<> <>
<Header /> <Header title={title} />
<main>{children}</main> <main>{children}</main>
<footer></footer> <footer></footer>
<ToastContainer <ToastContainer