# frozen_string_literal: true module Plutonium module UI # Component for selecting color mode (light/dark/system) # @example Basic usage # render ColorModeSelector.new class ColorModeSelector < Plutonium::UI::Component::Base # Common CSS classes used across the component COMMON_CLASSES = { button: "w-full block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600", icon: "w-6 h-6 text-gray-800 dark:text-white", trigger: "inline-flex justify-center p-2 text-gray-500 rounded cursor-pointer dark:hover:text-white dark:text-gray-200 hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-600", dropdown: "hidden z-50 my-4 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700" }.freeze # Available color modes with their associated icons and actions COLOR_MODES = [ {label: "Light", icon: Phlex::TablerIcons::Sun, action: "setLightColorMode"}, {label: "Dark", icon: Phlex::TablerIcons::Moon, action: "setDarkColorMode"}, {label: "System", icon: Phlex::TablerIcons::DeviceDesktop, action: "setSystemColorMode"} ].freeze # Renders the color mode selector # @return [void] def view_template div(data_controller: "resource-drop-down") do render_dropdown_trigger render_dropdown_menu end end private # @private def render_dropdown_trigger button( type: "button", data_resource_drop_down_target: "trigger", class: COMMON_CLASSES[:trigger] ) do render Phlex::TablerIcons::Adjustments.new(class: COMMON_CLASSES[:icon]) end end # @private def render_dropdown_menu div( class: COMMON_CLASSES[:dropdown], data_resource_drop_down_target: "menu" ) do render_color_mode_options end end # @private def render_color_mode_options ul(class: "py-1", role: "none") do COLOR_MODES.each do |mode| render_color_mode_button(**mode) end end end # @private # @param label [String] The text label for the button # @param icon [Class] The TablerIcon class to render # @param action [String] The color-mode controller action to trigger def render_color_mode_button(label:, icon:, action:) li do button( type: "button", class: COMMON_CLASSES[:button], role: "menuitem", data_action: "click->color-mode##{action}" ) do div(class: "flex justify-start") do render icon.new(class: COMMON_CLASSES[:icon]) plain " #{label}" end end end end end end end