Avatar

1
Avatar do
2
  div class: "w-24 rounded" do
3
    img src:
4
  end
5
end

1
["w-32", "w-20", "w-16", "w-8"].each do |width|
2
  Avatar do
3
    div class: "rounded #{width}" do
4
      img src:, alt:
5
    end
6
  end
7
end

1
Avatar do
2
  div class: "w-24 rounded-xl" do
3
    img src:, alt:
4
  end
5
end
6
7
Avatar do
8
  div class: "w-24 rounded-full" do
9
    img src:, alt:
10
  end
11
end

1
Avatar do
2
  Mask :squircle, class: "w-24" do
3
    img src:, alt:
4
  end
5
end
6
7
Avatar do
8
  Mask :hexagon, class: "w-24" do
9
    img src:, alt:
10
  end
11
end
12
13
Avatar do
14
  Mask :triangle, class: "w-24" do
15
    img src:, alt:
16
  end
17
end

1
AvatarGroup class: "-space-x-6 rtl:space-x-reverse" do |avatar_group|
2
  4.times do
3
    avatar_group.avatar do
4
      div class: "w-12" do
5
        img src:, alt:
6
      end
7
    end
8
  end
9
end

1
AvatarGroup class: "-space-x-6 rtl:space-x-reverse" do |avatar_group|
2
  3.times do
3
    avatar_group.avatar do
4
      div class: "w-12" do
5
        img src:, alt:
6
      end
7
    end
8
  end
9
10
  avatar_group.avatar :placeholder do
11
    div class: "w-12 bg-neutral text-neutral-content" do
12
      span do
13
        "+99"
14
      end
15
    end
16
  end
17
end

1
Avatar do
2
  classes = [
3
    "w-24",
4
    "rounded-full",
5
    "ring",
6
    "ring-primary",
7
    "ring-offset-base-100",
8
    "ring-offset-2"
9
  ]
10
11
  div class: classes do
12
    img src:, alt:
13
  end
14
end

1
Avatar :online do
2
  div class: "w-24 rounded-full" do
3
    img src:, alt:
4
  end
5
end
6
7
Avatar :offline do
8
  div class: "w-24 rounded-full" do
9
    img src:, alt:
10
  end
11
end

1
base_classes = [
2
  "rounded-full",
3
  "bg-neutral",
4
  "text-neutral-content"
5
]
6
7
Avatar :placeholder do
8
  div class: [*base_classes, "w-24"] do
9
    span class: "text-3xl" do
10
      "D"
11
    end
12
  end
13
end
14
15
Avatar :placeholder, :online do
16
  div class: [*base_classes, "w-16"] do
17
    span class: "text-xl" do
18
      "AI"
19
    end
20
  end
21
end
22
23
Avatar :placeholder do
24
  div class: [*base_classes, "w-12"] do
25
    span do
26
      "SY"
27
    end
28
  end
29
end
30
31
Avatar :placeholder do
32
  div class: [*base_classes, "w-8"] do
33
    span class: "text-xs" do
34
      "UI"
35
    end
36
  end
37
end