Add the buttons for save, edit, cancel actions.

lib/decentralised_book_index_web/components/my_components/buttons.ex

@@ -52,7 +52,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.Buttons do
     <button
       type={@type}
       class={[
-        "phx-submit-loading:opacity-75 rounded-lg py-2 px-3 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800 me-auto",
+        "phx-submit-loading:opacity-75 rounded-lg py-2 px-3 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800",
         "text-sm font-semibold leading-6 text-white active:text-white/80",
         @class
       ]}
@@ -62,4 +62,84 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.Buttons do
     </button>
     """
   end
+
+  attr :type, :string, default: nil
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled form name value)
+
+  slot :inner_block, required: true
+
+  def save_button(assigns) do
+    ~H"""
+    <.success_button
+      type={@type}
+      class={[
+        "phx-submit-loading:opacity-75 rounded-lg py-2 px-3 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800",
+        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "flex items-center gap-1",
+        @class
+      ]}
+      {@rest}
+    >
+      <svg class="w-6 h-6 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+        <path fill-rule="evenodd" d="M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7.414A2 2 0 0 0 20.414 6L18 3.586A2 2 0 0 0 16.586 3H5Zm3 11a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6H8v-6Zm1-7V5h6v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
+        <path fill-rule="evenodd" d="M14 17h-4v-2h4v2Z" clip-rule="evenodd"/>
+      </svg>
+      {render_slot(@inner_block)}
+    </.success_button>
+    """
+  end
+
+  attr :type, :string, default: nil
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled form name value)
+
+  slot :inner_block, required: true
+
+  def edit_button(assigns) do
+    ~H"""
+    <.primary_button
+      type={@type}
+      class={[
+        "phx-submit-loading:opacity-75 rounded-lg py-2 px-3 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800",
+        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "flex items-center gap-1",
+        @class
+      ]}
+      {@rest}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 -ml-0.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
+        <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path>
+      </svg>
+      {render_slot(@inner_block)}
+    </.primary_button>
+    """
+  end
+
+  attr :type, :string, default: nil
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled form name value)
+
+  slot :inner_block, required: true
+
+  def cancel_button(assigns) do
+    ~H"""
+    <.primary_button
+      type={@type}
+      class={[
+        "phx-submit-loading:opacity-75 rounded-lg py-2 px-3 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800",
+        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "flex items-center gap-1",
+        @class
+      ]}
+      {@rest}
+    >
+      <svg class="w-6 h-6 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
+      </svg>
+      {render_slot(@inner_block)}
+    </.primary_button>
+    """
+  end
 end