First UI Pass (#15)

* Added scratchpad dir

* Installed Alpine

* [WIP] began integrating Tailwind and accompanying theme

* [WIP] Set up basic views for sources

* Adds new UI to media profiles page

* Removes unneeded view

lib/pinchflat_web/components/custom_components/button_components.ex

@@ -0,0 +1,33 @@
+defmodule PinchflatWeb.CustomComponents.ButtonComponents do
+  @moduledoc false
+  use Phoenix.Component
+
+  @doc """
+  Render a button
+
+  ## Examples
+
+      <.button color="bg-primary" rounding="rounded-sm">
+        <span>Click me</span>
+      </.button>
+  """
+  attr :color, :string, default: "bg-primary"
+  attr :rounding, :string, default: "rounded-sm"
+  attr :class, :string, default: ""
+
+  slot :inner_block, required: true
+
+  def button(assigns) do
+    ~H"""
+    <button class={[
+      "text-center font-medium text-white",
+      "#{@rounding} inline-flex items-center justify-center px-10 py-4",
+      "#{@color}",
+      "hover:bg-opacity-90 lg:px-8 xl:px-10",
+      @class
+    ]}>
+      <%= render_slot(@inner_block) %>
+    </button>
+    """
+  end
+end

lib/pinchflat_web/components/custom_components/table_components.ex

@@ -0,0 +1,53 @@
+defmodule PinchflatWeb.CustomComponents.TableComponents do
+  @moduledoc false
+  use Phoenix.Component
+
+  @doc """
+  Renders a table component with the given rows and columns.
+
+  ## Examples
+
+      <.table rows={@users}>
+        <:col :let={user} label="Name"><%= user.name %></:col>
+      </.table>
+  """
+  attr :rows, :list, required: true
+  attr :table_class, :string, default: ""
+
+  attr :row_item, :any,
+    default: &Function.identity/1,
+    doc: "the function for mapping each row before calling the :col and :action slots"
+
+  slot :col, required: true do
+    attr :label, :string
+    attr :class, :string
+  end
+
+  def table(assigns) do
+    ~H"""
+    <table class={["w-full table-auto", @table_class]}>
+      <thead>
+        <tr class="bg-gray-2 text-left dark:bg-meta-4">
+          <th :for={col <- @col} class="px-4 py-4 font-medium text-black dark:text-white xl:pl-11">
+            <%= col[:label] %>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr :for={{row, i} <- Enum.with_index(@rows)}>
+          <td
+            :for={col <- @col}
+            class={[
+              "px-4 py-5 pl-9 dark:border-strokedark xl:pl-11",
+              i + 1 > length(@rows) && "border-b border-[#eee] dark:border-π",
+              col[:class]
+            ]}
+          >
+            <%= render_slot(col, @row_item.(row)) %>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    """
+  end
+end