done agents page

frontend/src/app/agents/add/page.jsx

@@ -1,12 +1,19 @@
-import React from "react";
+"use client";
+import React, { useState } from "react";
 import TextField from "@/app/components/fields/textfield";
-// import Prompts from "@/app/components/prompts/Prompts";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import TopToolTip from "@/app/components/topToolTip/TopToolTip";
 import globalStyle from "../../globalStyle.module.css";
 import createAgentStyle from "./styles.module.css";
+import Prompts from "@/app/components/prompts/Prompts";
+
+const Page = () => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleCheckboxChange = (e) => {
+    setIsChecked(e.target.checked);
+  };
 
-const page = () => {
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
@@ -17,20 +24,76 @@ const page = () => {
             topbarTitle="Create New Agent"
             state="add"
           />
-          {/* Create Crediantial Container */}
+          {/* Create agent Container */}
           <div className={createAgentStyle.createAgentContainer}>
             <TopToolTip />
-            <div className={createAgentStyle.inputContainer}>
+            <div className={createAgentStyle.inputMainContainer}>
               {/* Header */}
-              <div></div>
+              <div className={createAgentStyle.headerContainer}>
+                <div className={createAgentStyle.headerTxt}>
+                  <p>Agent Details</p>
+                </div>
+              </div>
               {/* Agent name input */}
-              <div></div>
+              <div className={createAgentStyle.inputContainer}>
+                {/* Label */}
+                <div className={createAgentStyle.labelContainer}>
+                  <p>Agent Name</p>
+                  {/* <p className={createAgentStyle.required}>*</p> */}
+                </div>
+                {/* Input Field */}
+                <TextField placeHolder="Enter agent name" />
+                <Prompts show={false} />
+              </div>
               {/* Kubernetes API input */}
-              <div></div>
+              <div className={createAgentStyle.inputContainer}>
+                {/* Label */}
+                <div className={createAgentStyle.labelContainer}>
+                  <p>Kubernetes API Proxy Name</p>
+                  {/* <p className={createAgentStyle.required}>*</p> */}
+                </div>
+                {/* Input Field */}
+                <TextField placeHolder="Enter proxy name" />
+                <Prompts show={false} />
+              </div>
               {/* Checkbox */}
-              <div></div>
+              <div className={createAgentStyle.checkboxMainContainer}>
+                <div className={createAgentStyle.checkboxContainer}>
+                  <div className={createAgentStyle.checkbox}>
+                    {/* Checkbox */}
+                    <div className={createAgentStyle.check}>
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        onChange={handleCheckboxChange}
+                        className={createAgentStyle.hiddenCheckbox}
+                      />
+                    </div>
+                    {/* List */}
+                    <div className={createAgentStyle.list}>
+                      <p className={createAgentStyle.placeholderTxt}>
+                        Use Tailscale VPN
+                      </p>
+                      <p className={createAgentStyle.secondaryTxt}>
+                        Enable Tailscale for secure private networking. When
+                        enabled, <br /> the endpoint will be automatically
+                        resolved from Tailscale.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
               {/* Agent endpoint */}
-              <div></div>
+              <div className={createAgentStyle.inputContainer}>
+                {/* Label */}
+                <div className={createAgentStyle.labelContainer}>
+                  <p>Agent Endpoint</p>
+                  {/* <p className={createAgentStyle.required}>*</p> */}
+                </div>
+                {/* Input Field */}
+                <TextField placeHolder="e.g., http://agent-01.example.com:8080" />
+                <Prompts show={false} />
+              </div>
             </div>
           </div>
         </div>
@@ -39,4 +102,4 @@ const page = () => {
   );
 };
 
-export default page;
+export default Page;