ProductCardComponentBlueprint
The given code defines a Ruby class `ProductCardComponent` that inherits from `ApplicationComponent`. This class is responsible for rendering a product card in a web application, typically utilizing a Ruby on Rails framework with a frontend framework or library for UI components.
Here are the main functionalities and purpose of this code:
1. **Initialization**: The class is initialized with a `product` object. This object presumably contains attributes such as `image_url` and `name` which are important for rendering the product card.
2. **Template Method**: The `template` method defines the structure and content of the product card:
- **Card Container**: A `div` with classes `card`, `card-compact`, `w-96`, `bg-base-100`, and `shadow-xl` creates a styled card component.
- **Image**: The `figure` tag contains an `img` tag that displays the product's image using the `image_url` and `name` attributes from the `product` object.
- **Card Body**: Another `div` with class `card-body` contains:
- **Title**: A `h2` tag with class `card-title` that shows the product's name.
- **Link**: A paragraph (`p`) tag contains an anchor (`a`) tag that links to the product's detail page (`product_path(@product)`), with the link text
# frozen_string_literal: true
class ProductCardComponent < ApplicationComponent
def initialize(product)
@product = product
end
def template
div(class: "card card-compact w-96 bg-base-100 shadow-xl") do
figure { img(src: @product.image_url, alt: @product.name) }
div(class: "card-body") do
h2(class: "card-title") { @product.name }
p do
a(href: product_path(@product)) { "Learn more" }
end
div(class: "card-actions justify-end") do
button(class: "btn btn-primary") { "Buy Now" }
end
end
end
end
end