feat(one_shot): some deno and lucid stuff

examples/one_shot/components/Button.tsx

@@ -6,7 +6,7 @@ export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
     <button
       {...props}
       disabled={!IS_BROWSER || props.disabled}
-      class="px-2 py-1 border(gray-100 2) hover:bg-gray-200"
+      class={`group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none bg-blue-600 text-white hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 ${props.class}`}
     />
   );
 }

examples/one_shot/components/Input.tsx

@@ -0,0 +1,21 @@
+import { ComponentChild, JSX } from "preact";
+
+export function Input(
+  { children, id, ...props }: JSX.HTMLAttributes<HTMLInputElement>,
+) {
+  return (
+    <div>
+      <label
+        for={id}
+        class="block mb-3 text-sm font-medium text-gray-700"
+      >
+        {children}
+      </label>
+      <input
+        {...props}
+        id={id}
+        class="block w-full appearance-none rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-blue-500 sm:text-sm"
+      />
+    </div>
+  );
+}