TailwindCSSChatComponentWithAvatarsAndMessageStatus
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