Add panel-media, improve service details view

lib/freedive_web/live/service_live.ex

@@ -18,7 +18,7 @@ defmodule FreediveWeb.ServiceLive do
       "sshd" => %{
         name: "sshd",
         path: "/services/ssh",
-        icon: "blocks",
+        icon: "lock",
         description: "Secure Shell Daemon",
         enabled: true,
         running: true
@@ -102,27 +102,28 @@ defmodule FreediveWeb.ServiceLive.Components do
       <div class="mt-2 ml-2">Back</div>
     </.link>
 
-    <.panel_block_div>
+    <.panel_media>
-      <div class="column is-narrow">
+      <:icon>
-        <.icon for={@selected_item.name} color="auto" aria-hidden="true" />
+        <.icon_raw for={@selected_item.icon} color="auto" size="3rem" aria-hidden="true" />
-      </div>
+        <%!-- <Lucideicons.accessibility height="2rem" width="2rem" /> --%>
-      <div class="columns is-vcentered is-fullwidth">
+      </:icon>
-        <div class="column is-narrow">
+
       <.title is-4>
         <%= @selected_item.name %>
       </.title>
-        </div>
-        <div class="column">
       <.subtitle>
         <%= @selected_item.description %>
       </.subtitle>
-        </div>
+
+      <:actions>
+        <div class="columns">
           <div class="column is-narrow">
             <.icon for="running" color="auto" aria-hidden="true" />
             <.icon for="enabled" color="auto" aria-hidden="true" />
           </div>
         </div>
-    </.panel_block_div>
+      </:actions>
+    </.panel_media>
     """
   end
 

lib/liliform/icon.ex

@@ -83,6 +83,24 @@ defmodule Liliform.Icon do
     """
   end
 
+  @doc """
+  Renders an icon without the icon-text wrapper.
+  """
+  attr :for, :string, required: true, doc: "icon name"
+  attr :size, :string, default: nil, doc: "size of icon"
+  attr :color, :string, default: nil, doc: "color of icon"
+  attr :rest, :global
+
+  def icon_raw(assigns) do
+    assigns =
+      assigns
+      |> set_bulma_classes()
+
+    ~H"""
+    <.icon_svg for={@for} height={@size} width={@size} {icon_color(assigns)} {@rest} />
+    """
+  end
+
   defp icon_svg(assigns) do
     base_assigns =
       assigns

lib/liliform/media.ex

@@ -24,6 +24,7 @@ defmodule Liliform.Media do
   @doc """
   Renders a media-left.
   """
+  attr :class, :string, default: "", doc: "additional classes"
   attr :rest, :global
 
   slot :inner_block, required: true
@@ -34,7 +35,7 @@ defmodule Liliform.Media do
       |> set_bulma_classes()
 
     ~H"""
-    <figure class="media-left" {@rest}>
+    <figure class={["media-left", @class]} {@rest}>
       <%= render_slot(@inner_block) %>
     </figure>
     """
@@ -43,6 +44,7 @@ defmodule Liliform.Media do
   @doc """
   Renders a media-content.
   """
+  attr :class, :string, default: "", doc: "additional classes"
   attr :rest, :global
 
   slot :inner_block, required: true
@@ -53,7 +55,7 @@ defmodule Liliform.Media do
       |> set_bulma_classes()
 
     ~H"""
-    <div class="media-content" {@rest}>
+    <div class={["media-content", @class]} {@rest}>
       <%= render_slot(@inner_block) %>
     </div>
     """
@@ -62,6 +64,7 @@ defmodule Liliform.Media do
   @doc """
   Renders a media-right.
   """
+  attr :class, :string, default: "", doc: "additional classes"
   attr :rest, :global
 
   slot :inner_block, required: true
@@ -72,7 +75,7 @@ defmodule Liliform.Media do
       |> set_bulma_classes()
 
     ~H"""
-    <div class="media-right" {@rest}>
+    <div class={["media-right", @class]} {@rest}>
       <%= render_slot(@inner_block) %>
     </div>
     """

lib/liliform/panel.ex

@@ -1,5 +1,6 @@
 defmodule Liliform.Panel do
   use Liliform.Component
+  import Liliform.Media
 
   @doc """
   Renders a panel.
@@ -81,6 +82,37 @@ defmodule Liliform.Panel do
     """
   end
 
+  @doc """
+  Renders panel-media.
+  """
+  attr :class, :string, default: "", doc: "additional classes"
+  attr :rest, :global
+
+  slot :icon, required: true
+  slot :actions, required: true
+  slot :inner_block, required: true
+
+  def panel_media(assigns) do
+    assigns =
+      assigns
+      |> set_bulma_classes()
+
+    ~H"""
+    <div class={["panel-block", @class]} {@rest}>
+      <.media class="is-fullwidth">
+        <.media_left>
+          <%= render_slot(@icon) %>
+        </.media_left>
+        <.media_content class="is-fullwidth">
+          <%= render_slot(@inner_block) %>
+        </.media_content>
+        <.media_right>
+          <%= render_slot(@actions) %>
+        </.media_right>
+      </.media>
+    </div>
+    """
+  end
 
   @doc """
   Renders a panel-tabs.