CenteredContentCardWithImageAndAction
This Ruby code defines a custom component named `CardWithCenteredContentAndPaddingsComponent`, extending `ApplicationComponent`. The component is designed to generate HTML content dynamically for displaying a card with centered content and paddings. The HTML structure created within the `template` method includes a card with a maximum width of 96 units, containing an image and a section for textual content and a button, all arranged vertically and centered. The card's visual appearance is enhanced with background color, shadows, rounded corners for the image, and padding. The instance utilizes CSS classes for styling, likely from a framework such as Tailwind CSS and includes elements like figures, images, divs, headings, paragraphs, and buttons. It presents an image of shoes with a playful caption about a dog choosing shoes, followed by a 'Buy Now' button, indicating a commercial context for the card's usage, possibly in an e-commerce or advertising setting.
# frozen_string_literal: true
class CardWithCenteredContentAndPaddingsComponent < ApplicationComponent
def template
div(class: "card w-96 bg-base-100 shadow-xl") do
figure(class: "px-10 pt-10") do
img(src: "https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg", alt: "Shoes", class: "rounded-xl")
end
div(class: "card-body items-center text-center") do
h2(class: "card-title") { "Shoes!" }
p { "If a dog chews shoes whose shoes does he choose?" }
div(class: "card-actions") do
button(class: "btn btn-primary") { "Buy Now" }
end
end
end
end
end