use core components

lib/memex_web/components/core_components/modal.html.heex

@@ -0,0 +1,41 @@
+<.link
+  id="modal-bg"
+  patch={@return_to}
+  class="fade-in fixed z-10 left-0 top-0
+    w-full h-full overflow-hidden
+    p-8 flex flex-col justify-center items-center cursor-auto"
+  style="background-color: rgba(0,0,0,0.4);"
+  phx-remove={hide_modal()}
+>
+  <span class="hidden"></span>
+</.link>
+
+<div
+  id="modal"
+  class="fixed z-10 left-0 top-0 pointer-events-none
+    w-full h-full overflow-hidden
+    p-4 sm:p-8 flex flex-col justify-center items-center"
+>
+  <div
+    id="modal-content"
+    class="fade-in-scale max-w-3xl max-h-3xl relative w-full
+      pointer-events-auto overflow-hidden
+      px-8 py-4 sm:py-8 flex flex-col justify-start items-stretch
+      bg-primary-800 text-primary-400 border-primary-900 border-2 rounded-lg"
+  >
+    <.link
+      patch={@return_to}
+      id="close"
+      class="absolute top-8 right-10
+        text-gray-500 hover:text-gray-800
+        transition-all duration-500 ease-in-out"
+      phx-remove={hide_modal()}
+    >
+      <i class="fa-fw fa-lg fas fa-times"></i>
+    </.link>
+
+    <div class="overflow-x-hidden overflow-y-auto w-full p-8 flex flex-col space-y-4 justify-start items-stretch">
+      <%= render_slot(@inner_block) %>
+    </div>
+  </div>
+</div>

lib/memex_web/components/core_components/toggle_button.html.heex

@@ -0,0 +1,30 @@
+<label for={@id || @action} class="inline-flex relative items-center cursor-pointer">
+  <input
+    id={@id || @action}
+    type="checkbox"
+    value={@value}
+    checked={@value}
+    class="sr-only peer"
+    aria-labelledby={"#{@id || @action}-label"}
+    {
+      if assigns |> Map.has_key?(:target),
+        do: %{"phx-click": @action, "phx-value-value": @value, "phx-target": @target},
+        else: %{"phx-click": @action, "phx-value-value": @value}
+    }
+  />
+  <div class="w-11 h-6 bg-gray-300 rounded-full peer
+    peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800
+    peer-checked:bg-gray-600
+    peer-checked:after:translate-x-full peer-checked:after:border-white
+    after:content-[''] after:absolute after:top-1 after:left-[2px] after:bg-white after:border-gray-300
+    after:border after:rounded-full after:h-5 after:w-5
+    after:transition-all after:duration-250 after:ease-in-out
+    transition-colors duration-250 ease-in-out">
+  </div>
+  <span
+    id={"#{@id || @action}-label"}
+    class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
+  >
+    <%= render_slot(@inner_block) %>
+  </span>
+</label>

lib/memex_web/components/core_components/topbar.html.heex

