Banner offers accept-all, reject-all, and per-category granular controls

GDPR Recital 43 states that consent is not freely given when the data subject cannot refuse without detriment, and GDPR Art. 7 requires withdrawal to be as easy as giving consent. A banner with only an 'Accept All' button — no per-category controls, no reject path — is an unlawful consent mechanism regardless of its visual polish. Regulators treat accept-only banners as no consent at all, meaning every cookie set under them lacks lawful basis under both GDPR Art. 6(1)(a) and ePrivacy Art. 5(3).

Implement a three-path banner: Accept All, Reject All, and a per-category preference panel. All three must be reachable from the initial banner without extra navigational steps beyond opening the preferences panel.

export function CookieBanner({ onSave }: { onSave: (state: ConsentState) => void }) {
  const [showDetails, setShowDetails] = useState(false)
  const [analytics, setAnalytics] = useState(false)
  const [marketing, setMarketing] = useState(false)

  return (
    <div role="dialog" aria-label="Cookie consent">
      {showDetails && (
        <fieldset>
          <legend>Manage preferences</legend>
          <label>
            <input type="checkbox" checked={analytics}
              onChange={e => setAnalytics(e.target.checked)} />
            Analytics
          </label>
          <label>
            <input type="checkbox" checked={marketing}
              onChange={e => setMarketing(e.target.checked)} />
            Marketing
          </label>
        </fieldset>
      )}
      <button onClick={() => onSave({ analytics: true, marketing: true })}>Accept all</button>
      <button onClick={() => onSave({ analytics: false, marketing: false })}>Reject all</button>
      <button onClick={() => showDetails ? onSave({ analytics, marketing }) : setShowDetails(true)}>
        {showDetails ? 'Save preferences' : 'Manage preferences'}
      </button>
    </div>
  )
}