Change the branding and add a copy button

frontend/app/page.js

@@ -3,12 +3,14 @@
 import { useState } from "react";
 import axios from "axios";
 import dotenv from "dotenv";
+import { MdContentCopy } from "react-icons/md";
 
 dotenv.config({ path: "./.env.local" });
 
 export default function Home() {
   const [longUrl, setLongUrl] = useState("");
   const [shortUrl, setShortUrl] = useState("");
+  const [copied, setCopied] = useState(false);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -31,11 +33,23 @@ export default function Home() {
     }
   };
 
+  const handleCopy = () => {
+    navigator.clipboard
+      .writeText(shortUrl)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000); // Reset copy state after 2 seconds
+      })
+      .catch((error) => {
+        console.error("Failed to copy URL:", error);
+      });
+  };
+
   return (
     <div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
       <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
         <h1 className="text-3xl font-bold mb-6 text-center text-gray-800">
-          URL Shortener
+          Reduce
         </h1>
         <form onSubmit={handleSubmit} className="flex flex-col space-y-4">
           <input
@@ -49,21 +63,25 @@ export default function Home() {
             type="submit"
             className="bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition duration-200"
           >
-            Shorten
+            Reduce
           </button>
         </form>
         {shortUrl && (
-          <p className="mt-4 text-center text-gray-800">
+          <div className="mt-4 text-center text-gray-800">
-            Short URL:{" "}
+            <div className="flex items-center justify-center space-x-2">
-            <a
+              <span className="text-blue-500 text-xl underline">
-              href={shortUrl}
+                {shortUrl}
-              className="text-blue-500 underline hover:text-blue-600"
+              </span>
-              target="_blank"
+              <button
-              rel="noopener noreferrer"
+                onClick={handleCopy}
-            >
+                className={`flex items-center justify-center p-2 rounded-lg transition duration-200 ${copied ? "text-gray-400" : "text-blue-500 hover:text-blue-600"}`}
-              {shortUrl}
+                aria-label="Copy to clipboard"
-            </a>
+              >
-          </p>
+                <MdContentCopy className="text-xl" />{" "}
+                {/* Adjust the size here */}
+              </button>
+            </div>
+          </div>
         )}
       </div>
     </div>

frontend/package.json

@@ -13,7 +13,8 @@
     "dotenv": "^16.4.5",
     "next": "14.2.5",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-icons": "^5.2.1"
   },
   "devDependencies": {
     "postcss": "^8",