[Enhancement] Add pagination for a source's media (#190)

* [WIP] added first attempt at pagination component

* Hooked up pagination for downloaded media

lib/pinchflat_web/components/custom_components/table_components.ex

@@ -2,6 +2,8 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
   @moduledoc false
   use Phoenix.Component
 
+  alias PinchflatWeb.CoreComponents
+
   @doc """
   Renders a table component with the given rows and columns.
 
@@ -50,4 +52,52 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
     </table>
     """
   end
+
+  @doc """
+  Renders simple pagination controls for a table in a liveview.
+
+  ## Examples
+
+      <.live_pagination_controls page_number={@page} total_pages={@total_pages} />
+  """
+  attr :page_number, :integer, default: 1
+  attr :total_pages, :integer, default: 1
+
+  def live_pagination_controls(assigns) do
+    ~H"""
+    <nav>
+      <ul class="flex flex-wrap items-center">
+        <li>
+          <span
+            class={[
+              "flex h-8 w-8 items-center justify-center rounded",
+              @page_number != 1 && "cursor-pointer hover:bg-primary hover:text-white",
+              @page_number == 1 && "cursor-not-allowed"
+            ]}
+            phx-click={@page_number != 1 && "page_change"}
+            phx-value-direction="dec"
+          >
+            <CoreComponents.icon name="hero-chevron-left" />
+          </span>
+        </li>
+        <li>
+          <span class="mx-2">Page <%= @page_number %> of <%= @total_pages %></span>
+        </li>
+        <li>
+          <span
+            class={[
+              "flex h-8 w-8 items-center justify-center rounded",
+              @page_number != @total_pages && "cursor-pointer hover:bg-primary hover:text-white",
+              @page_number == @total_pages && "cursor-not-allowed"
+            ]}
+            phx-click={@page_number != @total_pages && "page_change"}
+            phx-value-direction="inc"
+          >
+            <CoreComponents.icon name="hero-chevron-right" />
+          </span>
+        </li>
+      </ul>
+    </nav>
+    """
+  end
 end