Class: BetterUi::AvatarComponent

Inherits:
ApplicationComponent show all
Defined in:
app/components/better_ui/avatar_component.rb

Overview

An avatar component for displaying user profile images or initials.

Supports image display, initials fallback from a name, multiple sizes, shapes, color variants, status indicators, and a badge slot.

Examples:

With image

<%= render BetterUi::AvatarComponent.new(src: user.avatar_url, alt: user.name) %>

With initials fallback

<%= render BetterUi::AvatarComponent.new(name: "John Doe", variant: :primary) %>

With status indicator

<%= render BetterUi::AvatarComponent.new(
  src: user.avatar_url,
  name: user.name,
  status: :online,
  size: :lg
) %>

With badge slot

<%= render BetterUi::AvatarComponent.new(src: user.avatar_url) do |avatar| %>
  <% avatar.with_badge do %>
    <span class="bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
  <% end %>
<% end %>

Constant Summary collapse

SIZES =

Size configurations mapping to Tailwind dimension and text classes

{
  xs: "w-6 h-6 text-xs",
  sm: "w-8 h-8 text-sm",
  md: "w-10 h-10 text-base",
  lg: "w-14 h-14 text-lg",
  xl: "w-20 h-20 text-xl"
}.freeze
SHAPES =

Shape configurations mapping to Tailwind border-radius classes

{
  circle: "rounded-full",
  square: "rounded-none",
  rounded: "rounded-lg"
}.freeze
STATUSES =

Status indicator colors

i[online offline busy away].freeze
STATUS_DOT_SIZES =

Status dot size classes scaled by avatar size

{
  xs: "w-2 h-2",
  sm: "w-2 h-2",
  md: "w-2.5 h-2.5",
  lg: "w-3 h-3",
  xl: "w-4 h-4"
}.freeze

Constants inherited from ApplicationComponent

BetterUi::ApplicationComponent::SHADOWS, BetterUi::ApplicationComponent::VARIANTS, BetterUi::ApplicationComponent::VARIANT_BODY_DIVIDE, BetterUi::ApplicationComponent::VARIANT_DIVIDE, BetterUi::ApplicationComponent::VARIANT_HEADER_BG, BetterUi::ApplicationComponent::VARIANT_HEADER_TEXT, BetterUi::ApplicationComponent::VARIANT_HIGHLIGHTED, BetterUi::ApplicationComponent::VARIANT_HOVERABLE, BetterUi::ApplicationComponent::VARIANT_RING, BetterUi::ApplicationComponent::VARIANT_SORT_ICON, BetterUi::ApplicationComponent::VARIANT_STRIPED

Instance Method Summary collapse

Constructor Details

#initialize(src: nil, alt: nil, name: nil, variant: :primary, size: :md, shape: :circle, status: nil, container_classes: nil, **options) ⇒ AvatarComponent

Initializes a new avatar component.

Parameters:

  • src (String, nil) (defaults to: nil) —

    URL of the avatar image

  • alt (String, nil) (defaults to: nil) —

    Alt text for the image (falls back to name)

  • name (String, nil) (defaults to: nil) —

    Full name used to generate initials fallback

  • variant (Symbol) (defaults to: :primary) —

    Color variant for initials background

  • size (Symbol) (defaults to: :md) —

    Avatar size (:xs, :sm, :md, :lg, :xl)

  • shape (Symbol) (defaults to: :circle) —

    Avatar shape (:circle, :square, :rounded)

  • status (Symbol, nil) (defaults to: nil) —

    Status indicator (:online, :offline, :busy, :away)

  • container_classes (String, nil) (defaults to: nil) —

    Additional CSS classes for the outer wrapper

  • options (Hash) —

    Additional HTML attributes

Raises:

  • (ArgumentError) —

    if variant, size, shape, or status is invalid



77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
# File 'app/components/better_ui/avatar_component.rb', line 77

def initialize(
  src: nil,
  alt: nil,
  name: nil,
  variant: :primary,
  size: :md,
  shape: :circle,
  status: nil,
  container_classes: nil,
  **options
)
  @src = src
  @alt = alt
  @name = name
  @variant = validate_variant(variant)
  @size = validate_size(size)
  @shape = validate_shape(shape)
  @status = validate_status(status) if status
  @container_classes = container_classes
  @options = options
end

Instance Method Details

#with_badge ⇒ Object

Slot for rendering an optional badge overlay (e.g., notification count). Positioned at top-right of the avatar.

Yield Returns:

  • (String) —

    the HTML content for the badge



62
 
# File 'app/components/better_ui/avatar_component.rb', line 62

renders_one :badge