ProductCard
This code defines a ProductCardComponent class, which extends from the ApplicationComponent class. The purpose of this component is to render a product card using HTML markup and specific CSS classes. The product card features a name, an image, a description, and a link to view the product. Here's a high-level breakdown:
- The initializer method (`initialize`) sets up instance variables for the product's name, image URL, description, and product URL.
- The `template` method constructs the HTML structure for the card with specific styling classes (`card`, `card-compact`, `bg-base-100`, `shadow-xl`).
- The card includes an image (`img`) with the product's image URL and name as the alt text.
- The card body (`div.class: 'card-body'`) encloses the product's name wrapped in an H2 tag, the product's description in a paragraph tag, and a link (`a`) to the product URL styled as a button 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