GlassEffectCardUIComponent
The code defines a Ruby class named `CardGlassComponent` which inherits from `ApplicationComponent`. This class is designed to generate HTML content for a UI component that resembles a card with a 'glass' effect. The `template` method within the class constructs the HTML structure of the card using a DSL (Domain Specific Language) for defining HTML content.
The card includes a figure section with an image of a car, and a card body that contains a title ('Life hack'), a paragraph with text ('How to park your car at your garage?'), and a section for card actions featuring a button ('Learn now!'). The elements are styled with specific classes to achieve the desired visual appearance like the 'glass' effect, which is a common design in modern UIs. The use of the 'div', 'figure', 'img', 'h2', 'p', and 'button' elements are structured in a way to create a visually appealing card component that is intended to be a part of a larger web application interface.
# frozen_string_literal: true
class CardGlassComponent < ApplicationComponent
def template
div(class: "card w-96 glass") do
figure { img(src: "https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg", alt: "car!") }
div(class: "card-body") do
h2(class: "card-title") { "Life hack" }
p { "How to park your car at your garage?" }
div(class: "card-actions justify-end") do
button(class: "btn btn-primary") { "Learn now!" }
end
end
end
end
end