DynamicCardWithBadgeComponent
The provided code defines a custom Ruby class named `CardWithBadgeComponent` which extends `ApplicationComponent`. This class is designed to generate the HTML structure for a card component with a badge. This card component includes an image, title, description text, and badges indicating categories or statuses, such as 'NEW', 'Fashion', and 'Products'. The `template` method within the class uses a DSL (Domain-Specific Language) to define the HTML structure dynamically. Noteworthy features include a figure element for the image, a card title with an embedded badge, paragraph text, and card actions with additional badges. The styling classes used ('card', 'badge', etc.) suggest that this code is intended for a web application leveraging a CSS framework, likely Tailwind CSS in conjunction with the DaisyUI plugin, given the class names and the URL for the image source.
# frozen_string_literal: true
class CardWithBadgeComponent < ApplicationComponent
def template
div(class: "card w-96 bg-base-100 shadow-xl") do
figure { img(src: "https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg", alt: "Shoes") }
div(class: "card-body") do
h2(class: "card-title") do
plain "Shoes!"
div(class: "badge badge-secondary") { "NEW" }
end
p { "If a dog chews shoes whose shoes does he choose?" }
div(class: "card-actions justify-end") do
div(class: "badge badge-outline") { "Fashion" }
div(class: "badge badge-outline") { "Products" }
end
end
end
end
end