RadioControlledAccordionComponent

Info Generate Packages

This code snippet defines a Ruby class named `AccordionWithArrowIconComponent` that inherits from `ApplicationComponent`. Its primary purpose is to generate an HTML structure for a styled accordion component, using a domain-specific language for templating. The accordion comprises three sections, each with a `collapse-arrow` and `bg-base-200` class styling. The first section is initialized as open (checked), and the rest are closed by default. Each section contains a radio input to facilitate exclusive selection (opening one closes the others), a title indicating it can be clicked to open/close, and content with a sample text "hello". This is likely designed for a web framework that supports server-side HTML template generation with Ruby code, integrating CSS for styling and potentially JavaScript for behavior.

# frozen_string_literal: true

class AccordionWithArrowIconComponent < ApplicationComponent
  def template
    div(class: "gap-2") do
      div(class: "collapse collapse-arrow bg-base-200") do
        input(type: "radio", name: "my-accordion-2", checked: "checked")
        div(class: "collapse-title text-xl font-medium") { "Click to open this one and close others" }
        div(class: "collapse-content") do
          p { "hello" }
        end
      end
      div(class: "collapse collapse-arrow bg-base-200") do
        input(type: "radio", name: "my-accordion-2")
        div(class: "collapse-title text-xl font-medium") { "Click to open this one and close others" }
        div(class: "collapse-content") do
          p { "hello" }
        end
      end
      div(class: "collapse collapse-arrow bg-base-200") do
        input(type: "radio", name: "my-accordion-2")
        div(class: "collapse-title text-xl font-medium") { "Click to open this one and close others" }
        div(class: "collapse-content") do
          p { "hello" }
        end
      end
    end
  end
end

Try a prompt