Formular und Liste responsiv gestaltet

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-23 18:41:32 +02:00
parent 4acb1a5eca
commit cd96bdfc6a
5 changed files with 174 additions and 129 deletions
+5 -2
View File
@@ -8,6 +8,7 @@ import TabLayout from '@/components/TabLayout';
import { AusgabenEntry } from '@/types/ausgaben';
const MAX_ENTRIES = 15;
const MOBILE_ENTRIES = 5;
export default function Home() {
const [activeTab, setActiveTab] = useState(0); // 0 = Haushalt, 1 = Privat
@@ -69,11 +70,13 @@ export default function Home() {
<MonatsStatistik typ={activeTab} refreshKey={statsRefreshKey} />
<div className="mt-6 bg-white border border-black rounded-lg shadow-md p-6">
<h3 className="text-xl font-semibold mb-4">Letzte {MAX_ENTRIES} Einträge</h3>
<h3 className="text-xl font-semibold mb-4">
Letzte <span className="md:hidden">{MOBILE_ENTRIES}</span><span className="hidden md:inline">{MAX_ENTRIES}</span> Einträge
</h3>
{isLoading ? (
<div className="text-center py-4">Lade Daten...</div>
) : (
<AusgabenList entries={entries} onDelete={handleDelete} onEdit={handleEdit} />
<AusgabenList entries={entries} onDelete={handleDelete} onEdit={handleEdit} mobileLimit={MOBILE_ENTRIES} />
)}
</div>
</div>