ProductCardBlueprint
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