75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
'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 (
|
|
<div className="min-h-screen py-8 px-4">
|
|
{/* Outer wrapper: ~10% wider than the inner max-w-6xl (72rem → ~79rem), with border */}
|
|
<div className="max-w-316 mx-auto border-2 border-black rounded-xl bg-gray-200 p-6">
|
|
|
|
{/* Page title */}
|
|
<h1 className="text-4xl font-bold text-center mb-6 tracking-tight">Werte-Log</h1>
|
|
|
|
{/* Inner content constrained to max-w-6xl */}
|
|
<div className="max-w-6xl mx-auto">
|
|
|
|
{/* Tab bar */}
|
|
<div className="flex justify-between items-end">
|
|
<div className="flex">
|
|
{TABS.map(tab => {
|
|
const isActive = pathname === tab.href;
|
|
return (
|
|
<Link
|
|
key={tab.href}
|
|
href={tab.href}
|
|
className="px-6 py-2 text-sm font-semibold border-t-2 border-l-2 border-r-2 rounded-tl-lg rounded-tr-lg mr-1 transition-colors"
|
|
style={
|
|
isActive
|
|
? { backgroundColor: '#FFFFDD', color: '#000000', borderColor: '#000000', borderBottom: '2px solid #FFFFDD', marginBottom: '-2px', position: 'relative', zIndex: 10 }
|
|
: { backgroundColor: '#85B7D7', color: '#374151', borderColor: '#000000' }
|
|
}
|
|
>
|
|
{tab.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="pb-1">
|
|
<LogoutButton className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm rounded-lg shadow-md" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content panel */}
|
|
<main className="border-2 border-black rounded-b-lg rounded-tr-lg p-6 bg-[#FFFFDD]">
|
|
{children}
|
|
</main>
|
|
<footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4">
|
|
<a href="mailto:rxf@gmx.de" className="hover:underline">
|
|
mailto:rxf@gmx.de
|
|
</a>
|
|
<div>Version {version} - {buildDate}</div>
|
|
</footer>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|