Avatar

<div class="flex flex-wrap items-center gap-2">
  <%= render Ui::Avatar::Component.new(size: 8) %>
  <%= render Ui::Avatar::Component.new(size: 12) %>
  <%= render Ui::Avatar::Component.new(size: 16) %>
  <%= render Ui::Avatar::Component.new(size: 20) %>
</div>

<div class="flex flex-wrap items-center gap-2">
  <%= render Ui::Avatar::Component.new(full_name: "John Doe", size: 8) %>
  <%= render Ui::Avatar::Component.new(full_name: "John Doe", size: 12) %>
  <%= render Ui::Avatar::Component.new(full_name: "John Doe", size: 16) %>
  <%= render Ui::Avatar::Component.new(full_name: "John Doe", size: 20) %>
</div>

<div class="flex flex-wrap items-center gap-2">
  <%= render Ui::Avatar::Component.new(full_name: "John Doe", size: 8, variant: :rounded) %>
  <%= render Ui::Avatar::Component.new(full_name: "John Doe", size: 12, variant: :rounded) %>
  <%= render Ui::Avatar::Component.new(full_name: "John Doe", size: 16, variant: :rounded) %>
  <%= render Ui::Avatar::Component.new(full_name: "John Doe", size: 20, variant: :rounded) %>
</div>

<div class="flex flex-wrap items-center gap-2">
  <%= render Ui::Avatar::Component.new(full_name: "John Doe", size: 8, variant: :square) %>
  <%= render Ui::Avatar::Component.new(full_name: "John Doe", size: 12, variant: :square) %>
  <%= render Ui::Avatar::Component.new(full_name: "John Doe", size: 16, variant: :square) %>
  <%= render Ui::Avatar::Component.new(full_name: "John Doe", size: 20, variant: :square) %>
</div>