feature(memberslist): added columns to memberslist and added selection and sortable header

lib/mv_web/components/layouts.ex

@@ -19,7 +19,7 @@ defmodule MvWeb.Layouts do
       <Layouts.app flash={@flash}>
         <h1>Content</h1>
       </Layout.app>
-      
+
   """
   attr :flash, :map, required: true, doc: "the map of flash messages"
 
@@ -67,8 +67,8 @@ defmodule MvWeb.Layouts do
       </div>
     </header>
 
-    <main class="px-4 py-20 sm:px-6 lg:px-8">
-      <div class="mx-auto max-w-2xl space-y-4">
+    <main class="px-4 py-20 sm:px-6 lg:px-16">
+      <div class="mx-auto max-full space-y-4">
         {render_slot(@inner_block)}
       </div>
     </main>

lib/mv_web/components/table_components.ex

@@ -0,0 +1,44 @@
+defmodule MvWeb.TableComponents do
+  @moduledoc """
+  TableComponents that can be used in tables as components (like a button for sorting, a filter...)
+  """
+  use Phoenix.Component
+  import MvWeb.CoreComponents
+  use Gettext, backend: MvWeb.Gettext
+
+  attr :field, :atom, required: true
+  attr :label, :string, required: true
+  attr :sort_field, :atom, default: nil
+  attr :sort_order, :atom, default: nil
+
+  @doc """
+  A sort button (with chevron icon) that can be used to sort a list of items
+  """
+  def sort_button(assigns) do
+    ~H"""
+    <button
+      type="button"
+      phx-click="sort"
+      phx-value-field={@field}
+      aria-sort={aria_sort(@sort_field, @sort_order, @field)}
+      class="flex items-center gap-1 hover:underline focus:outline-none"
+    >
+      <span>{@label}</span>
+      <%= if @sort_field == @field do %>
+        <.icon name={if @sort_order == :asc, do: "hero-chevron-up", else: "hero-chevron-down"} />
+        <span class="sr-only">
+          ({(@sort_order == :asc && gettext("ascending")) || gettext("descending")})
+        </span>
+      <% end %>
+    </button>
+    """
+  end
+
+  defp aria_sort(current_field, current_order, this_field) do
+    cond do
+      current_field != this_field -> "none"
+      current_order == :asc -> "ascending"
+      true -> "descending"
+    end
+  end
+end