diff --git a/app/lib/prymn_web/components/button.ex b/app/lib/prymn_web/components/button.ex
index 34ec4d8..6a2fd15 100644
--- a/app/lib/prymn_web/components/button.ex
+++ b/app/lib/prymn_web/components/button.ex
@@ -31,24 +31,30 @@ defmodule PrymnWeb.Button do
def secondary(assigns), do: button(assign(assigns, :variant, "secondary"))
- defp button_assigns(assigns) do
- assign(
- assigns,
- :style,
- [
- "inline-flex justify-center items-center rounded-2xl shadow transition-colors active:shadow-sm",
- by_variant(assigns.variant),
- by_size(assigns.size),
- assigns[:class]
- ]
- )
- end
+ @doc """
+ Render a tertiary variant button.
- defp button(%{rest: %{href: _}} = assigns), do: link_button(assigns)
- defp button(%{rest: %{navigate: _}} = assigns), do: link_button(assigns)
- defp button(%{rest: %{patch: _}} = assigns), do: link_button(assigns)
+ ## Examples
- defp button(assigns) do
+ <.tertiary>Click me
+ <.tertiary href="/a/path" size="sm">Link button
+ """
+ def tertiary(assigns), do: button(assign(assigns, :variant, "tertiary"))
+
+ @doc """
+ Render a button.
+ """
+ attr :variant, :string, default: "primary"
+ attr :size, :string, default: "md", values: ~w(sm md lg)
+ attr :class, :string, default: nil
+ attr :rest, :global, include: ~w(href navigate patch)
+ slot :inner_block, required: true
+
+ def button(%{rest: %{href: _}} = assigns), do: link_button(assigns)
+ def button(%{rest: %{navigate: _}} = assigns), do: link_button(assigns)
+ def button(%{rest: %{patch: _}} = assigns), do: link_button(assigns)
+
+ def button(assigns) do
assigns = button_assigns(assigns)
~H"""
@@ -58,6 +64,19 @@ defmodule PrymnWeb.Button do
"""
end
+ defp button_assigns(assigns) do
+ assign(
+ assigns,
+ :style,
+ [
+ "inline-flex justify-center items-center rounded-2xl transition-colors",
+ by_variant(assigns.variant),
+ by_size(assigns.size),
+ assigns[:class]
+ ]
+ )
+ end
+
defp link_button(assigns) do
assigns = button_assigns(assigns)
@@ -73,9 +92,14 @@ defmodule PrymnWeb.Button do
defp by_size("lg"), do: "text-lg px-7 py-3"
defp by_variant("primary"),
- do: "font-medium bg-black text-white hover:bg-slate-800 active:text-white/80"
+ do:
+ "font-medium bg-black text-white shadow active:shadow-sm hover:bg-slate-800 active:text-white/80"
defp by_variant("secondary"),
do:
- "font-medium bg-transparent border border-slate-800 text-slate-800 hover:bg-slate-800 hover:text-white active:text-white/80"
+ "font-medium bg-transparent border shadow active:shadow-sm border-slate-800 text-slate-800 hover:bg-slate-800 hover:text-white active:text-white/80"
+
+ defp by_variant("tertiary"),
+ do:
+ "font-medium border-none text-black hover:bg-slate-50 focus:bg-slate-50 active:text-black/80"
end
diff --git a/app/lib/prymn_web/components/core_components.ex b/app/lib/prymn_web/components/core_components.ex
index 8dde58c..6735c66 100644
--- a/app/lib/prymn_web/components/core_components.ex
+++ b/app/lib/prymn_web/components/core_components.ex
@@ -14,7 +14,7 @@ defmodule PrymnWeb.CoreComponents do
Icons are provided by [heroicons](https://heroicons.com). See `icon/1` for usage.
"""
- use Phoenix.Component
+ use Phoenix.Component, global_prefixes: ~w(x-)
alias Phoenix.LiveView.JS
import PrymnWeb.Gettext
@@ -594,10 +594,21 @@ defmodule PrymnWeb.CoreComponents do
attr :title, :string, default: nil
attr :position, :string, default: "left", values: ~w(left right)
- slot :button
+ slot :button do
+ attr :title, :string
+ attr :variant, :string, values: ~w(primary secondary tertiary)
+ attr :size, :string, values: ~w(sm md lg)
+ end
+
slot :item
def dropdown(assigns) do
+ assigns =
+ assign(assigns, :style, [
+ (assigns.position == "left" && "left-0") || "right-0",
+ "absolute z-10 w-56 rounded-xl bg-white shadow-lg ring-1 ring-black ring-opacity-5"
+ ])
+
~H"""
-
+ <%= for button <- @button do %>
+
+ <%= render_slot(@button) %>
+ <.icon class="ml-2 h-4 w-4" name="hero-chevron-down" />
+
+ <% end %>
-
- <%= render_slot(item, item) %>
-
+ <%= render_slot(item) %>
+
"""
diff --git a/app/lib/prymn_web/components/layouts/app.html.heex b/app/lib/prymn_web/components/layouts/app.html.heex
index f63ac91..c56ed79 100644
--- a/app/lib/prymn_web/components/layouts/app.html.heex
+++ b/app/lib/prymn_web/components/layouts/app.html.heex
@@ -16,16 +16,12 @@
- <.dropdown>
- <:button>
+ <.dropdown position="right">
+ <:button variant="tertiary">
<.icon name="hero-user-solid" />
- <:item>
- <.link href={~p"/users/settings"}>Settings
-
- <:item>
- <.link method="DELETE" href={~p"/auth/log_out"}>Log out
-
+ <:item href={~p"/users/settings"}>Settings
+ <:item method="DELETE" href={~p"/auth/log_out"}>Log out
diff --git a/app/lib/prymn_web/live/server_live/index.ex b/app/lib/prymn_web/live/server_live/index.ex
index be9c520..b19ef77 100644
--- a/app/lib/prymn_web/live/server_live/index.ex
+++ b/app/lib/prymn_web/live/server_live/index.ex
@@ -26,6 +26,50 @@ defmodule PrymnWeb.ServerLive.Index do
|> assign(:healths, healths)}
end
+ @impl true
+ def render(assigns) do
+ ~H"""
+
+ <.header>
+ Your servers
+
+ <%= "#{Enum.count(@servers)} servers" %>
+
+ <:actions>
+
Connect a Server
+
+
+
+ <.link
+ :for={server <- @servers}
+ navigate={~p"/servers/#{server}"}
+ class="group block rounded-lg bg-gray-100 p-5 shadow-sm shadow-gray-300 hover:bg-black hover:text-white"
+ >
+
+
<%= server.name %>
+ <.server_status status={server.status} health={@healths[server.public_ip]} />
+
+
+
IP: <%= server.public_ip || "N/A" %>
+
+ <%= for {name, task} <- Enum.take(@healths[server.public_ip].tasks, 1) do %>
+ In progress: <%= name %>
+ <%= task.progress %>
+ <% end %>
+
+
+
+
+ <.modal :if={@live_action == :new} id="server-modal" show on_cancel={JS.patch(~p"/servers")}>
+ <.live_component module={PrymnWeb.ServerLive.NewServer} id={:new} patch={~p"/servers"} />
+
+
+ """
+ end
+
@impl true
def handle_params(_params, _url, socket) do
socket =
@@ -63,7 +107,7 @@ defmodule PrymnWeb.ServerLive.Index do
{:registered, nil} ->
~H"""
- <.spinner class="w-5" />
+ <.spinner size="md" />
"""
{:registered, %Agents.Health{status: :connected}} ->
diff --git a/app/lib/prymn_web/live/server_live/index.html.heex b/app/lib/prymn_web/live/server_live/index.html.heex
deleted file mode 100644
index 9ff329d..0000000
--- a/app/lib/prymn_web/live/server_live/index.html.heex
+++ /dev/null
@@ -1,40 +0,0 @@
-
- <.header>
- Your servers
-
- <%= "#{Enum.count(@servers)} servers" %>
-
- <:actions>
-
Connect a Server
-
-
-
-
- <.link
- :for={server <- @servers}
- navigate={~p"/servers/#{server}"}
- class="group block rounded-lg bg-gray-100 p-5 shadow-sm shadow-gray-300 hover:bg-black hover:text-white"
- >
-
-
<%= server.name %>
- <.server_status status={server.status} health={@healths[server.public_ip]} />
-
-
-
IP: <%= server.public_ip || "N/A" %>
-
- <%= for {name, task} <- Enum.take(@healths[server.public_ip].tasks, 1) do %>
- In progress: <%= name %>
- <%= task.progress %>
- <% end %>
-
-
-
-
-
- <.modal :if={@live_action == :new} id="server-modal" show on_cancel={JS.patch(~p"/servers")}>
- <.live_component module={PrymnWeb.ServerLive.NewServer} id={:new} patch={~p"/servers"} />
-
-
diff --git a/app/lib/prymn_web/live/server_live/show.ex b/app/lib/prymn_web/live/server_live/show.ex
index d7d9ecc..42ae63d 100644
--- a/app/lib/prymn_web/live/server_live/show.ex
+++ b/app/lib/prymn_web/live/server_live/show.ex
@@ -15,51 +15,36 @@ defmodule PrymnWeb.ServerLive.Show do
def render(assigns) do
~H"""
-
+
<.dropdown title="Select a different server">
- <:button>Server <%= @server.name %>
- <:item :for={server <- Enum.filter(@servers, fn s -> s.id != @server.id end)}>
- <.link
- patch={~p"/servers/#{server}"}
- class="block text-sm text-gray-700"
- role="menuitem"
- >
- <%= server.name %>
-
+ <:button variant="tertiary">Server <%= @server.name %>
+ <:item
+ :for={server <- Enum.filter(@servers, fn s -> s.id != @server.id end)}
+ patch={~p"/servers/#{server}"}
+ >
+ <%= server.name %>
-
+
<.indicator message={@health.message} />
- New App
<.dropdown>
- <:button>
- Quick actions
-
+ <:button variant="tertiary" size="sm">Quick actions
<:item>
Test
+ New App
<%= @server.public_ip %>