Add frontend template with dummy data

2026-01-11 13:13:25 +00:00 · 2025-12-24 12:21:17 +00:00
parent 4107d7a248
commit ca34727c79
13 changed files with 6892 additions and 0 deletions
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -0,0 +1,109 @@
+'use client';
+
+import { useState } from "react";
+import { shortenLink } from "./utils/shortenLink";
+import { Clipboard, Minimize2 } from "lucide-react";
+
+export default function Home() {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  const [shortUrl, setShortUrl] = useState<string | null>(null);
+  const [manageUrl, setManageUrl] = useState<string | null>(null);
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    try {
+      const formData = new FormData(event.currentTarget);
+      const longUrl = formData.get("longUrl") as string;
+      const res = await shortenLink(longUrl);
+      setSuccessMessage("Shortened URL!");
+      setErrorMessage(null);
+      setShortUrl(res.shortUrl);
+      setManageUrl(res.manageUrl);
+    } catch (err) {
+      console.error(err);
+      setErrorMessage("Failed to shorten the link. Please try again.");
+      setSuccessMessage(null);
+    }
+  }
+
+  function copyToClipboard(text: string, title: string) {
+    navigator.clipboard.writeText(text).then(
+      () => {
+        setSuccessMessage(`Copied ${title} to clipboard!`);
+      },
+      () => {
+        setErrorMessage(`Failed to copy ${title} to clipboard.`);
+      }
+    );
+  }
+
+  return (
+    <div className="bg-stone-300 flex min-h-screen flex-col items-center justify-center py-2">
+      <h1 className="text-3xl font-bold">halflink</h1>
+      <p>Shorten a link with ease.</p>
+
+      <form className="mt-4 flex w-full max-w-xl" onSubmit={handleSubmit}>
+        <input
+          type="text"
+          name="longUrl"
+          placeholder="Enter your long URL here"
+          className="bg-white flex-grow border border-stone-400 rounded-l px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        <button
+          type="submit"
+          className="bg-blue-500 text-white px-4 py-2 rounded-r hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          <Minimize2 />
+        </button>
+      </form>
+      {errorMessage && (
+        <p className="mt-4 text-red-800 font-bold">{errorMessage}</p>
+      )}
+      {successMessage && (
+        <p className="mt-4 text-green-800 font-bold">{successMessage}</p>
+      )}
+
+      {shortUrl && manageUrl && (
+        <div className="flex flex-col items-center w-full">
+
+          <p className="mt-4">Shareable short link:</p>
+          <div className="flex justify-center w-full max-w-xl">
+            <input
+              type="text"
+              value={shortUrl}
+              readOnly
+              className="bg-white w-full max-w-md border border-stone-400 rounded-l text-center pl-20 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+            <button
+              type="submit"
+              className="flex justify-center w-16 bg-blue-500 text-white px-4 py-2 rounded-r hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              onClick={() => copyToClipboard(shortUrl, "short link")}
+            >
+              <Clipboard />
+            </button>
+          </div>
+
+          <p className="mt-4">View analytics and manage your short link at:</p>
+          <div className="flex justify-center w-full max-w-xl">
+            <input
+              type="text"
+              value={manageUrl}
+              readOnly
+              className="bg-white w-full max-w-md border border-stone-400 rounded-l text-center pl-20 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+            <button
+              type="submit"
+              className="flex justify-center w-16 bg-blue-500 text-white px-4 py-2 rounded-r hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              onClick={() => copyToClipboard(manageUrl, "manage link")}
+            >
+              <Clipboard />
+            </button>
+          </div>
+
+        </div>
+      )}
+    </div>
+  );
+}