FantasyFranchiseSelectDropdown

Info Generate Packages

This code defines a Ruby class named `SelectComponent` which inherits from `ApplicationComponent`. Its primary functionality is to generate a template for a custom select dropdown input element within a web application. The `template` method constructs a structured HTML snippet using a series of labeled div and span elements surrounding a select element with its option elements. The select dropdown allows a user to choose their favorite fantasy franchise from a predefined list that includes "Star Wars", "Harry Potter", "Lord of the Rings", "Planet of the Apes", and "Star Trek". The code is designed with customization in mind, allowing for easy modifications to the select element's appearance by adding or altering CSS classes related to border style, color themes, and size. Noteworthy is the use of multiple span elements in both the upper and lower label regions which can serve as additional information or alternative label text, their content here is simply placeholder text reading "Alt label".

# frozen_string_literal: true

# Select component can be modified with:
# select-bordered, select-ghost
# color: select-primary, select-secondary, select-accent, select-info, select-success, select-warning, select-error
# size: select-lg, select-md, select-sm, select-xs
# All spans in the label are optional

class SelectComponent < ApplicationComponent
  def template
    label(class: "form-control w-full max-w-xs") do
      div(class: "label") do
        span(class: "label-text") { "Pick the best fantasy franchise" }
        span(class: "label-text-alt") { "Alt label" }
      end
      select(class: "select select-bordered") do
        option(disabled: true, selected: true) { "Pick one" }
        option { "Star Wars" }
        option { "Harry Potter" }
        option { "Lord of the Rings" }
        option { "Planet of the Apes" }
        option { "Star Trek" }
      end
      div(class: "label") do
        span(class: "label-text-alt") { "Alt label" }
        span(class: "label-text-alt") { "Alt label" }
      end
    end
  end
end

Try a prompt