Prototype CSS only calendar result

assets/css/app.css

@@ -3,3 +3,108 @@
 @import "tailwindcss/utilities";
 
 /* This file is for your main application CSS */
+.calendar-wrapper {
+    display: flex;
+    position: absolute;
+    width: 80vw;
+    flex-wrap: wrap;
+    left: 10%;
+    top: 200px;
+}
+
+.calendar {
+    display: inline-grid;
+    justify-content: center;
+    align-items: center;
+    background: #fff;
+    padding: 20px;
+    margin: 40px;
+    border-radius: 5px;
+    box-shadow: 0px 40px 30px -20px rgba(0, 0, 0, 0.3);
+
+    .month {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 20px;
+        margin-bottom: 20px;
+        font-weight: 300;
+
+        .year {
+            font-weight: 600;
+            margin-left: 10px;
+        }
+
+        .nav {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-decoration: none;
+            color: #0a3d62;
+            width: 40px;
+            height: 40px;
+            border-radius: 40px;
+            transition-duration: .2s;
+            position: relative;
+
+            &:hover {
+                background: #eee;
+            }
+        }
+    }
+
+    .days {
+        display: grid;
+        justify-content: center;
+        align-items: center;
+        grid-template-columns: repeat(7, 1fr);
+        color: #999;
+        font-weight: 600;
+        margin-bottom: 15px;
+
+        span {
+            width: 50px;
+            justify-self: center;
+            align-self: center;
+            text-align: center;
+        }
+    }
+
+    .dates {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+
+        button {
+            cursor: pointer;
+            outline: 0;
+            border: 0;
+            background: transparent;
+            font-size: 16px;
+            justify-self: center;
+            align-self: center;
+            width: 50px;
+            height: 50px;
+            border-radius: 50px;
+            margin: 2px;
+            transition-duration: .2s;
+
+            &.today {
+                box-shadow: inset 0px 0px 0px 2px #0a3d62;
+            }
+
+            &:first-child {
+                grid-column: 3;
+            }
+
+            &:hover {
+                background: #eee;
+            }
+
+            &:focus {
+                background: #0a3d62;
+                color: #fff;
+                font-weight: 600;
+            }
+        }
+    }
+}

lib/mihainator_web/live/result_live.ex

@@ -0,0 +1,8 @@
+defmodule MihainatorWeb.ResultLive do
+  use MihainatorWeb, :live_view
+
+  @impl Phoenix.LiveView
+  def mount(_params, _session, socket) do
+    {:ok, socket}
+  end
+end

lib/mihainator_web/live/upload_live.ex

@@ -29,10 +29,12 @@ defmodule MihainatorWeb.UploadLive do
 
   @impl Phoenix.LiveView
   @spec handle_info({reference(), any()}, any()) :: {:noreply, any()}
-  def handle_info({ref, _result}, socket) do
+  def handle_info({ref, result}, socket) do
     Process.demonitor(ref, [:flush])
 
-    {:noreply, socket}
+    socket = assign(socket, :calendar_dates, result)
+
+    {:noreply, push_navigate(socket, to: ~p"/result")}
   end
 
   defp error_to_string(:too_large), do: "Too large"

lib/mihainator_web/router.ex

@@ -19,6 +19,7 @@ defmodule MihainatorWeb.Router do
 
     get "/", PageController, :home
     live "/upload", UploadLive
+    live "/result", ResultLive
   end
 
   # Other scopes may use custom stacks.