Appearance picker

render NitroKit::AppearancePicker.new(id: "gallery-appearance-default")

render NitroKit::AppearancePicker.new(
  id: "gallery-appearance-product",
  label: "Color appearance"
)

render NitroKit::AppearancePicker.new(
  id: "gallery-appearance-radios",
  presentation: :radios
)

render NitroKit::AppearancePicker.new(
  id: "gallery-appearance-select",
  presentation: :select
)

render NitroKit::AppearancePicker.new(
  id: "gallery-appearance-dropdown",
  presentation: :dropdown
)

NitroKit::AppearancePicker::PREFERENCES.each do |preference|
  sample("Rendered with preference: :#{preference}", slug: preference.to_s) do
    render NitroKit::AppearancePicker.new(
      id: "gallery-appearance-preference-#{preference}",
      label: "Saved appearance",
      preference:
    )
  end
end

sample("Navigation control", slug: "navigation-control") do
  render NitroKit::AppearancePicker.new(
    id: "gallery-appearance-navigation",
    label: "Site appearance"
  )
end

sample("Settings control", slug: "settings-control") do
  render NitroKit::AppearancePicker.new(
    id: "gallery-appearance-settings",
    label: "Account appearance"
  )
end

render NitroKit::Card.new(id: "gallery-appearance-card") do |card|
  card.title("Personalization", level: 3)
  card.body do
    p { "Choose a fixed appearance or keep this browser in step with the operating system." }
    render NitroKit::AppearancePicker.new(
      id: "gallery-appearance-card-control",
      label: "Interface appearance"
    )
  end
  card.footer do
    render NitroKit::Badge.new("Saved in this browser", variant: :outline, color: :neutral)
  end
end