logo

FormCardComponent

InfoGenerateCreated ByPackages

This Ruby class defines a CardForFormComponent that generates HTML structure for a card-style form. The card has a specified design with a shadow, background color (base-100), and fixed width (w-96). Inside the card, there's a section for form actions with a button including an SVG icon. The form itself contains three input elements: a text input for 'Name', an email input for 'Email', and a submit button. Each form element is wrapped in a HTML div with the 'form-group' class for styling purposes.

# frozen_string_literal: true

class CardForFormComponent < ApplicationComponent
  def template
    div(class: "card w-96 bg-base-100 shadow-xl") do
      div(class: "card-body") do
        div(class: "card-actions justify-end") do
          button(class: "btn btn-square btn-sm") do
            svg(xmlns: "http://www.w3.org/2000/svg", class: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor") do |svg|
              svg.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "2", d: "M6 18L18 6M6 6l12 12")
            end
          end
        end
        form do
          div(class: "form-group") do
            label(for: "name") { "Name:" }
            input(type: "text", id: "name", name: "name", class: "input input-bordered")
          end
          div(class: "form-group") do
            label(for: "email") { "Email:" }
            input(type: "email", id: "email", name: "email", class: "input input-bordered")
          end
          div(class: "form-group") do
            button(type: "submit", class: "btn btn-primary") { "Submit" }
          end
        end
      end
    end
  end
end