PromotionalMovieCardComponent

Info Generate Packages

This Ruby code defines a class `CardWithImageOnSideComponent` which is derived from `ApplicationComponent`. The primary purpose of this class is to render a UI component that resembles a card with an image on its side. This is intended for a web application, potentially using a Ruby on Rails-like framework with support for view components.

**Functionalities Include:**
- The `template` method within the class generates HTML content for a card styled using classes suggesting a CSS framework like Tailwind CSS or a similar utility-first CSS framework (indicated by class names like `bg-base-100` and `shadow-xl`).
- The card displays an image (with a fixed URL pointing to a sample image on `daisyui.com`) on one side and textual content on the other side. This text includes a headline announcing a new movie release, a brief description inviting the user to click a button, and a primary button labeled 'Watch' positioned at the end of the card body.
- The method uses a domain-specific language (DSL) for defining the structure and layout of the card component, indicating a Ruby-centric view templating approach. This could be part of a larger view system in a web application where components can be reused across different parts of the app.

**Noteworthy Details:**
- Use of `frozen_string_literal: true` at the top suggests an emphasis on immutable strings for performance optimization in Ruby.
- The use of a fixed image URL and static text implies that this component is not dynamic and might be used for a specific promotional purpose or as a placeholder during development.
- The component is designed to be responsive and visually appealing, as inferred from the use of CSS classes for styling (`bg-base-100`, `shadow-xl`, `btn-primary`), reflecting a modern UI/UX design philosophy.

# frozen_string_literal: true

class CardWithImageOnSideComponent < ApplicationComponent
  def template
    div(class: "card card-side bg-base-100 shadow-xl") do
      figure { img(src: "https://daisyui.com/images/stock/photo-1635805737707-575885ab0820.jpg", alt: "Movie") }
      div(class: "card-body") do
        h2(class: "card-title") { "New movie is released!" }
        p { "Click the button to watch on Jetflix app." }
        div(class: "card-actions justify-end") do
          button(class: "btn btn-primary") { "Watch" }
        end
      end
    end
  end
end

Try a prompt