logo

CompactProductCardComponent

InfoGeneratePackages

The provided code snippet is a Ruby class definition for a component called `CompactCardComponent`, which inherits from a base class named `ApplicationComponent`. This component is designed to render a compact card-like user interface element. The `template` method within this class generates the HTML structure for the card which includes an image, a title, a descriptive paragraph, and a 'Buy Now' button. The card is styled with specific classes (`card`, `card-compact`, `w-96`, `bg-base-100`, `shadow-xl`) to dictate its appearance, likely using a CSS framework like Tailwind CSS. The card also features responsive design elements, as indicated by the usage of the width class (`w-96`). Moreover, the `card-actions justify-end` class within the button's container suggests that the action button is aligned to the end (right side) of the card. This component could be utilized in web applications to display products or other items in an attractive, concise manner, inviting user interaction through the 'Buy Now' button.

# frozen_string_literal: true

class CompactCardComponent < ApplicationComponent
  def template
    div(class: "card card-compact w-96 bg-base-100 shadow-xl") do
      figure { img(src: "https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg", alt: "Shoes") }
      div(class: "card-body") do
        h2(class: "card-title") { "Shoes!" }
        p { "If a dog chews shoes whose shoes does he choose?" }
        div(class: "card-actions justify-end") do
          button(class: "btn btn-primary") { "Buy Now" }
        end
      end
    end
  end
end

Children