Add QR code

frontend/app/page.js

@@ -1,11 +1,9 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import axios from "axios";
-import dotenv from "dotenv";
 import { MdContentCopy } from "react-icons/md";
-
+import QRCode from "react-qr-code";
-dotenv.config({ path: "./.env.local" });
 
 export default function Home() {
   const [longUrl, setLongUrl] = useState("");
@@ -13,12 +11,6 @@ export default function Home() {
   const [copied, setCopied] = useState(false);
   const [prevLongUrl, setPrevLongUrl] = useState("");
 
-  useEffect(() => {
-    if (prevLongUrl !== longUrl) {
-      setShortUrl("");
-    }
-  }, [longUrl, prevLongUrl]);
-
   const handleSubmit = async (e) => {
     e.preventDefault();
 
@@ -26,15 +18,13 @@ export default function Home() {
       return;
     }
 
-    // Use the frontend domain as the base URL
     const baseURL = window.location.origin;
-
     try {
       const response = await axios.post(
         `${process.env.NEXT_PUBLIC_BACKEND_URL}/reduce/shorten`,
         {
           long_url: longUrl,
-          base_url: baseURL, // Include the frontend domain in the request body
+          base_url: baseURL,
         },
       );
 
@@ -46,21 +36,34 @@ export default function Home() {
   };
 
   const handleCopy = () => {
-    navigator.clipboard
+    navigator.clipboard.writeText(shortUrl);
-      .writeText(shortUrl)
-      .then(() => {
     setCopied(true);
-        setTimeout(() => setCopied(false), 2000); // Reset copy state after 2 seconds
+    setTimeout(() => setCopied(false), 2000);
-      })
-      .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">
+      <style jsx global>{`
-        <h1 className="text-3xl font-bold mb-6 text-center text-gray-800">
+        @keyframes gradientFlow {
+          0% {
+            background-position: 0% 50%;
+          }
+          50% {
+            background-position: 100% 50%;
+          }
+          100% {
+            background-position: 0% 50%;
+          }
+        }
+
+        .animated-gradient {
+          background-size: 200% 200%;
+          animation: gradientFlow 10s ease-in-out infinite;
+        }
+      `}</style>
+      <div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 animated-gradient">
+        <div className="bg-black bg-opacity-60 p-8 rounded-lg shadow-lg max-w-md w-full">
+          <h1 className="text-3xl font-bold mb-6 text-center text-white">
             Reduce
           </h1>
           <form onSubmit={handleSubmit} className="flex flex-col space-y-4">
@@ -69,7 +72,7 @@ export default function Home() {
               placeholder="Enter URL"
               value={longUrl}
               onChange={(e) => setLongUrl(e.target.value)}
-            className="border border-gray-300 rounded-lg p-3 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="border border-gray-300 bg-inherit rounded-lg p-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
             />
             <button
               type="submit"
@@ -81,26 +84,28 @@ export default function Home() {
           {shortUrl && (
             <div className="mt-4 text-center text-gray-800">
               <div className="flex items-center justify-center space-x-2">
-              <a
+                <span className="text-blue-400 text-xl underline">
-                href={shortUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-500 text-lg underline"
-              >
                   {shortUrl}
-              </a>
+                </span>
                 <button
                   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"}`}
+                  className={`flex items-center justify-center p-2 rounded-lg transition duration-200 ${
+                    copied
+                      ? "text-slate-400"
+                      : "text-blue-400 hover:text-blue-600"
+                  }`}
                   aria-label="Copy to clipboard"
                 >
-                <MdContentCopy className="text-2xl" />{" "}
+                  <MdContentCopy className="text-xl" />
-                {/* Adjust the size here */}
                 </button>
               </div>
+              <div className="mt-4 flex justify-center">
+                <QRCode value={shortUrl} size={320} />
+              </div>
             </div>
           )}
         </div>
       </div>
+    </>
   );
 }

frontend/package.json

@@ -14,7 +14,8 @@
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.2.1"
+    "react-icons": "^5.2.1",
+    "react-qr-code": "^2.0.15"
   },
   "devDependencies": {
     "postcss": "^8",