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
<div class="" >
  <h3 class="px-4 text-xs font-semibold uppercase tracking-wider text-grayscale-500">Messages</h3>
  <div class="mt-2 space-y-1">
    <a href="#" class="flex items-center px-4 py-2 rounded-md transition-colors bg-primary-50 text-primary-700">
      <span class="w-5 h-5 mr-3 shrink-0">
        <svg class='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4'></path></svg>
      </span>
      <span>Inbox</span>
      <span class="ml-auto text-xs font-medium px-2 py-0.5 rounded-full bg-primary-100 text-primary-700">
        12
      </span>
    </a>
    <a href="#" class="flex items-center px-4 py-2 rounded-md transition-colors text-grayscale-700 hover:bg-grayscale-100">
      <span class="w-5 h-5 mr-3 shrink-0">
        <svg class='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 19l9 2-9-18-9 18 9-2zm0 0v-8'></path></svg>
      </span>
      <span>Sent</span>
    </a>
    <a href="#" class="flex items-center px-4 py-2 rounded-md transition-colors text-grayscale-700 hover:bg-grayscale-100">
      <span class="w-5 h-5 mr-3 shrink-0">
        <svg class='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'></path></svg>
      </span>
      <span>Drafts</span>
      <span class="ml-auto text-xs font-medium px-2 py-0.5 rounded-full bg-primary-100 text-primary-700">
        3
      </span>
    </a>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
render BetterUi::Drawer::NavGroupComponent.new(title: "Messages") do |group|
  group.with_item(label: "Inbox", href: "#", active: true) do |item|
    item.with_icon { inbox_icon }
    item.with_badge { "12" }
  end
  group.with_item(label: "Sent", href: "#") do |item|
    item.with_icon { sent_icon }
  end
  group.with_item(label: "Drafts", href: "#") do |item|
    item.with_icon { drafts_icon }
    item.with_badge { "3" }
  end
end

No notes provided.

No params configured.