ProductCardBlueprint

InfoGenerateCreated ByPackages

The `ProductCardComponent` class in the given Ruby code is a custom component that generates a product card for display in a web application. This class is a subclass of `ApplicationComponent`, and it initializes with four parameters: `name`, `image_url`, `description`, and `product_url`, which represent the product's name, the URL of the product's image, a description of the product, and the URL to view the product, respectively.

The primary functionality is defined in the `template` method, which returns a structured HTML template for the product card. The template includes:

- A div container with the CSS classes `card`, `card-compact`, `w-96`, `bg-base-100`, and `shadow-xl`.
- An image element (`img`) inside a `figure` container that displays the product image with the `src` attribute set to the `image_url` and the `alt` attribute set to the `name`.
- A div element with the `card-body` class that contains:
- An `h2` element with the `card-title` class displaying the product name.
- A `p` element displaying the product description.
- A div element with the `card-actions` and `justify-end` classes that contains an anchor (`a`) element with the `btn` and `btn-primary` classes, which links to `product_url` and displays the text "View Product".

This component encapsulates the structure and styling required to present a product card within the application, facilitating reusability and consistency across the application.

# 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