feat: add spinner component

lib/media_server_web/components/spinner_component.ex

@@ -0,0 +1,9 @@
+defmodule MediaServerWeb.Components.SpinnerComponent do
+  use Phoenix.Component
+
+  def render(assigns) do
+    ~H"""
+      <div class="w-12 h-12 rounded-full animate-spin border-2 border-solid border-slate-500 border-t-transparent"></div>
+    """
+  end
+end

lib/media_server_web/live/components_live/index.html.heex

@@ -1,4 +1,6 @@
 <.live_component module={MediaServerWeb.Components.NavComponent}
     id="nav-component"
     class="text-slate-600 hover:text-slate-800"
-/>
+/>
+
+<%= MediaServerWeb.Components.SpinnerComponent.render(%{}) %>

priv/static/assets/app.css

@@ -699,6 +699,10 @@ select {
   grid-column: span 1 / span 1;
 }
 
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -769,6 +773,22 @@ select {
   margin-top: 2rem;
 }
 
+.-ml-1 {
+  margin-left: -0.25rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mt-48 {
+  margin-top: 12rem;
+}
+
+.mt-56 {
+  margin-top: 14rem;
+}
+
 .block {
   display: block;
 }
@@ -881,6 +901,10 @@ select {
   width: 9rem;
 }
 
+.w-12 {
+  width: 3rem;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -921,6 +945,23 @@ select {
   transform-origin: top right;
 }
 
+@-webkit-keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
 .appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -935,6 +976,10 @@ select {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.flex-row {
+  flex-direction: row;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -1082,6 +1127,10 @@ select {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -1094,6 +1143,10 @@ select {
   border-bottom-width: 1px;
 }
 
+.border-solid {
+  border-style: solid;
+}
+
 .border-slate-200 {
   --tw-border-opacity: 1;
   border-color: rgb(226 232 240 / var(--tw-border-opacity));
@@ -1113,6 +1166,20 @@ select {
   border-color: transparent;
 }
 
+.border-blue-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
+.border-slate-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(100 116 139 / var(--tw-border-opacity));
+}
+
+.border-t-transparent {
+  border-top-color: transparent;
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1408,6 +1475,14 @@ select {
   color: rgb(107 114 128 / var(--tw-placeholder-opacity));
 }
 
+.opacity-25 {
+  opacity: 0.25;
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
 .mix-blend-multiply {
   mix-blend-mode: multiply;
 }
@@ -1638,6 +1713,10 @@ select {
     grid-column: span 2 / span 2;
   }
 
+  .lg\:col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+
   .lg\:mt-0 {
     margin-top: 0px;
   }