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
<div class="rounded-lg border overflow-hidden"> <header class="flex border-b h-14 shrink-0 items-center gap-2"> <div class="flex items-center gap-2 px-2"> <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:text-muted-foreground! hover:bg-accent hover:text-accent-foreground disabled:bg-transparent! h-9 w-9 disabled:cursor-not-allowed size-7!" aria-controls="preview-sidebar" aria-expanded="true" aria-label="Toggle sidebar" data-action="ui--sidebar#toggle" data-ui--sidebar-target="trigger"><i data-lucide="panel-left" class="inline-block shrink-0 w-5 h-5" aria-hidden="true"></i> </button> </div> <div class="ml-auto flex items-center gap-2 px-2"> <div data-controller="ui--theme" class="contents"> <div class="relative inline-block" data-controller="ui--menu"><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:text-muted-foreground! hover:bg-accent hover:text-accent-foreground disabled:bg-transparent! h-7 w-7 disabled:cursor-not-allowed size-7!" aria-label="Change theme" id="ui-menu-trigger-ui-menu-69ce7048" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-69ce7048" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown"><i data-lucide="sun" class="shrink-0 w-4 h-4 block in-data-[theme=dark]:hidden in-data-[theme=system]:hidden" aria-hidden="true"></i> <i data-lucide="moon" class="shrink-0 w-4 h-4 hidden in-data-[theme=dark]:block" aria-hidden="true"></i> <i data-lucide="monitor" class="shrink-0 w-4 h-4 hidden in-data-[theme=system]:block" aria-hidden="true"></i> </button> <div id="ui-menu-content-ui-menu-69ce7048" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-40" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="bottom" data-align="end" tabindex="-1"> <div class="px-2 py-1.5 text-sm font-semibold text-muted-foreground">Theme</div> <button role="menuitemradio" data-theme="light" data-action="ui--theme#select" data-ui--theme-target="option" aria-checked="false" class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all group" tabindex="-1" data-ui--menu-target="item"><i data-lucide="sun" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> <span>Light</span><i data-lucide="check" class="shrink-0 w-4 h-4 ml-auto hidden group-aria-checked:block" aria-hidden="true"></i> </button> <button role="menuitemradio" data-theme="dark" data-action="ui--theme#select" data-ui--theme-target="option" aria-checked="false" class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all group" tabindex="-1" data-ui--menu-target="item"><i data-lucide="moon" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> <span>Dark</span><i data-lucide="check" class="shrink-0 w-4 h-4 ml-auto hidden group-aria-checked:block" aria-hidden="true"></i> </button> <button role="menuitemradio" data-theme="system" data-action="ui--theme#select" data-ui--theme-target="option" aria-checked="false" class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all group" tabindex="-1" data-ui--menu-target="item"><i data-lucide="monitor" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> <span>System</span><i data-lucide="check" class="shrink-0 w-4 h-4 ml-auto hidden group-aria-checked:block" aria-hidden="true"></i> </button> </div> </div> </div> </div> </header> <div class="p-6"> <p class="text-base font-normal text-foreground">Switch the theme with the control above — the whole page follows.</p> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%# Mirrors the real app header: sidebar trigger left, theme toggle right. %><div class="rounded-lg border overflow-hidden"> <header class="flex border-b h-14 shrink-0 items-center gap-2"> <div class="flex items-center gap-2 px-2"> <%= render(UI::Sidebar::Trigger.new(sidebar_id: "preview-sidebar")) %> </div> <div class="ml-auto flex items-center gap-2 px-2"> <%= render(UI::ThemeToggle.new) %> </div> </header> <div class="p-6"> <%= render(UI::Text.new) { "Switch the theme with the control above — the whole page follows." } %> </div></div>No notes provided.
No params configured.