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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<div class="flex flex-col min-h-screen" data-testid="page-component"> <header class="py-6" data-testid="page-header"> <div class="flex flex-col gap-8"> <div class="px-10"><nav aria-label="Breadcrumb" data-testid="breadcrumbs"> <ol class="flex items-center"> <li class="flex text-sm items-center text-secondary whitespace-nowrap"> <a class="underline hover:no-underline focus:no-underline text-secondary hover:text-primary" href="#">Breadcrumb 1</a> </li> <li class="flex text-sm items-center text-secondary whitespace-nowrap"> <span aria-hidden="true" class="mx-2">/</span> <a class="underline hover:no-underline focus:no-underline text-secondary hover:text-primary" href="#">Breadcrumb 2</a> </li> <li aria-current="page" class="flex text-sm items-center text-secondary whitespace-nowrap"> <span aria-hidden="true" class="mx-2">/</span> Breadcrumb 3 </li> </ol> </nav></div> <div class="px-10 flex justify-between items-center min-h-10"> <div class="space-y-1"> <div class="flex items-center gap-2"> <h1 class="text-2xl leading-7 font-semibold">Page title</h1> <span class="inline-block px-2 py-0.5 rounded-full text-xs text-black bg-success-subdued"> A Badge </span> </div> <p class="text-base leading-5 text-secondary">Optional subtitle</p> </div> <div class="flex items-center gap-2"> <div class="contents" data-controller="popover"> <button type="button" class="btn-with-ending-icon btn" data-testid="actions-button" data-popover-target="button" popovertarget="action-menu-component-748f28d4-aa36-4b32-b2cb-84d87d9e8cf9"> Actions <!-- Source: Iconoir, added via `bin/add_icon` --> <svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true" data-testid="button-ending-icon"> <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </button> <div popover="auto" class="absolute -left-full -top-full m-0 bg-white rounded-sm border border-subdued popover-open:block px-0 py-1 border border-subdued shadow-sm" data-action="toggle->popover#positionPopover" data-popover-target="popover" data-testid="action-menu" id="action-menu-component-748f28d4-aa36-4b32-b2cb-84d87d9e8cf9"> <ul> <li class="whitespace-nowrap hover:bg-gray-100 [&_a]:px-3 [&_a]:py-1 [&_a]:w-full [&_a]:block [&_a]:text-left [&_button]:px-3 [&_button]:py-1 [&_button]:w-full [&_button]:block [&_button]:text-left" data-testid="action-menu-item" data-action="click->popover#hide"><a href="#">Add center</a></li> </ul> </div> </div> <a href="#" class="btn btn-primary" data-testid="page-action-button"> Page action </a> </div> </div> <nav aria-label="Tabs" class="shadow-[inset_0_-1px] shadow-gray-300 pb-1 px-10"> <ul class="flex gap-8"> <li><a aria-current="page" class="inline-block py-4 text-base font-semibold relative after:h-1 after:absolute after:-bottom-1 after:inset-x-0 after:rounded-sm text-primary after:bg-accent" href="#">Tab 1</a> </li> <li><a class="inline-block py-4 text-base font-semibold relative after:h-1 after:absolute after:-bottom-1 after:inset-x-0 after:rounded-sm text-secondary hover:text-primary hover:after:bg-gray-500" href="#">Tab 2</a> </li> </ul> </nav> </div> <search class="px-10 bg-neutral py-6"> Here you can put the filters, search, etc. </search> </header> <div class="px-10 py-6 grow" data-testid="page-body">Page content goes here.</div> <footer class="px-10 py-5 flex items-center justify-end gap-4 border-t bg-white border-subdued sticky bottom-0" data-testid="page-footer"> <button type="button" class="btn btn-text mr-auto text-critical hover:text-critical-hover" data-testid="delete-button"> Delete </button> <a href="#" class="btn" data-testid="cancel-button"> Cancel </a> </footer></div>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
34
<%= anchor_page do |page| %> <% page.with_header do |header| %> <% header.with_breadcrumbs do |breadcrumbs| %> <% breadcrumbs.with_item(href: "#").with_content("Breadcrumb 1") %> <% breadcrumbs.with_item(href: "#").with_content("Breadcrumb 2") %> <% breadcrumbs.with_item_content("Breadcrumb 3") %> <% end %> <% header.with_title("Page title") %> <% header.with_subtitle("Optional subtitle") %> <% header.with_badge("A Badge", variant: :success) %> <% header.with_tab_bar(label: "Tabs") do |tab_bar| %> <% tab_bar.with_tab(href: "#", active: true).with_content("Tab 1") %> <% tab_bar.with_tab(href: "#").with_content("Tab 2") %> <% end %> <% header.with_search do %> Here you can put the filters, search, etc. <% end %> <% header.with_action_menu do |menu| %> <% menu.with_show_button do |button| %> <% button.with_ending_icon(icon: "nav-arrow-down") %> Actions <% end %> <% menu.with_item do %> <% link_to("Add center", "#") %> <% end %> <% end %> <% header.with_action("Page action", href: "#")%> <% end %> <% page.with_body_content("Page content goes here.") %> <% page.with_footer do |footer| %> <% footer.with_delete_button %> <% footer.with_cancel_button(href: "#") %> <% end %><% end %>No notes provided.
No params configured.