Use button_group/1

This commit is contained in:
Claudio Ortolina
2025-08-20 19:55:32 +03:00
parent 7003983d8e
commit 715ad6be49
4 changed files with 16 additions and 30 deletions
@@ -2,9 +2,8 @@
<header class="gap-6 mb-2"> <header class="gap-6 mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2"> <div class="flex items-center justify-between gap-6 mb-2 mt-2">
<.search_form query={@record_list_params.query} /> <.search_form query={@record_list_params.query} />
<nav class="isolate inline-flex rounded-md shadow-xs"> <.button_group>
<.button <.button
class="rounded-l-md rounded-r-none"
variant="solid" variant="solid"
size="sm" size="sm"
patch={~p"/collection/import"} patch={~p"/collection/import"}
@@ -13,7 +12,6 @@
{gettext("Add")} {gettext("Add")}
</.button> </.button>
<.button <.button
class="-ml-px rounded-r-md rounded-l-none"
variant="solid" variant="solid"
size="sm" size="sm"
patch={~p"/collection/scan"} patch={~p"/collection/scan"}
@@ -21,17 +19,16 @@
<.barcode_icon class="mr-2 fill-current" /> <.barcode_icon class="mr-2 fill-current" />
{gettext("Scan")} {gettext("Scan")}
</.button> </.button>
</nav> </.button_group>
</div> </div>
</header> </header>
<div class="flex items-end justify-between gap-6 mt-8"> <div class="flex items-end justify-between gap-6 mt-8">
<span class="isolate inline-flex rounded-md shadow-xs"> <.button_group>
<.button <.button
patch={order_path(@record_list_params, :purchase)} patch={order_path(@record_list_params, :purchase)}
size="sm" size="sm"
class={[ class={[
"rounded-l-md rounded-r-none",
@record_list_params.order == :purchase && "!bg-zinc-100 dark:!bg-zinc-700" @record_list_params.order == :purchase && "!bg-zinc-100 dark:!bg-zinc-700"
]} ]}
> >
@@ -47,14 +44,13 @@
patch={order_path(@record_list_params, :alphabetical)} patch={order_path(@record_list_params, :alphabetical)}
size="sm" size="sm"
class={[ class={[
"-ml-px rounded-r-md rounded-l-none",
@record_list_params.order == :alphabetical && "!bg-zinc-100 dark:!bg-zinc-700" @record_list_params.order == :alphabetical && "!bg-zinc-100 dark:!bg-zinc-700"
]} ]}
> >
<.icon name="hero-user-solid" class="mr-1 h-4 w-4" aria-hidden="true" data-slot="icon" /> <.icon name="hero-user-solid" class="mr-1 h-4 w-4" aria-hidden="true" data-slot="icon" />
{gettext("A->Z")} {gettext("A->Z")}
</.button> </.button>
</span> </.button_group>
</div> </div>
</div> </div>
@@ -6,12 +6,10 @@
</h1> </h1>
</div> </div>
<div> <div>
<nav class="isolate inline-flex rounded-md shadow-xs"> <.button variant="solid" size="sm" patch={~p"/online-store-templates/new"}>
<.button variant="solid" size="sm" patch={~p"/online-store-templates/new"}> <.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
<.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" /> {gettext("New Template")}
{gettext("New Template")} </.button>
</.button>
</nav>
</div> </div>
</div> </div>
</header> </header>
@@ -6,9 +6,8 @@
</h1> </h1>
</div> </div>
<div> <div>
<nav class="isolate inline-flex rounded-md shadow-xs"> <.button_group>
<.button <.button
class="rounded-l-md rounded-r-none"
variant="solid" variant="solid"
size="sm" size="sm"
patch={~p"/scrobble-rules/new"} patch={~p"/scrobble-rules/new"}
@@ -17,7 +16,6 @@
{gettext("New Rule")} {gettext("New Rule")}
</.button> </.button>
<.button <.button
class="-ml-px rounded-r-md rounded-l-none"
variant="solid" variant="solid"
size="sm" size="sm"
phx-click="apply_all_rules" phx-click="apply_all_rules"
@@ -25,7 +23,7 @@
<.icon name="hero-play" class="h-4 w-4 mr-2" /> <.icon name="hero-play" class="h-4 w-4 mr-2" />
{gettext("Apply All")} {gettext("Apply All")}
</.button> </.button>
</nav> </.button_group>
</div> </div>
</div> </div>
</header> </header>
@@ -2,25 +2,19 @@
<header class="gap-6 mb-2"> <header class="gap-6 mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2"> <div class="flex items-center justify-between gap-6 mb-2 mt-2">
<.search_form query={@record_list_params.query} /> <.search_form query={@record_list_params.query} />
<.link <.button
class={[ variant="solid"
"relative inline-flex items-center rounded-md", size="sm"
"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-offset-2 focus-visible:outline-zinc-600"
]}
patch={~p"/wishlist/import"} patch={~p"/wishlist/import"}
> >
<.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" /> <.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
{gettext("Add")} {gettext("Add")}
</.link> </.button>
</div> </div>
</header> </header>
<div class="flex items-end justify-between gap-6 mt-8"> <div class="flex items-end justify-between gap-6 mt-8">
<span class="isolate inline-flex rounded-md shadow-xs"> <.button_group>
<.button <.button
patch={order_path(@record_list_params, :insertion)} patch={order_path(@record_list_params, :insertion)}
size="sm" size="sm"
@@ -43,7 +37,7 @@
<.icon name="hero-user-solid" class="mr-1 h-4 w-4" aria-hidden="true" data-slot="icon" /> <.icon name="hero-user-solid" class="mr-1 h-4 w-4" aria-hidden="true" data-slot="icon" />
{gettext("A->Z")} {gettext("A->Z")}
</.button> </.button>
</span> </.button_group>
</div> </div>
</div> </div>