JWT Decoder added and layout issue fixed

package.json

@@ -17,6 +17,7 @@
     "classnames": "^2.5.1",
     "framer-motion": "^10.8.3",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.544.0",
     "prettier": "^3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/DevAreaTools/JwtDecoder.jsx

@@ -0,0 +1,173 @@
+import React, { useState } from "react";
+
+export function base64UrlToBase64(base64url) {
+  if (typeof base64url !== "string") throw new Error("Invalid input for base64UrlToBase64");
+  let base64 = base64url.replace(/-/g, "+").replace(/_/g, "/");
+  const pad = base64.length % 4;
+  if (pad === 2) base64 += "==";
+  else if (pad === 3) base64 += "=";
+  else if (pad === 1) throw new Error("Invalid base64url string");
+  return base64;
+}
+
+export function decodeBase64UrlJson(input) {
+  const b64 = base64UrlToBase64(input);
+  try {
+    const decoded = atob(b64);
+    try {
+      const percentDecoded = decodeURIComponent(
+        decoded
+          .split("")
+          .map((c) => {
+            const code = c.charCodeAt(0).toString(16).padStart(2, "0");
+            return `%${code}`;
+          })
+          .join("")
+      );
+      return JSON.parse(percentDecoded);
+    } catch (e) {
+      return JSON.parse(decoded);
+    }
+  } catch (err) {
+    throw new Error("Failed to decode base64url JSON: " + (err && err.message));
+  }
+}
+
+export function parseJWT(token) {
+  if (typeof token !== "string") throw new Error("Token must be a string");
+  const parts = token.trim().split(".");
+  return {
+    parts,
+    header: parts[0] ? decodeBase64UrlJson(parts[0]) : null,
+    payload: parts[1] ? decodeBase64UrlJson(parts[1]) : null,
+    signature: parts[2] || null,
+  };
+}
+
+export default function JWTDecoder() {
+  const [token, setToken] = useState("");
+  const [header, setHeader] = useState(null);
+  const [payload, setPayload] = useState(null);
+  const [signature, setSignature] = useState(null);
+  const [error, setError] = useState(null);
+
+  const handleDecode = () => {
+    setError(null);
+    setHeader(null);
+    setPayload(null);
+    setSignature(null);
+    if (!token.trim()) {
+      setError("Please paste a JWT token.");
+      return;
+    }
+    try {
+      const parsed = parseJWT(token);
+      if (!parsed.parts || parsed.parts.length < 2) {
+        setError("Token does not have the expected parts (header.payload[.signature]).");
+        return;
+      }
+      setHeader(parsed.header);
+      setPayload(parsed.payload);
+      setSignature(parsed.signature);
+    } catch (e) {
+      setError(e.message || String(e));
+    }
+  };
+
+  const handleClear = () => {
+    setToken("");
+    setHeader(null);
+    setPayload(null);
+    setSignature(null);
+    setError(null);
+  };
+
+  const copyPayload = async () => {
+    if (!payload) return;
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(payload, null, 2));
+    } catch {}
+  };
+
+  return (
+    <div className="min-h-screen  text-white p-8 font-sans">
+      <h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-400 drop-shadow-[0_0_10px_rgba(147,51,234,0.6)]">
+        🔐 JWT Decoder
+      </h2>
+
+      <div className="max-w-3xl mx-auto bg-[#111827]/70 border border-[#1e293b] rounded-2xl p-6 backdrop-blur-sm shadow-[0_0_20px_rgba(56,189,248,0.15)]">
+        <p className="text-sm text-slate-400 mb-4 text-center">
+          Paste your <span className="text-cyan-400 font-medium">JWT</span> below and decode it safely on the client-side.
+        </p>
+
+        <textarea
+          aria-label="JWT token"
+          value={token}
+          onChange={(e) => setToken(e.target.value)}
+          placeholder="Paste JWT here (header.payload.signature)"
+          className="w-full min-h-[100px] p-3 rounded-xl bg-[#0f172a] border border-slate-700 focus:border-cyan-500 text-sm mb-4 outline-none text-slate-200"
+        />
+
+        <div className="flex gap-3 justify-center mb-5">
+          <button
+            onClick={handleDecode}
+            className="px-5 py-2 rounded-lg bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-400 hover:to-purple-400 shadow-[0_0_12px_rgba(147,51,234,0.4)] transition-all"
+          >
+            Decode
+          </button>
+          <button
+            onClick={handleClear}
+            className="px-5 py-2 rounded-lg border border-slate-600 hover:border-cyan-400 transition-all"
+          >
+            Clear
+          </button>
+          <button
+            onClick={copyPayload}
+            disabled={!payload}
+            className={`px-5 py-2 rounded-lg border ${
+              payload
+                ? "border-slate-600 hover:border-purple-400"
+                : "border-slate-700 opacity-40 cursor-not-allowed"
+            } transition-all`}
+            title="Copy payload JSON"
+          >
+            Copy Payload
+          </button>
+        </div>
+
+        {error && (
+          <div className="mb-5 p-3 rounded-md bg-red-900/30 border border-red-500/30 text-red-300 text-sm">
+            {error}
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="col-span-1">
+            <h3 className="font-semibold text-cyan-400">Header</h3>
+            <pre className="mt-2 p-3 rounded-md bg-[#0f172a] border border-slate-700 h-44 overflow-auto text-xs text-slate-300">
+              {header ? JSON.stringify(header, null, 2) : "No header decoded"}
+            </pre>
+          </div>
+
+          <div className="col-span-1 md:col-span-2">
+            <h3 className="font-semibold text-purple-400">Payload</h3>
+            <pre className="mt-2 p-3 rounded-md bg-[#0f172a] border border-slate-700 h-44 overflow-auto text-xs text-slate-300">
+              {payload ? JSON.stringify(payload, null, 2) : "No payload decoded"}
+            </pre>
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <h3 className="font-semibold text-cyan-400">Signature</h3>
+          <div className="mt-2 p-3 rounded-md bg-[#0f172a] border border-slate-700 text-xs text-slate-400 break-all">
+            {signature || "No signature present"}
+          </div>
+        </div>
+      </div>
+
+      <p className="mt-6 text-center text-xs text-slate-500">
+        ⚠️ This tool only decodes client-side. Never paste production tokens.
+      </p>
+    </div>
+  );
+}

src/components/Layout/Layout.jsx

@@ -16,7 +16,9 @@ const Layout = ({ stars, children }) => {
                     notice={"Under Construction"}
                 />
                 <div className='relative'>
-                    {children}
+                    <div className="container mx-auto p-4 min-h-screen">
+                        {children}
+                    </div>
                 </div>
                 <Footer />
             </ThemeProvider>

src/pages/DevArea/DevTools.jsx

@@ -2,13 +2,15 @@ import { useParams } from "react-router-dom";
 import Layout from "../../components/Layout/Layout";
 import MarkDownEditor from "../../components/DevAreaTools/MarkDownEditor";
 import JSONFormatter from "../../components/DevAreaTools/JSONFormatter";
+import JWTDecoder from "../../components/DevAreaTools/JwtDecoder";
 
 const DevTools = () => {
     const { tool } = useParams();
 
     const tools = {
         markdown: <MarkDownEditor />,
-        "json-formatter": <JSONFormatter />
+        jwtdecoder: <JWTDecoder />,
+        "json-formatter": <JSONFormatter />,
     }
 
 

src/pages/DevArea/index.jsx

@@ -22,8 +22,8 @@ const DevArea = () => {
         },
         {
             name: "JWT Decoder",
-            link: "/devarea/jwt",
-            isAvailable: false
+            link: "/devarea/jwtdecoder",
+            isAvailable: true
         },
         {
             name: "URL Encoder/Decoder",

yarn.lock

@@ -1845,6 +1845,11 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+lucide-react@^0.544.0:
+  version "0.544.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.544.0.tgz#4719953c10fd53a64dd8343bb0ed16ec79f3eeef"
+  integrity sha512-t5tS44bqd825zAW45UQxpG2CvcC4urOwn2TrwSH8u+MjeE+1NnWl6QqeQ/6NdjMqdOygyiT9p3Ev0p1NJykxjw==
+
 magic-string@^0.27.0:
   version "0.27.0"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.27.0.tgz#e4a3413b4bab6d98d2becffd48b4a257effdbbf3"