Quickstart

@import '@peax/consent-banner-theme/styles.css';

'use client'

import { Banner } from '@peax/consent-banner-react'
import { useState } from 'react'

export type Preferences = Record<string, boolean>

type Props = {
	initialPreferences: Preferences | null
	onCommit: (preferences: Preferences) => void
}

export function CookieBanner({ initialPreferences, onCommit }: Props) {
	const [open, setOpen] = useState(initialPreferences === null)
	const [preferences, setPreferences] = useState<Preferences>(initialPreferences ?? {})

	function commit(next: Preferences) {
		onCommit(next) // The application saves this decision and enforces it.
		setPreferences(next)
		setOpen(false)
	}

	return (
		<>
			<button type="button" onClick={() => setOpen(true)}>
				Cookie choices
			</button>
			<Banner
				isOpen={open}
				showFloatingButton={false}
				hasAcceptRejectEqualWeight
				cookiePolicyUrl="/cookies"
				preferencesContent={Object.fromEntries(
					Object.entries(preferences).map(([id, checked]) => [id, { checked }]),
				)}
				onMsg={msg => {
					switch (msg.type) {
						case 'on_accept_all':
							commit({ essential: true, analytics: true, marketing: true })
							break
						case 'on_reject_all':
							commit({ essential: true, analytics: false, marketing: false })
							break
						case 'on_apply_preferences':
							commit(msg.preferences)
							break
						case 'on_change_preference':
						case 'on_open_preferences':
						case 'on_close_preferences':
							break // Navigation and uncommitted drafts stay inside the banner.
					}
				}}
			/>
		</>
	)
}