added NPED form and sonner toast

src/components/SettingForms/NPED/NPEDFields.tsx

@@ -0,0 +1,60 @@
+import { Form, Formik, Field } from "formik";
+import FormGroup from "../components/FormGroup";
+import type { NPEDFieldType } from "../../../types/types";
+
+const NPEDFields = () => {
+  const initialValues = {
+    username: "",
+    password: "",
+    clientId: "",
+  };
+
+  const handleSubmit = (values: NPEDFieldType) => {
+    alert(JSON.stringify(values));
+  };
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      <Form className="flex flex-col space-y-2">
+        <FormGroup>
+          <label htmlFor="username">Username</label>
+          <Field
+            name="username"
+            type="text"
+            id="username"
+            placeholder="NPED username"
+            className="p-1.5 border border-gray-400 rounded-lg"
+          />
+        </FormGroup>
+        <FormGroup>
+          <label htmlFor="password">Password</label>
+          <Field
+            name="password"
+            type="password"
+            id="password"
+            placeholder="NPED Password"
+            className="p-1.5 border border-gray-400 rounded-lg"
+          />
+        </FormGroup>
+        <FormGroup>
+          <label htmlFor="clientId">Client ID</label>
+          <Field
+            name="clientId"
+            type="text"
+            id="clientId"
+            placeholder="NPED client ID"
+            className="p-1.5 border border-gray-400 rounded-lg"
+          />
+        </FormGroup>
+        <button
+          type="submit"
+          className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+        >
+          Login
+        </button>
+      </Form>
+    </Formik>
+  );
+};
+
+export default NPEDFields;