feat(ui): create idiomatic UI matching previous katbin iteration

Signed-off-by: SphericalKat <amolele@gmail.com>

lib/ketbin_web/templates/layout/app.html.eex

@@ -11,7 +11,7 @@
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
   </head>
-  <body>
+  <body class="flex flex-col ">
     <header class="flex w-full justify-between items-center py-3 px-6">
      <a href="<%= Routes.page_path(@conn, :index) %>">
         <span class="font-semibold text-xl tracking-tight">

lib/ketbin_web/templates/page/form.html.eex

@@ -0,0 +1,14 @@
+<%= form_for @changeset, @action, [class: "flex flex-col w-full h-full relative"], fn f -> %>
+    <%= if @changeset.action do %>
+        <div class="w-full text-center bg-amber">
+            <p>Oops, something went wrong!</p>
+        </div>
+    <% end %>
+
+    <div>
+        <%= textarea f, :content, [class: "w-full h-full px-6 py-4 outline-none bg-light-grey font-bold resize-none", placeholder: "> Paste, save, share! (Pasting just a URL will shorten it!)"] %>
+        <div class="absolute top-0 right-0 p-4">
+            <%= submit "Save" %>
+        </div>
+    </div>
+<% end %>

lib/ketbin_web/templates/page/index.html.eex

@@ -1,3 +1 @@
-<div>
-	hello, world!	
-</div>
+<%= render "form.html", Map.put(assigns, :action, Routes.page_path(@conn, :create)) %>

lib/ketbin_web/templates/paste/new.html.eex

@@ -1,5 +1 @@
-<h1>New Paste</h1>
-
 <%= render "form.html", Map.put(assigns, :action, Routes.paste_path(@conn, :create)) %>
-
-<span><%= link "Back", to: Routes.paste_path(@conn, :index) %></span>