Skip to content

Commit 4537327

Browse files
zcesurzcesur
committed
refactor: simplify button component to handle link navigation directly
1 parent 59486f2 commit 4537327

File tree

8 files changed

+83
-62
lines changed

8 files changed

+83
-62
lines changed

‎lib/algora_web/components/core_components.ex‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1235,10 +1235,8 @@ defmodule AlgoraWeb.CoreComponents do
12351235
<h2 class="text-2xl font-semibold leading-none tracking-tight">{@title}</h2>
12361236
<p :if={@subtitle} class="text-sm text-muted-foreground">{@subtitle}</p>
12371237
</div>
1238-
<.button :if={@link} variant="outline">
1239-
<.link navigate={@link}>
1240-
View all
1241-
</.link>
1238+
<.button :if={@link} navigate={@link} variant="outline">
1239+
View all
12421240
</.button>
12431241
</div>
12441242
{render_slot(@inner_block)}

‎lib/algora_web/components/ui/button.ex‎

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ defmodule AlgoraWeb.Components.UI.Button do
1212
"""
1313
attr :type, :string, default: nil
1414
attr :class, :string, default: nil
15+
attr :href, :string, default: nil
16+
attr :navigate, :string, default: nil
17+
attr :patch, :string, default: nil
18+
attr :replace, :boolean, default: false
1519

1620
attr :variant, :string,
1721
values: ~w(default secondary destructive outline ghost link),
@@ -23,24 +27,34 @@ defmodule AlgoraWeb.Components.UI.Button do
2327

2428
slot :inner_block, required: true
2529

26-
def(button(assigns)) do
27-
assigns = assign(assigns, :variant_class, variant(assigns))
30+
def button(assigns) do
31+
assigns =
32+
assigns
33+
|> assign(:is_link, link?(assigns))
34+
|> assign(:common_classes, [
35+
"disabled:opacity-75 phx-submit-loading:opacity-75",
36+
"inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
37+
variant(assigns),
38+
assigns.class
39+
])
2840

2941
~H"""
30-
<button
31-
type={@type}
32-
class={
33-
classes([
34-
"disabled:opacity-75 phx-submit-loading:opacity-75",
35-
"inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
36-
@variant_class,
37-
@class
38-
])
39-
}
40-
{@rest}
41-
>
42-
{render_slot(@inner_block)}
43-
</button>
42+
<%= if @is_link do %>
43+
<.link
44+
href={@href}
45+
navigate={@navigate}
46+
patch={@patch}
47+
replace={@replace}
48+
class={classes(@common_classes)}
49+
{@rest}
50+
>
51+
{render_slot(@inner_block)}
52+
</.link>
53+
<% else %>
54+
<button type={@type} class={classes(@common_classes)} {@rest}>
55+
{render_slot(@inner_block)}
56+
</button>
57+
<% end %>
4458
"""
4559
end
4660

@@ -80,4 +94,8 @@ defmodule AlgoraWeb.Components.UI.Button do
8094

8195
Enum.map_join(variants, " ", fn {key, value} -> @variants[key][value] end)
8296
end
97+
98+
defp link?(assigns) do
99+
Enum.any?([assigns[:href], assigns[:navigate], assigns[:patch]])
100+
end
83101
end

‎lib/algora_web/live/home_live.ex‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,8 @@ defmodule AlgoraWeb.HomeLive do
8181
</div>
8282
8383
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
84-
<.button variant="subtle">
85-
<.link navigate={~p"/auth/login"}>
86-
Sign in
87-
</.link>
84+
<.button navigate={~p"/auth/login"} variant="subtle">
85+
Sign in
8886
</.button>
8987
</div>
9088
</nav>
@@ -202,15 +200,19 @@ defmodule AlgoraWeb.HomeLive do
202200
</p>
203201
<!-- CTA buttons -->
204202
<div class="mt-10 flex flex-col sm:flex-row text-center sm:items-center gap-6">
205-
<.button variant="default" class="px-12 py-8 text-xl font-semibold">
206-
<.link navigate={~p"/onboarding/org"}>
207-
Companies
208-
</.link>
203+
<.button
204+
navigate={~p"/onboarding/org"}
205+
variant="default"
206+
class="px-12 py-8 text-xl font-semibold"
207+
>
208+
Companies
209209
</.button>
210-
<.button variant="secondary" class="px-12 py-8 text-xl font-semibold">
211-
<.link navigate={~p"/onboarding/dev"}>
212-
Developers
213-
</.link>
210+
<.button
211+
navigate={~p"/onboarding/dev"}
212+
variant="secondary"
213+
class="px-12 py-8 text-xl font-semibold"
214+
>
215+
Developers
214216
</.button>
215217
</div>
216218
<!-- Stats -->

‎lib/algora_web/live/onboarding/dev.ex‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -55,14 +55,12 @@ defmodule AlgoraWeb.Onboarding.DevLive do
5555
Next
5656
</.button>
5757
<% else %>
58-
<.button>
59-
<.link
60-
href={Algora.Github.authorize_url()}
61-
rel="noopener"
62-
class="inline-flex items-center"
63-
>
64-
<.icon name="tabler-brand-github" class="mr-2 h-5 w-5" /> Sign in with GitHub
65-
</.link>
58+
<.button
59+
href={Algora.Github.authorize_url()}
60+
rel="noopener"
61+
class="inline-flex items-center"
62+
>
63+
<.icon name="tabler-brand-github" class="mr-2 h-5 w-5" /> Sign in with GitHub
6664
</.button>
6765
<% end %>
6866
</div>

‎lib/algora_web/live/org/bounties_live.ex‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -198,11 +198,11 @@ defmodule AlgoraWeb.Org.BountiesLive do
198198
<td class="[&:has([role=checkbox])]:pr-0 p-4 align-middle">
199199
<div class="min-w-[180px]">
200200
<div class="flex items-center justify-end gap-4">
201-
<.button variant="secondary">
202-
<.link href={hd(claims).source.url}>View</.link>
201+
<.button href={hd(claims).source.url} variant="secondary">
202+
View
203203
</.button>
204-
<.button>
205-
<.link href={~p"/claims/#{hd(claims).group_id}"}>Reward</.link>
204+
<.button href={~p"/claims/#{hd(claims).group_id}"}>
205+
Reward
206206
</.button>
207207
</div>
208208
</div>

‎lib/algora_web/live/org/team_live.ex‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,8 +104,8 @@ defmodule AlgoraWeb.Org.TeamLive do
104104
</div>
105105
</.card_content>
106106
<.card_footer>
107-
<.button variant="outline" class="w-full">
108-
<.link navigate={User.url(contractor)}>View Profile</.link>
107+
<.button navigate={User.url(contractor)} variant="outline" class="w-full">
108+
View Profile
109109
</.button>
110110
</.card_footer>
111111
</.card>

‎lib/algora_web/live/swift_bounties_live.ex‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -161,10 +161,13 @@ defmodule AlgoraWeb.SwiftBountiesLive do
161161
Anyone can contribute whether you're a company or an individual.
162162
</p>
163163
<div class="mt-10 flex items-center gap-x-6">
164-
<.button variant="subtle" class="h-12 px-6 text-lg font-semibold">
165-
<.link href={Algora.Github.authorize_url()} rel="noopener">
166-
Start Contributing
167-
</.link>
164+
<.button
165+
href={Algora.Github.authorize_url()}
166+
rel="noopener"
167+
variant="subtle"
168+
class="h-12 px-6 text-lg font-semibold"
169+
>
170+
Start Contributing
168171
</.button>
169172
</div>
170173
</div>
@@ -511,14 +514,13 @@ defmodule AlgoraWeb.SwiftBountiesLive do
511514
You can create bounties and send tips in any of the Swift repos below once you've connected your GitHub account.
512515
</p>
513516
<div class="mt-6 flex items-center justify-center gap-x-6">
514-
<.button variant="subtle" class="h-12 px-6 text-lg font-semibold">
515-
<.link
516-
href={Algora.Github.authorize_url()}
517-
rel="noopener"
518-
class="inline-flex items-center"
519-
>
520-
<Logos.github class="-ml-1 mr-2 h-6 w-6 sm:h-8 sm:w-8" /> Connect with GitHub
521-
</.link>
517+
<.button
518+
href={Algora.Github.authorize_url()}
519+
rel="noopener"
520+
variant="subtle"
521+
class="h-12 px-6 text-lg font-semibold inline-flex items-center"
522+
>
523+
<Logos.github class="-ml-1 mr-2 h-6 w-6 sm:h-8 sm:w-8" /> Connect with GitHub
522524
</.button>
523525
</div>
524526
<div class="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">

‎lib/algora_web/live/user/dashboard_live.ex‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -359,10 +359,13 @@ defmodule AlgoraWeb.User.DashboardLive do
359359
{Money.to_string!(Money.mult!(@contract.hourly_rate, @contract.hours_per_week))} / wk
360360
</div>
361361
</div>
362-
<.button phx-click="accept_contract" phx-value-org={@contract.client.handle} size="sm">
363-
<.link navigate={~p"/org/#{@contract.client.handle}/contracts/#{@contract.id}"}>
364-
Accept contract
365-
</.link>
362+
<.button
363+
navigate={~p"/org/#{@contract.client.handle}/contracts/#{@contract.id}"}
364+
phx-click="accept_contract"
365+
phx-value-org={@contract.client.handle}
366+
size="sm"
367+
>
368+
Accept contract
366369
</.button>
367370
</div>
368371
</div>

0 commit comments

Comments
 (0)