logo

ProductCardBlueprint

InfoGenerateCreated ByPackages

The provided code defines a `ProductCardComponent` class that inherits from `ApplicationComponent`. This component is designed to display a product card with specific details, including the product name, image URL, description, and a link to the product URL. This is achieved through an `initialize` method, which assigns these details to instance variables, and a `template` method, which defines the HTML structure and styling of the card using a set of nested elements. The card is styled using Tailwind CSS classes, and it includes a title, an image, a description, and a link to view more details about the product. The `div`, `figure`, `img`, `h2`, `p`, and `a` methods are used to create the respective HTML tags.

# frozen_string_literal: true

class ProductCardComponent < ApplicationComponent
  def initialize(product_name:, image_url:, description:, product_url:)
    @product_name = product_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: @product_name) }
      div(class: "card-body") do
        h2(class: "card-title") { @product_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