logo

TailwindCSS Styled Avatar Component

InfoGeneratePackages

The given code defines a Ruby class named `AvatarComponent`, which is a subclass of `ApplicationComponent`. The primary purpose of this class is to generate an HTML structure used to display a specific avatar image. The class contains a method named `template` that creates a HTML structure with nested `div` elements. The outer `div` has a class `avatar`, and the inner `div` has classes that include `w-24` and `rounded`, indicating the use of Tailwind CSS for styling, including setting the width and applying rounded borders. Inside the inner `div`, an `img` tag is used to display the image located at the provided URL. The description also mentions the possibility of using mask classes (e.g., `mask-squircle`, `mask-hexagon`, `mask-triangle`) for creating avatars with different shapes, which suggests that the avatar's appearance can be customized further by substituting the `rounded` class with `mask` related classes.

# frozen_string_literal: true

# use tailwind w-* classes to set size on child of .avatar
# use rounded-* to customize the border-radius of the image
# to use a masked avatar replace rounded with mask and use mask-* classes. ex: mask-squircle, mask-hexagon, mask-triangle

class AvatarComponent < ApplicationComponent
  def template
    div(class: "avatar") do
      div(class: "w-24 rounded") do
        img(src: "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg")
      end
    end
  end
end

Children