92a730626d
Extract nav tabs, detail modal, table row, stats grid, search/filter, records table, pagination, and data-loading hook into _components/ and _hooks/. page.tsx reduced from 833 to 114 LOC. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import {
|
|
Database,
|
|
FileText,
|
|
Cookie,
|
|
Clock,
|
|
LayoutGrid,
|
|
} from 'lucide-react'
|
|
|
|
const EINWILLIGUNGEN_TABS = [
|
|
{
|
|
id: 'overview',
|
|
label: 'Übersicht',
|
|
href: '/sdk/einwilligungen',
|
|
icon: LayoutGrid,
|
|
description: 'Consent-Tracking Dashboard',
|
|
},
|
|
{
|
|
id: 'catalog',
|
|
label: 'Datenpunktkatalog',
|
|
href: '/sdk/einwilligungen/catalog',
|
|
icon: Database,
|
|
description: '18 Kategorien, 128 Datenpunkte',
|
|
},
|
|
{
|
|
id: 'privacy-policy',
|
|
label: 'DSI Generator',
|
|
href: '/sdk/einwilligungen/privacy-policy',
|
|
icon: FileText,
|
|
description: 'Datenschutzinformation erstellen',
|
|
},
|
|
{
|
|
id: 'cookie-banner',
|
|
label: 'Cookie-Banner',
|
|
href: '/sdk/einwilligungen/cookie-banner',
|
|
icon: Cookie,
|
|
description: 'Cookie-Consent konfigurieren',
|
|
},
|
|
{
|
|
id: 'retention',
|
|
label: 'Löschmatrix',
|
|
href: '/sdk/einwilligungen/retention',
|
|
icon: Clock,
|
|
description: 'Aufbewahrungsfristen verwalten',
|
|
},
|
|
]
|
|
|
|
export function EinwilligungenNavTabs() {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl border border-gray-200 p-2 mb-6">
|
|
<div className="flex flex-wrap gap-2">
|
|
{EINWILLIGUNGEN_TABS.map((tab) => {
|
|
const Icon = tab.icon
|
|
const isActive = pathname === tab.href
|
|
|
|
return (
|
|
<Link
|
|
key={tab.id}
|
|
href={tab.href}
|
|
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
|
|
isActive
|
|
? 'bg-purple-100 text-purple-900 shadow-sm'
|
|
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
|
|
}`}
|
|
>
|
|
<Icon className={`w-5 h-5 ${isActive ? 'text-purple-600' : 'text-gray-400'}`} />
|
|
<div>
|
|
<div className={`font-medium text-sm ${isActive ? 'text-purple-900' : ''}`}>
|
|
{tab.label}
|
|
</div>
|
|
<div className="text-xs text-gray-500">{tab.description}</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|