select, paste-page, switch-to-aisyui

TeaByte · Jan 11, 2024 · 107f079 · 107f079
1 parent 0dec713
commit 107f079
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 113 deletions.
diff --git a/components/Button.tsx b/components/Button.tsx
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <footer class="footer items-center p-4 bg-neutral text-neutral-content fixed bottom-0 w-full">
+    <footer class="footer items-center p-4 bg-base-300 flex justify-between">
       <aside class="items-center grid-flow-col">
         <a href="https://fresh.deno.dev" target="_blank">
           <img

diff --git a/components/NavBar.tsx b/components/NavBar.tsx
@@ -1,6 +1,6 @@
 export default function NavBar() {
   return (
-    <nav class="navbar bg-neutral text-neutral-content">
+    <nav class="navbar bg-base-300">
       <div class="flex-1">
         <a href="/" className="flex gap-1 items-center justify-center">
           <img
@@ -15,22 +15,7 @@ export default function NavBar() {
       <div class="flex-none">
         <ul class="menu menu-horizontal px-1">
           <li>
-            <a>Link</a>
-          </li>
-          <li>
-            <details>
-              <summary>
-                Parent
-              </summary>
-              <ul class="p-2 bg-base-100 rounded-t-none">
-                <li>
-                  <a href="/api">API</a>
-                </li>
-                <li>
-                  <a>Link 2</a>
-                </li>
-              </ul>
-            </details>
+            <a href="/api">API</a>
           </li>
         </ul>
       </div>

diff --git a/components/SelectLang.tsx b/components/SelectLang.tsx
@@ -0,0 +1,54 @@
+export default function SelectLang() {
+  return (
+    <select
+      name="syntax"
+      class="select select-bordered w-full max-w-xs"
+    >
+      <option value="plain" default>TEXT</option>
+      {[
+        "html",
+        "css",
+        "javascript",
+        "bash",
+        "basic",
+        "brainfuck",
+        "c",
+        "csharp",
+        "cpp",
+        "clojure",
+        "coffeescript",
+        "dart",
+        "elixir",
+        "erlang",
+        "fsharp",
+        "factor",
+        "go",
+        "graphql",
+        "haskell",
+        "java",
+        "julia",
+        "kotlin",
+        "lisp",
+        "livescript",
+        "lua",
+        "markdown",
+        "matlab",
+        "ocaml",
+        "php",
+        "phpdoc",
+        "python",
+        "qsharp",
+        "r",
+        "regex",
+        "ruby",
+        "rust",
+        "sql",
+        "swift",
+        "typescript",
+        "webassembly",
+        "yaml",
+        "zig",
+      ].map((syntax) => <option value={syntax}>{syntax.toUpperCase()}</option>)}
+    </select>
+  );
+}
diff --git a/islands/CopyButton.tsx b/islands/CopyButton.tsx
@@ -1,5 +1,3 @@
-import { Button } from "../components/Button.tsx";
-
 interface CopyButton {
   content: string;
 }
@@ -10,7 +8,7 @@ export default function CopyButton(props: CopyButton) {
   }
 
   return (
-    <Button onClick={copyToClipboard}>
+    <button class="btn btn-active btn-ghost" onClick={copyToClipboard}>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
@@ -25,6 +23,6 @@ export default function CopyButton(props: CopyButton) {
           d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
         />
       </svg>
-    </Button>
+    </button>
   );
 }
diff --git a/routes/[paste].tsx b/routes/[paste].tsx
@@ -26,20 +26,22 @@ export default function Greet(props: PageProps) {
         </link>
       </Head>
 
-      <section>
-        <div class="flex justify-between items-center">
-          <p>Syntax: {props.data.paste.syntax.toUpperCase()}</p>
-          <div class={"flex gap-1 items-center justify-center"}>
+      <section class="h-full flex flex-col items-center justify-center mx-8 py-8">
+        <div class="flex justify-between items-center w-full">
+          <div class="badge bg-base-300">
+            {props.data.paste.syntax.toUpperCase()}
+          </div>
+          <div class="flex gap-1 items-center justify-center">
             <CopyButton content={props.data.paste.content} />
             <a
               href={`/api/raw/${props.data.id}`}
-              class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
+              class="btn btn-active btn-ghost"
             >
               Raw
             </a>
           </div>
         </div>
-        <pre class="rounded h-96"><code class={`language-${props.data.paste.syntax} match-braces line-numbers`}>{props.data.paste.content}</code></pre>
+        <pre class="rounded grow w-full"><code class={`language-${props.data.paste.syntax} match-braces line-numbers`}>{props.data.paste.content}</code></pre>
       </section>
     </>
   );

diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -5,7 +5,7 @@ import NavBar from "../components/NavBar.tsx";
 
 export default function App({ Component }: PageProps) {
   return (
-    <html>
+    <html lang="en">
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -18,11 +18,7 @@ export default function App({ Component }: PageProps) {
           name="keywords"
           content="text sharing, collaboration, code snippets, notes, online platform, Fresh Paste"
         />
-        <meta name="robots" content="index, follow" />
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        <meta name="language" content="English" />
-        <meta name="revisit-after" content="10 days" />
-        <meta name="author" content="TeaBytr" />
+        <meta name="author" content="TeaByte" />
 
         <link rel="stylesheet" href="/styles.css" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -33,13 +29,13 @@ export default function App({ Component }: PageProps) {
         />
       </head>
       <body>
-        <NavBar />
-        <main class="flex flex-col items-center justify-center gap-2 px-6 md:px-20 w-full">
-          <div class="w-full">
+        <div class="h-screen flex flex-col">
+          <NavBar />
+          <main class="grow">
             <Component />
-          </div>
-        </main>
-        <Footer />
+          </main>
+          <Footer />
+        </div>
       </body>
     </html>
   );

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -1,6 +1,8 @@
 import { Handlers } from "$fresh/server.ts";
 import { makePaste } from "../utils/db.ts";
 
+import SelectLang from "../components/SelectLang.tsx";
+
 export const handler: Handlers = {
   async GET(_, ctx) {
     return await ctx.render();
@@ -28,81 +30,25 @@ export const handler: Handlers = {
 
 export default function Subscribe() {
   return (
-    <section>
+    <section class="h-full flex flex-col items-center justify-center mx-8">
       <form
-        class="flex flex-col w-full items-center justify-center gap-2"
+        class="grow flex flex-col w-full items-center justify-center gap-2 py-8"
         method="post"
       >
         <textarea
-          rows={17}
           minLength={5}
           maxlength={5000}
           type="text"
           name="content"
           placeholder="Paste your content here"
-          class="textarea textarea-bordered w-full"
+          class="textarea textarea-bordered bg-base-300 w-full h-full"
         >
         </textarea>
-
         <div class="flex gap-2">
-          <button
-            type="submit"
-            class="px-2 py-1 w-32 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
-          >
+          <button type="submit" class="btn btn-active btn-ghost w-52">
             Share
           </button>
-          <select
-            name="syntax"
-            class="bg-white border-gray-500 border-2 rounded w-40"
-          >
-            <option value="plain" default>TEXT</option>
-            {[
-              "html",
-              "css",
-              "javascript",
-              "bash",
-              "basic",
-              "brainfuck",
-              "c",
-              "csharp",
-              "cpp",
-              "clojure",
-              "coffeescript",
-              "dart",
-              "elixir",
-              "erlang",
-              "fsharp",
-              "factor",
-              "go",
-              "graphql",
-              "haskell",
-              "java",
-              "julia",
-              "kotlin",
-              "lisp",
-              "livescript",
-              "lua",
-              "markdown",
-              "matlab",
-              "ocaml",
-              "php",
-              "phpdoc",
-              "python",
-              "qsharp",
-              "r",
-              "regex",
-              "ruby",
-              "rust",
-              "sql",
-              "swift",
-              "typescript",
-              "webassembly",
-              "yaml",
-              "zig",
-            ].map((syntax) => (
-              <option value={syntax}>{syntax.toUpperCase()}</option>
-            ))}
-          </select>
+          <SelectLang />
         </div>
       </form>
     </section>