CompactProductCardComponent
This Ruby code defines a class called `ProductCardComponent` that inherits from `ApplicationComponent`. The purpose of this class is to represent and render a product card component, typically used in web development (possibly within a Ruby on Rails application with a component-based architecture).
Key functionalities and noteworthy details:
1. **Initialization:** The class is initialized with four parameters: `name`, `image_url`, `description`, and `product_url`. These are expected to be attributes related to a product, which the component will display.
2. **`template` Method:** This method generates HTML content which describes the structure of the product card using a DSL (domain-specific language) approach often used with Ruby templating engines like Rails' "ViewComponent" or "Phlex".
- A `div` with card styling is created, representing the outer container of the card.
- A `figure` tag contains an `img` tag to display the product's image, using the provided `image_url` and `name` as the `alt` attribute.
- Another `div` with class `card-body` contains:
- An `h2` header displaying the product `name`.
- A paragraph tag `
` with an anchor tag `` that links to the `product_url` and displays the `description` of the product.
- A `div` with class `card-actions justify-end` that includes a "Buy Now" button, styled with a primary button class.
3. **Styling and Structure:** The CSS classes indicate utility and predefined styles are being applied, suggesting integration with a CSS framework like Tailwind CSS or similar.
Overall, this component is designed to encapsulate the presentation logic of a product card, allowing it to be reused and consistently styled throughout a web 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 { a(href: @product_url) { @description } }
div(class: "card-actions justify-end") do
button(class: "btn btn-primary") { "Buy Now" }
end
end
end
end
end