logo

TailwindCSSChatComponentWithAvatarsAndMessageStatus

InfoGeneratePackages

The provided code defines a Ruby class named `ChatWithImageHeaderAndFooterComponent`, which inherits from `ApplicationComponent`. This class is used to generate HTML content for a chat interface that includes images, headers, and footers for both the sender and receiver messages. The chat interface is styled with Tailwind CSS. The `template` method within this class constructs the HTML structure using Ruby blocks and methods such as `div`, `img`, `plain`, and `time` to create a chat session that visually represents a conversation between two fictional characters, Obi-Wan Kenobi and Anakin. Each message includes an avatar image, the name of the speaker in the chat header, a time stamp, the chat message content inside a bubble, and a chat footer indicating the message status ("Delivered" or "Seen at 12:46"). The code uses a consistent avatar for both messages and employs Tailwind CSS classes for styling, such as width, rounded images, text size, and opacity.

# frozen_string_literal: true

class ChatWithImageHeaderAndFooterComponent < ApplicationComponent
  def template
    div(class: "chat chat-start") do
      div(class: "chat-image avatar") do
        div(class: "w-10 rounded-full") do
          img(src: "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg", alt: "Tailwind CSS chat bubble component")
        end
      end
      div(class: "chat-header") do
        plain "Obi-Wan Kenobi"
        time(class: "text-xs opacity-50") { "12:45" }
      end
      div(class: "chat-bubble") { "You were the Chosen One!" }
      div(class: "chat-footer opacity-50") { "Delivered" }
    end
    div(class: "chat chat-end") do
      div(class: "chat-image avatar") do
        div(class: "w-10 rounded-full") do
          img(src: "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg", alt: "Tailwind CSS chat bubble component")
        end
      end
      div(class: "chat-header") do
        plain "Anakin"
        time(class: "text-xs opacity-50") { "12:46" }
      end
      div(class: "chat-bubble") { "I hate you!" }
      div(class: "chat-footer opacity-50") { "Seen at 12:46" }
    end
  end
end

Children