mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-09 07:25:19 +02:00
90a9546f32
* Add lookbook + viewcomponent, organize design system file * Build menu component * Button updates * More button fixes * Replace all menus with new ViewComponent * Checkpoint: fix tests, all buttons and menus converted * Split into Link and Button components for clarity * Button cleanup * Simplify custom confirmation configuration in views * Finalize button, link component API * Add toggle field to custom form builder + Component * Basic tabs component * Custom tabs, convert all menu / tab instances in app * Gem updates * Centralized icon helper * Update all icon usage to central helper * Lint fixes * Centralize all disclosure instances * Dialog replacements * Consolidation of all dialog styles * Test fixes * Fix app layout issues, move to component with slots * Layout simplification * Flakey test fix * Fix dashboard mobile issues * Finalize homepage * Lint fixes * Fix shadows and borders in dark mode * Fix tests * Remove stale class * Fix filled icon logic * Move transparent? to public interface
53 lines
2.4 KiB
Text
53 lines
2.4 KiB
Text
<%# locals: (title:, back_path: nil) %>
|
|
|
|
<%= render DialogComponent.new do |dialog| %>
|
|
<div class="flex flex-col relative" data-controller="list-keyboard-navigation">
|
|
<div class="border-b border-tertiary md:border-alpha-black-25 px-4 pb-4 text-gray-800 flex items-center justify-between gap-2">
|
|
<div class="flex items-center gap-2">
|
|
<% if back_path %>
|
|
<%= render LinkComponent.new(
|
|
variant: "icon",
|
|
icon: "arrow-left",
|
|
href: back_path,
|
|
size: "lg"
|
|
) %>
|
|
<% end %>
|
|
|
|
<span class="text-primary"><%= title %></span>
|
|
</div>
|
|
|
|
<%= icon("x", as_button: true, size: "lg", data: { action: "dialog#close" }) %>
|
|
</div>
|
|
|
|
<div class="p-2 text-subdued">
|
|
<button hidden data-controller="hotkey" data-hotkey="k,K,ArrowUp,ArrowLeft" data-action="list-keyboard-navigation#focusPrevious">Previous</button>
|
|
<button hidden data-controller="hotkey" data-hotkey="j,J,ArrowDown,ArrowRight" data-action="list-keyboard-navigation#focusNext">Next</button>
|
|
|
|
<%= yield %>
|
|
</div>
|
|
|
|
<div class="border-t border-alpha-black-25 px-4 pt-4 text-secondary text-sm justify-between hidden md:flex">
|
|
<div class="flex space-x-5">
|
|
<div class="flex items-center space-x-2">
|
|
<span>Select</span>
|
|
<kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center">
|
|
<%= icon("corner-down-left", size: "xs") %>
|
|
</kbd>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<span>Navigate</span>
|
|
<kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center">
|
|
<%= icon("arrow-up", size: "xs") %>
|
|
</kbd>
|
|
<kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center">
|
|
<%= icon("arrow-down", size: "xs") %>
|
|
</kbd>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<button data-action="dialog#close">Close</button>
|
|
<kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-8 h-5 shrink-0 grow-0 items-center justify-center text-xs">ESC</kbd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|