logo

ProductCardComponent

InfoGenerateCreated ByPackages

This code defines a Ruby class `ProductCardComponent` that inherits from `ApplicationComponent`. The class is designed to generate an HTML template for a product card with a compact design using Tailwind CSS. The class initializes with four parameters: `name`, `image_url`, `description`, and `product_url`, which are used to populate the content of the card. The `template` method creates a styled `div` element representing the card, which includes an image (`img`), a title (`h2`), a description (`p`), and a link (`a`) to view the product. The components within the card are styled using various CSS classes like `card`, `card-compact`, `w-96`, `bg-base-100`, `shadow-xl`, `card-body`, `card-title`, `card-actions`, and `btn btn-primary`. The overall purpose of this class is to provide a reusable component for displaying product information in a visually appealing card format on a web page.

# frozen_string_literal: true

class ProductCardComponent < ApplicationComponent
  def initialize(name:, image_url:, description:, product_url:)
    @name = name
    @image_url = image_url
    @description = description
    @product_url = product_url
  end

  def template
    div(class: "card card-compact w-96 bg-base-100 shadow-xl") do
      figure { img(src: @image_url, alt: @name) }
      div(class: "card-body") do
        h2(class: "card-title") { @name }
        p { @description }
        div(class: "card-actions justify-end") do
          a(href: @product_url, class: "btn btn-primary") { "View Product" }
        end
      end
    end
  end
end