BetterUi Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<div class="flex flex-wrap items-center gap-6 p-4">
  <div class="flex flex-col items-center gap-2">
    <div class="relative inline-flex ">
      <img src="https://i.pravatar.cc/150?u=online" alt="User online" class="w-14 h-14 text-lg rounded-full object-cover" />
      <span class="absolute bottom-0 right-0 block bg-success-500 w-3 h-3 rounded-full ring-2 ring-white"></span>
    </div>
    <span class="text-sm text-grayscale-600">online</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <div class="relative inline-flex ">
      <img src="https://i.pravatar.cc/150?u=offline" alt="User offline" class="w-14 h-14 text-lg rounded-full object-cover" />
      <span class="absolute bottom-0 right-0 block bg-grayscale-400 w-3 h-3 rounded-full ring-2 ring-white"></span>
    </div>
    <span class="text-sm text-grayscale-600">offline</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <div class="relative inline-flex ">
      <img src="https://i.pravatar.cc/150?u=busy" alt="User busy" class="w-14 h-14 text-lg rounded-full object-cover" />
      <span class="absolute bottom-0 right-0 block bg-danger-500 w-3 h-3 rounded-full ring-2 ring-white"></span>
    </div>
    <span class="text-sm text-grayscale-600">busy</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <div class="relative inline-flex ">
      <img src="https://i.pravatar.cc/150?u=away" alt="User away" class="w-14 h-14 text-lg rounded-full object-cover" />
      <span class="absolute bottom-0 right-0 block bg-warning-500 w-3 h-3 rounded-full ring-2 ring-white"></span>
    </div>
    <span class="text-sm text-grayscale-600">away</span>
  </div>
</div>
<div class="flex flex-wrap items-center gap-6 p-4 mt-4">
  <div class="flex flex-col items-center gap-2">
    <div class="relative inline-flex ">
      <div class="w-14 h-14 text-lg rounded-full bg-secondary-100 text-secondary-700 flex items-center justify-center font-medium">
        JS
      </div>
      <span class="absolute bottom-0 right-0 block bg-success-500 w-3 h-3 rounded-full ring-2 ring-white"></span>
    </div>
    <span class="text-sm text-grayscale-600">online</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <div class="relative inline-flex ">
      <div class="w-14 h-14 text-lg rounded-full bg-secondary-100 text-secondary-700 flex items-center justify-center font-medium">
        JS
      </div>
      <span class="absolute bottom-0 right-0 block bg-grayscale-400 w-3 h-3 rounded-full ring-2 ring-white"></span>
    </div>
    <span class="text-sm text-grayscale-600">offline</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <div class="relative inline-flex ">
      <div class="w-14 h-14 text-lg rounded-full bg-secondary-100 text-secondary-700 flex items-center justify-center font-medium">
        JS
      </div>
      <span class="absolute bottom-0 right-0 block bg-danger-500 w-3 h-3 rounded-full ring-2 ring-white"></span>
    </div>
    <span class="text-sm text-grayscale-600">busy</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <div class="relative inline-flex ">
      <div class="w-14 h-14 text-lg rounded-full bg-secondary-100 text-secondary-700 flex items-center justify-center font-medium">
        JS
      </div>
      <span class="absolute bottom-0 right-0 block bg-warning-500 w-3 h-3 rounded-full ring-2 ring-white"></span>
    </div>
    <span class="text-sm text-grayscale-600">away</span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="flex flex-wrap items-center gap-6 p-4">
  <% [:online, :offline, :busy, :away].each do |status| %>
    <div class="flex flex-col items-center gap-2">
      <%= render BetterUi::AvatarComponent.new(
        src: "https://i.pravatar.cc/150?u=#{status}",
        alt: "User #{status}",
        size: :lg,
        status: status
      ) %>
      <span class="text-sm text-grayscale-600"><%= status %></span>
    </div>
  <% end %>
</div>
<div class="flex flex-wrap items-center gap-6 p-4 mt-4">
  <% [:online, :offline, :busy, :away].each do |status| %>
    <div class="flex flex-col items-center gap-2">
      <%= render BetterUi::AvatarComponent.new(
        name: "Jane Smith",
        variant: :secondary,
        size: :lg,
        status: status
      ) %>
      <span class="text-sm text-grayscale-600"><%= status %></span>
    </div>
  <% end %>
</div>

No notes provided.

No params configured.