ProductCardDisplayComponent
This code defines a Ruby class named `ProductCardComponent` that inherits from `ApplicationComponent`. The purpose of this class is to render a product card component as an HTML structure with specific properties provided during initialization.
### Detailed Breakdown:
1. **Initialization (`initialize` method):**
- The class initializes with four attributes: `name`, `image_url`, `description`, and `product_url`.
- These attributes are used to populate the contents of the product card.
2. **Template Rendering (`template` method):**
- The `template` method uses a series of HTML element creation methods, presumably provided by the parent class or a related framework, to build the structure of a product card.
- The card has the following structure:
- **Container Div (Card):** A `div` with classes for styling as a card.
- **Image Section (Figure):** A `figure` containing an image element (`img`) with the source set to `@image_url` and the alt text set to `@name`.
- **Body Div:** A `div` with the class `card-body` that contains:
- **Title (`h2` element):** An `h2` displaying the product name (`@name`).
- **Description (`p` element):** A paragraph displaying the product description (`@description`).
- **Action Div:** Another `div` with classes for alignment, containing an anchor tag (`a`) that links to the product URL and has the class `btn btn-primary` with the text "View Product".
# 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