feat: reuse form_section in settings

lib/mv_web/components/core_components.ex

@@ -153,7 +153,7 @@ defmodule MvWeb.CoreComponents do
         aria-haspopup="menu"
         aria-expanded={@open}
         aria-controls={@id}
-        class="btn btn-ghost"
+        class="btn"
         phx-click="toggle_dropdown"
         phx-target={@phx_target}
         data-testid="dropdown-button"
@@ -236,6 +236,30 @@ defmodule MvWeb.CoreComponents do
     """
   end
 
+  @doc """
+  Renders a section in with a border similar to cards.
+
+
+  ## Examples
+
+      <.form_section title={gettext("Personal Data")}>
+        <p>input</p>
+      </form_section>
+  """
+  attr :title, :string, required: true
+  slot :inner_block, required: true
+
+  def form_section(assigns) do
+    ~H"""
+    <section class="mb-6">
+      <h2 class="text-lg font-semibold mb-3">{@title}</h2>
+      <div class="border border-base-300 rounded-lg p-4 bg-base-100">
+        {render_slot(@inner_block)}
+      </div>
+    </section>
+    """
+  end
+
   @doc """
   Renders an input with label and error messages.
 
@@ -434,7 +458,7 @@ defmodule MvWeb.CoreComponents do
     ~H"""
     <header class={[@actions != [] && "flex items-center justify-between gap-6", "pb-4", @class]}>
       <div>
-        <h1 class="text-lg font-semibold leading-8">
+        <h1 class="text-xl font-semibold leading-8">
           {render_slot(@inner_block)}
         </h1>
         <p :if={@subtitle != []} class="text-sm text-base-content/70">
@@ -474,6 +498,7 @@ defmodule MvWeb.CoreComponents do
 
   slot :col, required: true do
     attr :label, :string
+    attr :class, :string
   end
 
   slot :action, doc: "the slot for showing user actions in the last table column"
@@ -489,7 +514,7 @@ defmodule MvWeb.CoreComponents do
       <table class="table table-zebra">
         <thead>
           <tr>
-            <th :for={col <- @col}>{col[:label]}</th>
+            <th :for={col <- @col} class={Map.get(col, :class)}>{col[:label]}</th>
             <th :for={dyn_col <- @dynamic_cols}>
               <.live_component
                 module={MvWeb.Components.SortHeaderComponent}
@@ -510,7 +535,33 @@ defmodule MvWeb.CoreComponents do
             <td
               :for={col <- @col}
               phx-click={@row_click && @row_click.(row)}
-              class={["max-w-xs truncate", @row_click && "hover:cursor-pointer"]}
+              class={
+                col_class = Map.get(col, :class)
+                classes = ["max-w-xs"]
+
+                classes =
+                  if col_class == nil || (col_class && !String.contains?(col_class, "text-center")) do
+                    ["truncate" | classes]
+                  else
+                    classes
+                  end
+
+                classes =
+                  if @row_click do
+                    ["hover:cursor-pointer" | classes]
+                  else
+                    classes
+                  end
+
+                classes =
+                  if col_class do
+                    [col_class | classes]
+                  else
+                    classes
+                  end
+
+                Enum.join(classes, " ")
+              }
             >
               {render_slot(col, @row_item.(row))}
             </td>