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
<div class="" >
  <h3 class="px-4 text-xs font-semibold uppercase tracking-wider text-grayscale-500">Account</h3>
  <div class="mt-2 space-y-1">
    <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='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z'></path><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'></path></svg>
      </span>
      <span>Settings</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='M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'></path></svg>
      </span>
      <span>Help</span>
    </a>
    <a href="#" class="flex items-center px-4 py-2 rounded-md transition-colors text-grayscale-700 hover:bg-grayscale-100" data-turbo-method="delete">
      <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='M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1'></path></svg>
      </span>
      <span>Logout</span>
    </a>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
render BetterUi::Drawer::NavGroupComponent.new(title: "Account") do |group|
  group.with_item(label: "Settings", href: "#") do |item|
    item.with_icon { settings_icon }
  end
  group.with_item(label: "Help", href: "#") do |item|
    item.with_icon { help_icon }
  end
  group.with_item(label: "Logout", href: "#", method: :delete) do |item|
    item.with_icon { logout_icon }
  end
end

No notes provided.

No params configured.