Add code block and create_gist button

assets/css/app.css

@@ -22,13 +22,37 @@
     height: 225px;
 }
 
+form input[type="text"]{
+    @apply bg-emDark-dark font-brand font-regular text-white text-xs border border-white
+}
+
+form input[type="text"]:focus{
+    @apply focus:outline-none focus:border-emLavender focus:ring-0
+}
+
+.textarea{
+    @apply bg-emDark-dark font-brand font-regular text-white text-xs border border-white h-[300px] resize-none;
+    border-top: none;
+}
+
+.textarea:focus{
+    @apply focus:outline-none focus:border-white focus:ring-0
+}
+
+.create_button{
+    @apply bg-emPurple border border-white font-brand font-regular text-black text-base
+}
+
+.create_button:hover{
+    @apply hover:bg-emPurple-dark text-emDark-light border-emDark-light
+}
 .dropdown-menu-arrow::before {
     content: "";
     position: absolute;
     top: -5px;
     left: calc(95% - 12px);
     border-width: 0 5px 5px 5px;
-    border-style: solid;
+    border-style: solid; 
     border-color: transparent transparent white transparent
 }
 

lib/elixir_gist_web/live/create_gist_live.ex

@@ -1,12 +1,20 @@
 defmodule ElixirGistWeb.CreateGistLive do
   use ElixirGistWeb, :live_view
+  import Phoenix.HTML.Form
+  alias ElixirGist.{Gists, Gists.Gist}
 
   def mount(_params, _session, socket) do
+    socket =
+      assign(
+        socket,
+        form: to_form(Gists.change_gist(%Gist{}))
+      )
     {:ok, socket}
   end
-  # def render(assigns) do
-  #   ~H"""
-
-  #   """
-  # end
 end
+
+# def render(assigns) do
+#   ~H"""
+
+#   """
+# end

lib/elixir_gist_web/live/create_gist_live.html.heex

@@ -1,6 +1,26 @@
-<.flash_group flash={@flash} />
 <div class="em-gradient flex items-center justify-center">
   <h1 class="font-brand font-bold text-3xl text-white">
-    Share Elixir code, notes, and snippets
+    Share Elixir code, notes, and snippets.
   </h1>
-</div>
+</div>
+<.form for={@form}>
+    <div class="justify center px-28 w-full space-y-4 mb-10">
+        <.input field={@form[:description]} placeholder="Gist description..." autocomplete="off" />
+        <div>
+          <div class="flex p-2 items-center bg-emDark rounded-t-md border">
+            <div class="w-[300px] mb-2">
+              <.input field={@form[:name]} placeholder="Filename including extension.." autocomplete="off"/>
+            </div>
+          </div>
+          <%=textarea(@form, :markup_text, 
+          class: "textarea w-full rounded-b-md", 
+          placeholder: "Insert Code..", 
+          spellcheck: "false", 
+          autocomplete: "off")%>    
+        </div>
+        <div class="flex justify-end">
+          <.button class="create_button">Create Gist</.button>
+        </div>
+    </div>
+
+</.form>