From acee33bd4991ca5345799b3a3fa5bbec4922e030 Mon Sep 17 00:00:00 2001
From: Triston <tarmstrong95@proton.me>
Date: Wed, 10 Jul 2024 00:15:53 -0500
Subject: [PATCH] refactor ui a bit

---
 src/index.html | 56 +++++++++++++++++++++++++++++---------------------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/index.html b/src/index.html
index 19f417b..3ebbfed 100644
--- a/src/index.html
+++ b/src/index.html
@@ -44,31 +44,28 @@
 
     <form hx-post="/paste">
       <div class="rounded lg:col-span-2 gap-2 flex-col flex">
-        <div class="flex gap-2">
-          <div class="flex flex-col">
-            <label class="text-gray-400">type: </label>
-            <select name="type" class="bg-gray-700 text-gray-200 px-2 py-1 rounded">
-              <option>text</option>
-              <option>javascript</option>
-              <option>rust</option>
-              <option>markdown</option>
-              <option>html</option>
-            </select>
-          </div>
 
-          <div class="flex flex-col">
-            <label class="text-gray-400">destroy: </label>
-            <select name="type" class="bg-gray-700 text-gray-200 px-2 py-1 rounded">
-              <option>after read</option>
-              <option>1 minute</option>
-              <option>5 minutes</option>
-              <option>10 minutes</option>
-            </select>
-          </div>
-        </div>
         <div class="rounded shadow-sm">
-          <input name='title' id='title' placeholder="Put title here..."
-            class="rounded-t border-none p-2 w-full focus:outline-none bg-gray-700 text-white" />
+          <div class="flex justify-between bg-gray-700 rounded-t p-1">
+            <input name='title' id='title' placeholder="Put title here..."
+              class="bg-gray-700 rounded-t border-none  text-white hover:border-none" />
+            <div class="flex gap-2">
+              <select name="type" class="bg-gray-600 text-gray-200 px-2 py-1 rounded">
+                <option>text</option>
+                <option>javascript</option>
+                <option>rust</option>
+                <option>markdown</option>
+                <option>html</option>
+              </select>
+
+              <select name="type" class="bg-gray-600 text-gray-200 px-2 py-1 rounded">
+                <option>after read</option>
+                <option>1 minute</option>
+                <option>5 minutes</option>
+                <option>10 minutes</option>
+              </select>
+            </div>
+          </div>
           <textarea name='content' id="content"
             class="rounded-b text-white w-full resize-y border-none align-top sm:text-sm p-2 bg-gray-50 min-h-fit focus:outline-none bg-gray-800"
             rows="16" placeholder="Paste your stuff here..."></textarea>
@@ -119,4 +116,17 @@
   handleCookie()
 </script>
 
+<script type="module">
+  // be sure to specify the exact version
+  import {codeToHtml} from 'https://esm.sh/shiki@1.0.0'
+  // or
+  // import { codeToHtml } from 'https://esm.run/shiki@1.0.0'
+
+  const foo = document.getElementById('foo')
+  foo.innerHTML = await codeToHtml('console.log("Hi, Shiki on CDN :)")', {
+    lang: 'js',
+    theme: 'rose-pine'
+  })
+</script>
+
 </html>