@@ -0,0 +1,113 @@
+<nav role="navigation" class="mb-8 px-8 py-4 w-full bg-primary-900 text-primary-400">
+  <div class="flex flex-col sm:flex-row justify-between items-center">
+    <div class="mb-4 sm:mb-0 sm:mr-8 flex flex-row justify-start items-center space-x-2">
+      <.link
+        navigate={Routes.live_path(Endpoint, HomeLive)}
+        class="mx-2 my-1 leading-5 text-xl text-primary-400 hover:underline"
+      >
+        <%= gettext("memEx") %>
+      </.link>
+
+      <%= if @title_content do %>
+        <span class="mx-2 my-1">
+          |
+        </span>
+        <%= @title_content %>
+      <% end %>
+    </div>
+
+    <hr class="mb-2 sm:hidden hr-light" />
+
+    <ul class="flex flex-row flex-wrap justify-center items-center
+      text-lg text-primary-400 text-ellipsis">
+      <li class="mx-2 my-1">
+        <.link
+          navigate={Routes.note_index_path(Endpoint, :index)}
+          class="text-primary-400 hover:underline truncate"
+        >
+          <%= gettext("notes") %>
+        </.link>
+      </li>
+
+      <li class="mx-2 my-1">
+        <.link
+          navigate={Routes.context_index_path(Endpoint, :index)}
+          class="text-primary-400 hover:underline truncate"
+        >
+          <%= gettext("contexts") %>
+        </.link>
+      </li>
+
+      <li class="mx-2 my-1">
+        <.link
+          navigate={Routes.pipeline_index_path(Endpoint, :index)}
+          class="text-primary-400 hover:underline truncate"
+        >
+          <%= gettext("pipelines") %>
+        </.link>
+      </li>
+
+      <li class="mx-2 my-1 border-left border border-primary-700">​</li>
+
+      <%= if @current_user do %>
+        <li :if={@current_user |> Accounts.is_already_admin?()} class="mx-2 my-1">
+          <.link
+            navigate={Routes.invite_index_path(Endpoint, :index)}
+            class="text-primary-400 hover:underline"
+          >
+            <%= gettext("invites") %>
+          </.link>
+        </li>
+
+        <li class="mx-2 my-1">
+          <.link
+            navigate={Routes.user_settings_path(Endpoint, :edit)}
+            class="text-primary-400 hover:underline truncate"
+          >
+            <%= @current_user.email %>
+          </.link>
+        </li>
+        <li class="mx-2 my-1">
+          <.link
+            href={Routes.user_session_path(Endpoint, :delete)}
+            method="delete"
+            data-confirm={dgettext("prompts", "are you sure you want to log out?")}
+          >
+            <i class="fas fa-sign-out-alt"></i>
+          </.link>
+        </li>
+        <li
+          :if={
+            @current_user.role == :admin and function_exported?(Routes, :live_dashboard_path, 2)
+          }
+          class="mx-2 my-1"
+        >
+          <.link
+            navigate={Routes.live_dashboard_path(Endpoint, :home)}
+            class="text-primary-400 hover:underline"
+          >
+            <i class="fas fa-gauge"></i>
+          </.link>
+        </li>
+      <% else %>
+        <li :if={Accounts.allow_registration?()} class="mx-2 my-1">
+          <.link
+            href={Routes.user_registration_path(Endpoint, :new)}
+            class="text-primary-400 hover:underline truncate"
+          >
+            <%= dgettext("actions", "register") %>
+          </.link>
+        </li>
+
+        <li class="mx-2 my-1">
+          <.link
+            href={Routes.user_session_path(Endpoint, :new)}
+            class="text-primary-400 hover:underline truncate"
+          >
+            <%= dgettext("actions", "log in") %>
+          </.link>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+</nav>

lib/memex_web/components/core_components/user_card.html.heex

@@ -0,0 +1,37 @@
+<div
+  id={"user-#{@user.id}"}
+  class="px-8 py-4 flex flex-col justify-center items-center text-center
+    bg-primary-900
+    border border-gray-400 rounded-lg shadow-lg hover:shadow-md
+    transition-all duration-300 ease-in-out"
+>
+  <h1 class="px-4 py-2 rounded-lg title text-xl break-all">
+    <%= @user.email %>
+  </h1>
+
+  <h3 class="px-4 py-2 rounded-lg title text-lg">
+    <p>
+      <%= if @user.confirmed_at do %>
+        <%= gettext(
+          "user confirmed on%{confirmed_datetime}",
+          confirmed_datetime: ""
+        ) %>
+        <.datetime datetime={@user.confirmed_at} />
+      <% else %>
+        <%= gettext("email unconfirmed") %>
+      <% end %>
+    </p>
+
+    <p>
+      <%= gettext(
+        "user registered on%{registered_datetime}",
+        registered_datetime: ""
+      ) %>
+      <.datetime datetime={@user.inserted_at} />
+    </p>
+  </h3>
+
+  <div :if={@inner_block} class="px-4 py-2 flex space-x-4 justify-center items-center">
+    <%= render_slot(@inner_block) %>
+  </div>
+</div>