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
<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 aria-current="page" class="flex text-sm items-center text-secondary whitespace-nowrap"> <span aria-hidden="true" class="mx-2">/</span> Breadcrumb 2 </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> </div> </div> <div class="flex items-center gap-2"> </div> </div> </div> </header> <div class="px-10 py-6 grow" data-testid="page-body"> <form id="form" class="flex flex-col gap-4" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="BDwnRb40t827ycHYAHvVzPRLHDcvcsR-P-AJvPEo_MqKgBfBzqJ4giiddo3BaxwN9oaX0j9mp5QMVrlh1wkv7A" autocomplete="off" /> <div class="max-w-sm"> <label class="font-semibold text-base text-primary" data-testid="label-name" for="name">Name</label> <div data-testid="form-field-input-name"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" autocomplete="off" data-testid="input-name" type="text" name="name" id="name" /></div> </div> </form> </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"> <p class="text-base leading-5 text-secondary">Optional text</p> <a href="#" class="btn" data-testid="cancel-button"> Cancel </a> <button type="submit" class="btn btn-primary" data-testid="save-button" form="form"> Save </button> </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
<%= 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") %> <% end %> <% header.with_title("Page title") %> <% end %> <% page.with_body do |body| %> <%= anchor_form_with(url: false, id: "form") do |form| %> <%= tag.div class: "max-w-sm" do %> <%= form.label :name, "Name" %> <%= form.text_field( :name, ) %> <% end %> <% end %> <% end %> <% page.with_footer do |footer| %> <% footer.with_cancel_button(href: "#") %> <% footer.with_save_button(form: "form") %> <% footer.with_supporting_text("Optional text") %> <% end %><% end %>No notes provided.
No params configured.