diff --git a/app/page.tsx b/app/page.tsx index eff9698..2b4f38f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,21 +1,16 @@ 'use client'; import { useState, useEffect } from 'react'; -import Link from 'next/link'; import WerteForm from '@/components/WerteForm'; import WerteList from '@/components/WerteList'; import { WerteEntry } from '@/types/werte'; -import packageJson from '@/package.json'; -import LogoutButton from '@/components/LogoutButton'; +import TabLayout from '@/components/TabLayout'; export default function Home() { const [entries, setEntries] = useState([]); const [isLoading, setIsLoading] = useState(true); const [selectedEntry, setSelectedEntry] = useState(null); - const version = packageJson.version; - const buildDate = process.env.NEXT_PUBLIC_BUILD_DATE || new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }); - useEffect(() => { let isMounted = true; @@ -81,23 +76,8 @@ export default function Home() { }; return ( -
-
-
-

Werte - Log

-
- - {'Verlauf ->'} - - -
-
- -
+ +

Eingabe

@@ -111,15 +91,6 @@ export default function Home() { )}
- -
-
+ ); } diff --git a/components/ChartsClient.tsx b/components/ChartsClient.tsx index ce4ae6a..9a97dc6 100644 --- a/components/ChartsClient.tsx +++ b/components/ChartsClient.tsx @@ -1,12 +1,11 @@ 'use client'; import { useState, useEffect, useCallback } from 'react'; -import Link from 'next/link'; import Highcharts from 'highcharts'; import HighchartsReact from 'highcharts-react-official'; import type { Options } from 'highcharts'; import { WerteEntry } from '@/types/werte'; -import LogoutButton from '@/components/LogoutButton'; +import TabLayout from '@/components/TabLayout'; const COLOR_ZUCKER = '#e67e22'; const COLOR_DRUCKS = '#c0392b'; @@ -209,21 +208,7 @@ export default function ChartsClient() { } as Options; return ( -
-
- {/* Header */} -
-

Werte – Verlauf

-
- - {'<- Eingabe'} - - -
-
+ {/* Date range picker */}
@@ -283,7 +268,6 @@ export default function ChartsClient() {
)} - - + ); } diff --git a/components/TabLayout.tsx b/components/TabLayout.tsx new file mode 100644 index 0000000..0f1c722 --- /dev/null +++ b/components/TabLayout.tsx @@ -0,0 +1,74 @@ +'use client'; + +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; +import LogoutButton from '@/components/LogoutButton'; +import packageJson from '@/package.json'; + +interface TabLayoutProps { + children: React.ReactNode; +} + +const TABS = [ + { href: '/', label: 'Eingabe' }, + { href: '/charts', label: 'Verlauf' }, +]; + +export default function TabLayout({ children }: TabLayoutProps) { + const pathname = usePathname(); + const version = packageJson.version; + const buildDate = process.env.NEXT_PUBLIC_BUILD_DATE || new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }); + + return ( +
+ {/* Outer wrapper: ~10% wider than the inner max-w-6xl (72rem → ~79rem), with border */} +
+ + {/* Page title */} +

Werte-Log

+ + {/* Inner content constrained to max-w-6xl */} +
+ + {/* Tab bar */} +
+
+ {TABS.map(tab => { + const isActive = pathname === tab.href; + return ( + + {tab.label} + + ); + })} +
+
+ +
+
+ + {/* Content panel */} +
+ {children} +
+ + +
+
+
+ ); +}