Use a button group for import/scan

This commit is contained in:
Claudio Ortolina
2025-02-17 09:05:04 +00:00
parent 6d0eeccbb7
commit 5a391eb549
2 changed files with 30 additions and 10 deletions
@@ -2,12 +2,32 @@
<header class="gap-6 mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
<.search_form query={@record_list_params.query} />
<nav>
<.link patch={~p"/collection/import"}>
<.button>{gettext("Import")}</.button>
<nav class="mt-2 isolate inline-flex rounded-md shadow-sm">
<.link
class={[
"relative inline-flex items-center rounded-l-md",
"px-3 py-2 text-xs sm:text-sm font-semibold",
"bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
"disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
"text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
"focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
]}
patch={~p"/collection/import"}
>
{gettext("Import")}
</.link>
<.link patch={~p"/collection/scan"}>
<.button>{gettext("Scan")}</.button>
<.link
class={[
"relative -ml-px inline-flex items-center rounded-r-md",
"px-3 py-2 text-xs sm:text-sm font-semibold",
"bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
"disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
"text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
"focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
]}
patch={~p"/collection/scan"}
>
{gettext("Scan")}
</.link>
</nav>
</div>