Cookie Settings Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the front page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Cookie settings button in the header opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same CookieFields component and share the block's state, so a switch flipped in the copy is flipped in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

CATEGORIES holds each category's switchable state, its sentence and its cookies, each with a name, who sets it, how long it lasts and what it does. Fill it from the cookies your site really sets, found by scanning it, so the table is true; a table that hides a cookie is worse than none. The counts under the category names come from the same lists, so they never disagree with the table.

Cookies that keep the site working, such as the session and the saved choice itself, need no consent and can't be refused without breaking it, so their switch is on and disabled, with a lock beside it, and named "Essential cookies, always on". Everything else starts off: nothing optional is on until a reader switches it on or chooses Accept all.

Here each one saves in local state, writes "Saved: Analytics on, Marketing off" on the drawn page's foot, closes the dialog and says so in a polite status message that nothing was stored. Closing without saving drops the switches back to what was last saved. In your app write the choice to your consent store in commit, set or clear the cookies and scripts of each category from it, and keep the table in step with what you set.

Yes. The real dialog is named by its title and described by its sentence, focus stays inside until it closes, and Escape, the close button and the three buttons all return focus to Cookie settings. A category is a button that marks itself as current and shows its detail, and its switch is a separate control with its own name, so selecting and switching never get mixed up. The table has a caption, column headers and the cookie name as its row header, and it takes focus as a region when it scrolls sideways. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus on Cookie settings.

The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with Save choices on top, and the two panes stack: the categories first, then the detail of the chosen one, scrolling above the actions. The detail panels share one place, so the sheet doesn't change height when another category is chosen. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.