logo

Product Card Component Blueprint

InfoGenerateCreated ByPackages

The code defines a `ProductCardComponent` class that inherits from `ApplicationComponent`. The purpose of this class is to generate an HTML structure for displaying product information in a card format. It initializes with parameters: `name`, `image_url`, `description`, and `product_page_url`. The `template` method constructs a card layout with a product image, name, description, and a link to the product page. The card has specific CSS classes for styling and includes a clickable button labeled "View Product" which redirects to the product's page.

# frozen_string_literal: true

# Load product information from an external file or database if necessary.
class ProductCardComponent < ApplicationComponent
  def initialize(name:, image_url:, description:, product_page_url:)
    @name = name
    @image_url = image_url
    @description = description
    @product_page_url = product_page_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_page_url, class: "btn btn-primary") { "View Product" }
        end
      end
    end
  end
end