started adding to the output form

src/features/output/components/ChannelFields.tsx

@@ -0,0 +1,67 @@
+import { Field } from "formik";
+
+type ChannelFieldsProps = {
+  format: string;
+};
+
+const ChannelFields = ({ format }: ChannelFieldsProps) => {
+  return (
+    <div className="flex flex-col gap-4 p-4">
+      <div className="flex flex-row justify-between">
+        <label htmlFor="backoffice" className="block mb-2 font-medium">
+          Back Office URL
+        </label>
+        <Field
+          name={"backOfficeURL"}
+          type="text"
+          id="backoffice"
+          placeholder="https://www.backoffice.com"
+          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
+        />
+      </div>
+      <div className="flex flex-row justify-between">
+        <label htmlFor="username" className="block mb-2 font-medium">
+          Username
+        </label>
+        <Field
+          name={"username"}
+          type="text"
+          id="username"
+          placeholder="Back office username"
+          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
+        />
+      </div>
+      <div className="flex flex-row justify-between">
+        <label htmlFor="password">Password</label>
+        <Field
+          name={"password"}
+          type={"password"}
+          id="password"
+          placeholder="Back office password"
+          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
+        />
+      </div>
+      <div className="flex flex-row justify-between">
+        <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
+        <Field
+          name={"readTimeoutSeconds"}
+          type="number"
+          id="readTimeoutSeconds"
+          placeholder="https://example.com"
+          className={`p-1.5 border border-gray-400  rounded-lg w-full md:w-60`}
+        />
+      </div>
+      <div className="flex flex-row justify-between">
+        <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
+        <Field
+          name={"connectTimeoutSeconds"}
+          type="number"
+          id="connectTimeoutSeconds"
+          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ChannelFields;