Display params

hoto · May 16, 2024 · 5f1e68e · 5f1e68e
1 parent 5f923a5
commit 5f1e68e
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -2,4 +2,10 @@ JWT Forge
 
 Create unsigned JWTs easy.
 
-https://hoto.github.io/jwt-forge/
+https://hoto.github.io/jwt-forge/
+
+
+### Development
+
+    npm run dev
+    http://localhost:3000/?a=a1&b=b2&c=c3
diff --git a/pages/index.js b/pages/index.js
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -0,0 +1,34 @@
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+export default function Home() {
+  const [params, setParams] = useState<string[]>(["a", "b"]);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (router.query) {
+      setParams(
+        Object.keys(router.query).map((key) => router.query[key] as string),
+      );
+    }
+  }, [router.query]);
+
+  return (
+    <>
+      <Head>
+        <title>JWT Forge</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className="container mx-auto px-4 py-8 grid justify-items-center">
+        <h1 className="text-3xl font-bold mb-10 ">JWT Forge</h1>
+        {params.map((param, index) => (
+          <div key={index}>
+            param {index}: {param}
+          </div>
+        ))}
+      </main>
+    </>
+  );
+}