StarWarsThemedChatComponentWithImages
This code defines a Ruby class named `ChatWithImageComponent` which inherits from `ApplicationComponent`. The class contains a method `template` that appears to generate HTML content for a chat interface with images. The HTML structure comprises multiple chat items, each containing an image and a chat bubble with text. The image is set to a static URL for all chat items, and each chat bubble contains a different piece of dialogue. The chat items are styled with classes indicating styling attributes like positioning (`chat-start`), the avatar image (`avatar`, `w-10`, `rounded-full`), and the chat bubble (`chat-bubble`). This suggests that the code is part of a web application's front-end, likely using Tailwind CSS for styling based on the class names and the alt text of the images. The dialogue referenced seems to be quotes from the Star Wars franchise, hinting at a themed or demonstration purpose rather than a real chat application.
# frozen_string_literal: true
class ChatWithImageComponent < 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-bubble") { "It was said that you would, destroy the Sith, not join them." }
end
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-bubble") { "It was you who would bring balance to the Force" }
end
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-bubble") { "Not leave it in Darkness" }
end
end
end