admin
2662b9a3e1
- Erledigte Einträge werden nicht mehr durchgestrichen, nur die Textfarbe wird blasser dargestellt - Erledigte Termine werden in der Liste hinter die offenen sortiert - Neuer Tab 'Liste' (Route /liste) mit einer read-only Übersicht aller Termine; TabLayout auf echte Tabs (Link/usePathname) umgestellt - AppointmentList: Handler optional, damit die Liste read-only nutzbar ist Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
102 lines
3.2 KiB
TypeScript
102 lines
3.2 KiB
TypeScript
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import { usePathname } from 'next/navigation';
|
||
import packageJson from '@/package.json';
|
||
|
||
interface TabLayoutProps {
|
||
children: React.ReactNode;
|
||
onPrint?: () => void;
|
||
}
|
||
|
||
const TABS = [
|
||
{ href: '/', label: 'Termine' },
|
||
{ href: '/liste', label: 'Liste' },
|
||
];
|
||
|
||
export default function TabLayout({ children, onPrint }: 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">
|
||
{/* Äußerer Rahmen */}
|
||
<div className="max-w-316 mx-auto border-2 border-black rounded-xl bg-gray-200 p-6">
|
||
{/* Seitentitel */}
|
||
<h1 className="text-4xl font-bold text-center mb-6 tracking-tight">
|
||
Arzt-Termine
|
||
</h1>
|
||
|
||
{/* Innerer Inhalt */}
|
||
<div className="max-w-6xl mx-auto">
|
||
{/* Tab-Leiste */}
|
||
<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>
|
||
{onPrint && (
|
||
<div className="pb-1">
|
||
<button
|
||
onClick={onPrint}
|
||
className="px-4 py-2 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black text-sm rounded-lg shadow-md transition-colors"
|
||
>
|
||
🖨️ Aktuelle Termine drucken
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Inhaltsbereich */}
|
||
<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>
|
||
);
|
||
}
|