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
<div class="max-w-lg border rounded-lg p-6"> <h2 class="text-lg font-semibold mb-4">Settings</h2> <div class="w-full" data-controller="ui--tabs" data-ui--tabs-active-value="account" id="ui-tabs-c792e3d6"> <div role="tablist" class="inline-flex items-center gap-4 border-b border-input"><button type="button" role="tab" id="ui-tab-ui-tabs-c792e3d6-account" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! relative -mb-px px-3 text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary text-sm h-10" aria-selected="true" aria-controls="ui-panel-ui-tabs-c792e3d6-account" tabindex="0" data-state="active" data-ui--tabs-target="trigger" data-value="account" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown">Account</button> <button type="button" role="tab" id="ui-tab-ui-tabs-c792e3d6-password" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! relative -mb-px px-3 text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary text-sm h-10" aria-selected="false" aria-controls="ui-panel-ui-tabs-c792e3d6-password" tabindex="-1" data-state="inactive" data-ui--tabs-target="trigger" data-value="password" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown">Password</button> <button type="button" role="tab" id="ui-tab-ui-tabs-c792e3d6-billing" class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! relative -mb-px px-3 text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary text-sm h-10" aria-selected="false" aria-controls="ui-panel-ui-tabs-c792e3d6-billing" tabindex="-1" data-state="inactive" data-ui--tabs-target="trigger" data-value="billing" data-action="click->ui--tabs#activate keydown->ui--tabs#keydown">Billing</button> </div> <div role="tabpanel" id="ui-panel-ui-tabs-c792e3d6-account" class="mt-2" aria-labelledby="ui-tab-ui-tabs-c792e3d6-account" tabindex="0" data-state="active" data-ui--tabs-target="panel" data-value="account"> <div class="space-y-4 mt-4"> <div> <label class="block text-sm font-medium mb-1" for="name">Name</label> <input type="text" name="name" id="name" value="" class="w-full px-3 py-2 border rounded-md text-sm" /> </div> <div> <label class="block text-sm font-medium mb-1" for="email">Email</label> <input type="email" name="email" id="email" value="" class="w-full px-3 py-2 border rounded-md text-sm" /> </div> <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 disabled:cursor-not-allowed" aria-busy="false">Save Changes</button> </div> </div> <div role="tabpanel" id="ui-panel-ui-tabs-c792e3d6-password" class="mt-2" aria-labelledby="ui-tab-ui-tabs-c792e3d6-password" tabindex="0" data-state="inactive" data-ui--tabs-target="panel" data-value="password" hidden="hidden"> <div class="space-y-4 mt-4"> <div> <label class="block text-sm font-medium mb-1" for="current">Current Password</label> <input type="password" name="current" id="current" value="" class="w-full px-3 py-2 border rounded-md text-sm" /> </div> <div> <label class="block text-sm font-medium mb-1" for="new">New Password</label> <input type="password" name="new" id="new" value="" class="w-full px-3 py-2 border rounded-md text-sm" /> </div> <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 disabled:cursor-not-allowed" aria-busy="false">Update Password</button> </div> </div> <div role="tabpanel" id="ui-panel-ui-tabs-c792e3d6-billing" class="mt-2" aria-labelledby="ui-tab-ui-tabs-c792e3d6-billing" tabindex="0" data-state="inactive" data-ui--tabs-target="panel" data-value="billing" hidden="hidden"> <div class="space-y-4 mt-4"> <p class="text-sm text-muted-foreground">Manage your billing information and subscription.</p> <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:border-input! h-9 px-4 py-2 disabled:cursor-not-allowed" aria-busy="false">View Invoices</button> </div> </div> </div></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
35
36
37
38
39
40
41
42
<div class="max-w-lg border rounded-lg p-6"> <h2 class="text-lg font-semibold mb-4">Settings</h2> <%= render(UI::Tabs.new(variant: :line, default_value: "account")) do |tabs| %> <% tabs.with_list do |list| %> <% list.with_trigger(value: "account") { "Account" } %> <% list.with_trigger(value: "password") { "Password" } %> <% list.with_trigger(value: "billing") { "Billing" } %> <% end %> <% tabs.with_panel(value: "account") do %> <div class="space-y-4 mt-4"> <div> <%= label_tag :name, "Name", class: "block text-sm font-medium mb-1" %> <%= text_field_tag :name, "", class: "w-full px-3 py-2 border rounded-md text-sm" %> </div> <div> <%= label_tag :email, "Email", class: "block text-sm font-medium mb-1" %> <%= email_field_tag :email, "", class: "w-full px-3 py-2 border rounded-md text-sm" %> </div> <%= render(UI::Button.new) { "Save Changes" } %> </div> <% end %> <% tabs.with_panel(value: "password") do %> <div class="space-y-4 mt-4"> <div> <%= label_tag :current, "Current Password", class: "block text-sm font-medium mb-1" %> <%= password_field_tag :current, "", class: "w-full px-3 py-2 border rounded-md text-sm" %> </div> <div> <%= label_tag :new, "New Password", class: "block text-sm font-medium mb-1" %> <%= password_field_tag :new, "", class: "w-full px-3 py-2 border rounded-md text-sm" %> </div> <%= render(UI::Button.new) { "Update Password" } %> </div> <% end %> <% tabs.with_panel(value: "billing") do %> <div class="space-y-4 mt-4"> <p class="text-sm text-muted-foreground">Manage your billing information and subscription.</p> <%= render(UI::Button.new(variant: :outline)) { "View Invoices" } %> </div> <% end %> <% end %></div>No notes provided.
No params configured.