e04816cfe5
Extract components and hooks from 4 oversized pages (518–508 LOC each) to bring each page.tsx under 300 LOC (hard cap 500). Zero behavior changes. - dsr/new: TypeSelector, SourceSelector → _components/; useNewDSRForm → _hooks/ - compliance-hub: QuickActions, StatsRow, DomainChart, MappingsAndFindings, RegulationsTable → _components/; useComplianceHub → _hooks/ - iace/[projectId]/monitoring: Badges, EventForm, ResolveModal, TimelineEvent → _components/; useMonitoring → _hooks/ - cookie-banner: BannerPreview, CategoryCard → _components/; useCookieBanner → _hooks/ Result: page.tsx LOC: dsr/new=259, compliance-hub=95, monitoring=157, cookie-banner=212 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import { BannerConfig, BannerTexts, CookieCategory } from '../_hooks/useCookieBanner'
|
|
|
|
export function BannerPreview({
|
|
config,
|
|
categories,
|
|
bannerTexts,
|
|
}: {
|
|
config: BannerConfig
|
|
categories: CookieCategory[]
|
|
bannerTexts: BannerTexts
|
|
}) {
|
|
return (
|
|
<div className="relative bg-gray-100 rounded-xl p-8 min-h-64 flex items-end justify-center">
|
|
<div className="absolute inset-0 flex items-center justify-center text-gray-400 text-sm">
|
|
Website-Vorschau
|
|
</div>
|
|
<div
|
|
className={`w-full max-w-2xl bg-white rounded-xl shadow-xl p-6 border-2 ${
|
|
config.position === 'center' ? 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2' : ''
|
|
}`}
|
|
style={{ borderColor: config.primaryColor }}
|
|
>
|
|
<h4 className="font-semibold text-gray-900">{bannerTexts.title}</h4>
|
|
<p className="text-sm text-gray-600 mt-2">
|
|
{bannerTexts.description}
|
|
</p>
|
|
<div className="mt-4 flex items-center gap-3">
|
|
<button
|
|
className="px-4 py-2 rounded-lg text-white text-sm font-medium"
|
|
style={{ backgroundColor: config.primaryColor }}
|
|
>
|
|
Alle akzeptieren
|
|
</button>
|
|
{config.showDeclineAll && (
|
|
<button className="px-4 py-2 rounded-lg border border-gray-300 text-gray-700 text-sm font-medium">
|
|
Alle ablehnen
|
|
</button>
|
|
)}
|
|
{config.showSettings && (
|
|
<button className="px-4 py-2 text-sm text-gray-600 hover:underline">
|
|
Einstellungen
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|