BetterUi Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
<header class="w-full h-16 bg-white border-b border-grayscale-200 text-grayscale-900 sticky top-0 flex items-center justify-between px-4 z-40" >
  <div class="flex items-center shrink-0">
    Brand
  </div>
  <div class="flex items-center gap-2">
    <div class='flex items-center gap-4'>
      <button class='text-grayscale-600 hover:text-grayscale-900'>
        <svg class='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9'></path></svg>
      </button>
      <div class='w-8 h-8 bg-primary-500 rounded-full'></div>
    </div>
  </div>
</header>
1
2
3
4
5
6
7
8
9
10
11
render BetterUi::Drawer::HeaderComponent.new do |header|
  header.with_logo { "Brand" }
  header.with_actions do
    "<div class='flex items-center gap-4'>
      <button class='text-grayscale-600 hover:text-grayscale-900'>
        <svg class='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9'></path></svg>
      </button>
      <div class='w-8 h-8 bg-primary-500 rounded-full'></div>
    </div>".html_safe
  end
end

No notes provided.

No params configured.