Adding dynamic input system, and some minor improvements in types.ts, registry.ts and test.ts

src/app/(calculators)/calculate/[section]/[id]/page.tsx

@@ -1,12 +1,29 @@
+import InputComponent from "@/app/utils/Input";
 import Input from "@/app/utils/Input";
-
+import { CalculatorRegistry } from "@/app/utils/calculators/registry";
 export default async function Calculator({params} : {params:Promise<{section:string, id:string}>}){
     const calcData : {section:string, id:string} = await params;
-    return(
+    const calculator = CalculatorRegistry[calcData.section].calculators.find(e => e.id === calcData.id);
+    console.log(calculator);
+    return calculator ? (
         <>
-            <h1>Section:- {calcData.section}</h1>
-            <h1>Calculator ID:- {calcData.id}</h1>
-            <Input/>
+            <div className="mb-6 mt-10">
+                <h1 className="text-2xl font-semibold">
+                    {calculator?.name}
+                </h1>
+
+                <p className="text-gray-500 mt-1 max-w-xl">
+                    {calculator?.desc}
+                </p>
+                <h1 className="text-1xl font-semibold">
+                    Unit of the value:- {calculator?.unit}
+                </h1>
+            </div>
+            {calculator.inputs.map(e => {
+                return(
+                    <InputComponent {...e}/>
+                );
+            })}
         </>
-    )
+    ) : null;
 }

src/app/(calculators)/layout.tsx

@@ -1,5 +1,5 @@
 import LayoutClient from "./layoutClient";
-
+import { Roboto } from "next/font/google";
 export default function CalculatorsLayout({children} : {children:React.ReactNode}){
     return(
         <>

src/app/(calculators)/layoutClient.tsx

@@ -2,11 +2,12 @@
 import { useState } from "react";
 import Sidemenu from "../utils/Sidemenu";
 import Navbar from "../utils/Navbar";
-
+import { Roboto } from "next/font/google";
+const font = Roboto({});
 export default function LayoutClient({children} : {children:React.ReactNode}){
     const [navbar, setNavbar] = useState<boolean>(false);
     return(
-        <div className="grid grid-cols-[300px_1fr] grid-rows-[60px_1fr_40px] overflow-hidden calculators-container">
+        <div className={`grid grid-cols-[300px_1fr] grid-rows-[60px_1fr_40px] overflow-hidden calculators-container ${font.className}`}>
             <Navbar navbarToggle={setNavbar}/>
             <Sidemenu isNavOpen={navbar}/>
             <div className="content">