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
<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">
    <div class="lg:hidden flex items-center mr-2">
      <button class='p-2 text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100 rounded-md lg:hidden'>
        <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='M4 6h16M4 12h16M4 18h16'></path></svg>
      </button>
    </div>
    <div class='flex items-center'>
      <div class='w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center text-white font-bold'>B</div>
      <span class='ml-2 font-semibold text-lg'>BetterUI</span>
    </div>
  </div>
  <div class="hidden lg:flex flex-1 items-center justify-center px-4">
    <nav class='flex gap-6'>
      <a href='#' class='text-primary-600 font-medium'>Dashboard</a>
      <a href='#' class='text-grayscale-600 hover:text-grayscale-900'>Projects</a>
      <a href='#' class='text-grayscale-600 hover:text-grayscale-900'>Team</a>
      <a href='#' class='text-grayscale-600 hover:text-grayscale-900'>Settings</a>
    </nav>
  </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='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'></path></svg>
      </button>
      <button class='text-grayscale-600 hover:text-grayscale-900 relative'>
        <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>
        <span class='absolute -top-1 -right-1 w-2 h-2 bg-danger-500 rounded-full'></span>
      </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
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
render BetterUi::Drawer::HeaderComponent.new do |header|
  header.with_mobile_menu_button do
    "<button class='p-2 text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100 rounded-md lg:hidden'>
      <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='M4 6h16M4 12h16M4 18h16'></path></svg>
    </button>".html_safe
  end
  header.with_logo do
    "<div class='flex items-center'>
      <div class='w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center text-white font-bold'>B</div>
      <span class='ml-2 font-semibold text-lg'>BetterUI</span>
    </div>".html_safe
  end
  header.with_navigation do
    "<nav class='flex gap-6'>
      <a href='#' class='text-primary-600 font-medium'>Dashboard</a>
      <a href='#' class='text-grayscale-600 hover:text-grayscale-900'>Projects</a>
      <a href='#' class='text-grayscale-600 hover:text-grayscale-900'>Team</a>
      <a href='#' class='text-grayscale-600 hover:text-grayscale-900'>Settings</a>
    </nav>".html_safe
  end
  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='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'></path></svg>
      </button>
      <button class='text-grayscale-600 hover:text-grayscale-900 relative'>
        <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>
        <span class='absolute -top-1 -right-1 w-2 h-2 bg-danger-500 rounded-full'></span>
      </button>
      <div class='w-8 h-8 bg-primary-500 rounded-full'></div>
    </div>".html_safe
  end
end

No notes provided.

No params configured.