ProductDisplayCard
The given code defines a Ruby class named `ProductCardComponent` that inherits from `ApplicationComponent`. This class is designed to render a product card component in a web application. The product card displays the product's image, name, description, and includes a button directing users to the product's page, using the provided URL.
Key functionalities and details:
1. **Initialization**: The `initialize` method takes four keyword arguments - `name`, `image_url`, `description`, and `product_url`. These arguments are used to set instance variables that store information about the product.
2. **Template Rendering**: The `template` method defines the HTML structure of the product card using a DSL (Domain-Specific Language) for building HTML elements. Within this method:
- A `div` with the class `card card-compact w-96 bg-base-100 shadow-xl` is used to create a card layout.
- A `figure` element contains an `img` element where `src` and `alt` attributes use the product's image URL and name respectively.
- A `div` with the class `card-body` contains elements such as a `h2` for the product's name (with class `card-title`), a `p` tag for the product description, and another `div` for card actions.
- The card actions section features an anchor (`a`) tag styled as a button (`btn btn-primary`) which, when clicked, directs the user to the `product_url` specified. The button's text is "View Product".
Noteworthy details include the use of Tailwind CSS-like classes for styling and the DSL-like structure for creating HTML elements, suggesting this might be using a framework or library that simplifies HTML generation in Ruby.
# 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