Toggle Button for Light/Dark added

.gitignore

@@ -0,0 +1,22 @@
+# Node modules
+node_modules
+
+# Next.js build artifacts
+.next/
+out/
+
+# Environment variables
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# IDE / Editor files
+.vscode/
+.idea/
+
+# macOS
+.DS_Store
+
+# Windows
+Thumbs.db

client/package.json

@@ -5,16 +5,16 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "start": "node .next/standalone/server.js",
     "lint": "next lint"
   },
   "dependencies": {
     "@vercel/analytics": "^1.2.2",
     "axios": "^1.6.8",
     "next": "^14.2.3",
     "next-themes": "^0.3.0",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "sharp": "^0.33.4"
   },

client/src/app/globals.css

@@ -16,9 +16,17 @@
   }
 }
 
-
 @layer utilities {
   .text-balance {
     text-wrap: balance;
   }
 }
+
+body {
+  @apply bg-white text-black;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.dark body {
+  @apply bg-gray-900 text-white;
+}

client/src/app/page.tsx

@@ -1,10 +1,11 @@
+// pages/index.js or pages/home.js
 "use client";
 import { CopyButtonIcon } from "@/icons/CopyButtonIcon";
 import Image from "next/image";
 import Link from "next/link";
 import { FormEvent, useState } from "react";
-import toast from "react-hot-toast";
-import { Toaster } from "react-hot-toast";
+import toast, { Toaster } from "react-hot-toast";
+import ThemeToggle from "@/components/ThemeToggle";
 
 export default function Home() {
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -18,7 +19,7 @@ export default function Home() {
     try {
       setIsSubmitting(true);
       setResponseUrl("");
-    
+
       const response = await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}/`, {
         method: "POST",
         headers: {
@@ -28,81 +29,84 @@ export default function Home() {
       });
 
       if (response.status == 429) {
-        toast.error('Too Many Requests. Please try again later.');
+        toast.error("Too Many Requests. Please try again later.");
       }
-
-      // Assuming response is JSON
+
       const responseData = await response.json();
-
       setResponseUrl(responseData);
     } catch (error) {
-      console.log("error :",error);  
+      console.log("error :", error);
     } finally {
       setIsSubmitting(false);
     }
   }
 
   return (
     <>
-    <Toaster position="top-center"/>
-    <main className="flex min-h-screen flex-col items-center justify-center space-y-4 max-w-6xl mx-auto bg-">
-      <Image src={"/http.png"} alt="http" height={"50"} width={"100"} />
-      <h3 className="font-semibold text-xl mb-2">Tired of big URLs ?</h3>
-      <h1 className="font-bold text-3xl sm:text-4xl">
-        Make Your <span className="text-blue-500">URL</span> Short
-      </h1>
-
-      <form onSubmit={onSubmit}>
-        <input
-          type="url"
-          name="originalUrl"
-          id=""
-          className="rounded-l-full py-2 px-4 w-[65vw] sm:w-80 border-2 focus:outline-none"
-          required
-          placeholder="Enter your long link here"
-        />
-        <button
-          type="submit"
-          className="bg-blue-500 text-white py-2 px-2 -translate-x-2 rounded-r-full border-2"
-          disabled={isSubmitting}
-        >
-          {isSubmitting ? "Shortening..." : "Shorten It!"}
-        </button>
-      </form>
+      <Toaster position="top-center" />
+      <div className="min-h-screen flex flex-col bg-white dark:bg-gray-900 text-black dark:text-white transition-colors duration-300 relative">
+        <div className="absolute top-4 right-4">
+          <ThemeToggle />
+        </div>
+        <main className="flex flex-col items-center justify-center flex-grow space-y-4 max-w-6xl mx-auto">
+          <Image src={"/http.png"} alt="http" height={"50"} width={"100"} />
+          <h3 className="font-semibold text-xl mb-2">Tired of big URLs?</h3>
+          <h1 className="font-bold text-3xl sm:text-4xl">
+            Make Your <span className="text-blue-500">URL</span> Short
+          </h1>
 
-      {responseUrl.length > 0 && (
-        <div className="mt-4">
-          <p className="flex justify-center font-semibold mb-3">
-            Shortened URL
-          </p>
-          <div className="flex justify-center text-white py-2 -translate-x-2 px-3 border bg-blue-400 border-blue-600 rounded-full">
-            <Link
-              href={responseUrl}
-              target="_blank"
-              className="white underline mr-4"
-            >
-              {responseUrl}
-            </Link>
+          <form onSubmit={onSubmit}>
+            <input
+              type="url"
+              name="originalUrl"
+              id=""
+              className="rounded-l-full py-2 px-4 w-[65vw] sm:w-80 border-2 focus:outline-none"
+              required
+              placeholder="Enter your long link here"
+            />
             <button
-              onClick={() => {
-                navigator.clipboard.writeText(responseUrl);
-                setMessage(true);
-                setTimeout(() => {
-                  setMessage(false);
-                }, 1000);
-              }}
+              type="submit"
+              className="bg-blue-500 text-white py-2 px-2 -translate-x-2 rounded-r-full border-2"
+              disabled={isSubmitting}
             >
-              <CopyButtonIcon />
+              {isSubmitting ? "Shortening..." : "Shorten It!"}
             </button>
-            {message && (
-              <div className="absolute left-56 top-12">
-                <div className="ml-2 px-1 text-white">Copied!</div>
+          </form>
+
+          {responseUrl.length > 0 && (
+            <div className="mt-4">
+              <p className="flex justify-center font-semibold mb-3">
+                Shortened URL
+              </p>
+              <div className="flex justify-center text-white py-2 -translate-x-2 px-3 border bg-blue-400 border-blue-600 rounded-full">
+                <Link
+                  href={responseUrl}
+                  target="_blank"
+                  className="white underline mr-4"
+                >
+                  {responseUrl}
+                </Link>
+                <button
+                  onClick={() => {
+                    navigator.clipboard.writeText(responseUrl);
+                    setMessage(true);
+                    setTimeout(() => {
+                      setMessage(false);
+                    }, 1000);
+                  }}
+                >
+                  <CopyButtonIcon />
+                </button>
+                {message && (
+                  <div className="absolute left-56 top-12">
+                    <div className="ml-2 px-1 text-white">Copied!</div>
+                  </div>
+                )}
               </div>
-            )}
-          </div>
-        </div>
-      )}
-    </main>
+            </div>
+          )}
+        </main>
+      </div>
     </>
   );
 }

client/src/components/ThemeToggle.js

@@ -0,0 +1,35 @@
+// components/ThemeToggle.js
+import { useEffect, useState } from "react";
+
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+    document.documentElement.classList.add(savedTheme);
+  }, []);
+
+  const toggleTheme = () => {
+    if (theme === "light") {
+      document.documentElement.classList.remove("light");
+      document.documentElement.classList.add("dark");
+      setTheme("dark");
+      localStorage.setItem("theme", "dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+      document.documentElement.classList.add("light");
+      setTheme("light");
+      localStorage.setItem("theme", "light");
+    }
+  };
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="p-2 bg-gray-200 dark:bg-gray-800 rounded"
+    >
+      {theme === "light" ? "🌞" : "🌜"}
+    </button>
+  );
+}