started adding to the output form

src/features/output/components/BearerTypeCard.tsx

@@ -0,0 +1,14 @@
+import Card from "../../../ui/Card";
+import CardHeader from "../../../ui/CardHeader";
+import BearerTypeFields from "./BearerTypeFields";
+
+const BearerTypeCard = () => {
+  return (
+    <Card className="p-4">
+      <CardHeader title={"Bearer Type"} />
+      <BearerTypeFields />
+    </Card>
+  );
+};
+
+export default BearerTypeCard;

src/features/output/components/BearerTypeFields.tsx

@@ -0,0 +1,30 @@
+import { Field } from "formik";
+
+const BearerTypeFields = () => {
+  return (
+    <>
+      <label htmlFor="format">Format</label>
+      <Field
+        as="select"
+        name="format"
+        id="format"
+        className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+      >
+        <option key={"JSON"} value={"JSON"}>
+          JSON
+        </option>
+        <option key={"BOF2"} value={"BOF2"}>
+          BOF2
+        </option>
+        <option key={"UTMC"} value={"UTMC"}>
+          UTMC
+        </option>
+        <option key={"FTP"} value={"FTP"}>
+          FTP
+        </option>
+      </Field>
+    </>
+  );
+};
+
+export default BearerTypeFields;

src/features/output/components/ChannelCard.tsx

@@ -0,0 +1,17 @@
+import { useFormikContext } from "formik";
+import Card from "../../../ui/Card";
+import CardHeader from "../../../ui/CardHeader";
+import ChannelFields from "./ChannelFields";
+
+const ChannelCard = () => {
+  const { values } = useFormikContext();
+  console.log(values);
+  return (
+    <Card>
+      <CardHeader title={`Channel (${values?.format})`} />
+      <ChannelFields format={values?.format} />
+    </Card>
+  );
+};
+
+export default ChannelCard;

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;

src/features/output/components/Output.tsx

@@ -0,0 +1,32 @@
+import { Formik, Form } from "formik";
+import BearerTypeCard from "./BearerTypeCard";
+import ChannelCard from "./ChannelCard";
+
+const Output = () => {
+  const handleSubmit = (values) => {
+    console.log(values);
+  };
+
+  const inititalValues = {
+    format: "JSON",
+    enabled: true,
+    backOfficeURL: "",
+    username: "",
+    password: "",
+    connectTimeoutSeconds: Number(5),
+    readTimeoutSeconds: Number(15),
+    overviewQuality: "HIGH",
+    cropSizeFactor: "3/4",
+  };
+
+  return (
+    <Formik initialValues={inititalValues} onSubmit={handleSubmit}>
+      <Form>
+        <BearerTypeCard />
+        <ChannelCard />
+      </Form>
+    </Formik>
+  );
+};
+
+export default Output;

src/routes/output.tsx

@@ -1,9 +1,14 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
+import Output from "../features/output/components/Output";
 
-export const Route = createFileRoute('/output')({
+export const Route = createFileRoute("/output")({
   component: RouteComponent,
-})
+});
 
 function RouteComponent() {
-  return <div>Hello "/output"!</div>
+  return (
+    <div>
+      <Output />
+    </div>
+  );
 }