Product Card Blueprint
This code defines a Ruby class `ProductCardComponent` which inherits from `ApplicationComponent`. The purpose of this class is to encapsulate the logic and structure for a product card UI component in a web application.
The `initialize` method takes four keyword arguments: `name`, `image_url`, `description`, and `product_url`, which are stored as instance variables. These attributes represent the product's name, image, description, and a URL for more product details, respectively.
The `template` method defines the HTML structure of the product card. It creates a `div` element with specific CSS classes for styling, containing nested elements such as an image (`img` tag) with the product's image URL and alt text, a title (`h2` tag) with the product's name, and a paragraph (`p` tag) with the product's description. Additionally, there is a link (`a` tag) styled as a button that directs the user to the product's URL with the text
# 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