Begin styling

aczw · Apr 23, 2024 · 4be65f2 · 4be65f2 · vercel · Apr 23, 2024
1 parent a5c0644
commit 4be65f2
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 21 deletions.
diff --git a/src/components/react/link-form.tsx b/src/components/react/link-form.tsx
@@ -1,7 +1,45 @@
-import { useState, type FormEvent } from "react";
+import { useRef, useState, type FormEvent } from "react";
 
 type Status = { type: "none" } | { type: "success" | "error"; message: string };
 
+const CopyButton = ({ value }: { value: string }) => {
+  const [timeoutId, setTimeoutId] = useState(-1);
+  const copiedRef = useRef<HTMLSpanElement>(null);
+  const copyToRef = useRef<HTMLSpanElement>(null);
+
+  function handleClick() {
+    window.clearTimeout(timeoutId);
+
+    navigator.clipboard.writeText(`go.czw.sh/${value}`);
+
+    copiedRef.current!.removeAttribute("hidden");
+    copyToRef.current!.style.opacity = "0";
+
+    const id = window.setTimeout(() => {
+      copiedRef.current!.setAttribute("hidden", "");
+      copyToRef.current!.style.opacity = "100";
+    }, 2000);
+
+    setTimeoutId(id);
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      className="relative rounded-full bg-light px-5 py-3.5 text-dark hover:bg-light/20 hover:font-semibold hover:text-light"
+    >
+      <span
+        ref={copiedRef}
+        className="absolute inset-x-0"
+        hidden
+      >
+        Copied
+      </span>
+      <span ref={copyToRef}>Copy to clipboard</span>
+    </button>
+  );
+};
+
 const LinkForm = () => {
   const [status, setStatus] = useState<Status>({ type: "none" });
 
@@ -23,28 +61,48 @@ const LinkForm = () => {
   }
 
   return (
-    <form
-      className="flex flex-col"
-      onSubmit={submit}
-    >
-      <label>
-        Original
-        <input
-          type="text"
-          name="original"
-          className="bg-purple-100"
-        />
-      </label>
-      <button>Send</button>
+    <section className="flex w-5/12 flex-col items-center gap-5">
+      <form
+        className="flex w-full items-end justify-center gap-2.5"
+        onSubmit={submit}
+      >
+        <label className="flex grow flex-col gap-1.5">
+          <span className="font-semibold">Original</span>
+          <input
+            name="original"
+            className="rounded-full bg-light px-5 py-3.5 text-dark placeholder-dark/80 selection:bg-dark selection:text-light"
+            placeholder="Enter a URL, e.g. https://charleszw.com/"
+          />
+        </label>
+
+        <button className="rounded-full bg-light px-5 py-3.5 text-dark hover:bg-light/20 hover:font-semibold hover:text-light">
+          Create
+        </button>
+      </form>
 
       {status.type !== "none" ? (
         status.type === "error" ? (
-          <p>{status.message}</p>
+          <p className="text-red-300">{status.message}</p>
         ) : (
-          <a href={`https://go.czw.sh/${status.message}`}>go.czw.sh/{status.message}</a>
+          <div className="flex w-full items-end justify-center gap-2.5">
+            <div className="flex grow flex-col gap-1.5">
+              <p className="font-semibold">Shortened</p>
+              <div className="rounded-full bg-light px-5 py-3.5 text-dark selection:bg-dark selection:text-light">
+                <a
+                  href={`https://go.czw.sh/${status.message}`}
+                  target="_blank"
+                  className="decoration-wavy underline-offset-2 hover:underline"
+                >
+                  go.czw.sh/{status.message}
+                </a>
+              </div>
+            </div>
+
+            <CopyButton value={status.message} />
+          </div>
         )
       ) : null}
-    </form>
+    </section>
   );
 };
 

diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
@@ -77,7 +77,7 @@ const canonicalUrl = removeTrailingSlash(new URL(Astro.url.pathname, Astro.site)
     <title>{title}</title>
   </head>
 
-  <body class="bg-dark font-mono text-light">
+  <body class="bg-dark font-mono text-base text-light selection:bg-light selection:text-dark">
     <slot />
   </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -11,10 +11,18 @@ const links = await db.select().from(Link);
   title="link shortener"
   description="Hello world"
 >
-  <main class="flex min-h-screen flex-col items-center justify-center space-y-12">
-    <LinkForm client:load />
+  <main class="flex min-h-screen flex-col items-center justify-center gap-12">
+    <div>
+      <h1 class="text-4xl font-semibold">link shortener</h1><p>
+        made by <a
+          href="https://charleszw.com"
+          target="_blank"
+          class="decoration-wavy underline-offset-2 hover:underline"
+          >charles</a>
+      </p>
+    </div>
 
-    <p>&lt;= === !== != --&gt; -&gt;</p>
+    <LinkForm client:load />
 
     <section>
       <h2 class="font-bold">Recent links:</h2>