Add inputs

components/ParamField.tsx

@@ -0,0 +1,31 @@
+import { FC } from "react";
+
+const ParamField: FC<{
+  inputKey: string;
+  inputValue: string;
+}> = ({ inputKey, inputValue }) => {
+  return (
+    <>
+      <div className="col-span-1">
+        <input
+          type="text"
+          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          placeholder="Field name"
+          value={inputKey}
+          disabled={true}
+        />
+      </div>
+      <div className="col-span-2">
+        <input
+          type="text"
+          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          placeholder="Field value"
+          value={inputValue}
+          required
+        />
+      </div>
+    </>
+  );
+};
+
+export default ParamField;

components/ParamsFields.tsx

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from "react";
+
+const ParamsFields: FC<{
+  children: ReactNode;
+}> = ({ children }) => {
+  return (
+    <form>
+      <div className="grid gap-x-2 gap-y-4 grid-cols-3">{children}</div>
+    </form>
+  );
+};
+
+export default ParamsFields;

components/QueryParam.tsx

@@ -0,0 +1,4 @@
+export type QueryParam = {
+  key: string;
+  value: string;
+};

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

pages/index.tsx

@@ -1,16 +1,21 @@
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import { QueryParam } from "../components/QueryParam";
+import ParamsFields from "../components/ParamsFields";
+import ParamField from "../components/ParamField";
 
 export default function Home() {
-  const [params, setParams] = useState<string[]>(["a", "b"]);
+  const [params, setParams] = useState<QueryParam[]>([]);
   const router = useRouter();
 
   useEffect(() => {
     if (router.query) {
-      setParams(
-        Object.keys(router.query).map((key) => router.query[key] as string),
-      );
+      const newParams: QueryParam[] = [];
+      for (const key in router.query) {
+        newParams.push({ key, value: router.query[key] as string });
+      }
+      setParams(newParams);
     }
   }, [router.query]);
 
@@ -23,11 +28,16 @@ export default function Home() {
 
       <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>
-        ))}
+
+        <ParamsFields>
+          {params.map((param, index) => (
+            <ParamField
+              key={index}
+              inputKey={param.key}
+              inputValue={param.value}
+            />
+          ))}
+        </ParamsFields>
       </main>
     </>
   );