More layout

src/services/ui/src/components/Inputs/input.tsx

@@ -15,6 +15,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           className
         )}
         ref={ref}
+        id={props.name}
         {...props}
       />
     );

src/services/ui/src/pages/form/medicaid-form.tsx

@@ -1,11 +1,16 @@
 import { SubmitHandler, useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
+import * as I from "@/components/Inputs";
+import { SimplePageContainer } from "@/components";
+import { PropsWithChildren } from "react";
+import { Link } from "react-router-dom";
 
 const formSchema = z.object({
   id: z.string(),
   additionalInformation: z.string(),
-  attachments: z.object({}),
+  //  : z.object({}),
+  // proposedEffectiveDate: z.date(),
 });
 
 export type MedicaidFormSchema = z.infer<typeof formSchema>;
@@ -19,9 +24,67 @@ export const MedicaidForm = () => {
     console.log(data, formState.errors);
   };
 
+  console.log(formState.errors);
+
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register("id")} />
-    </form>
+    <SimplePageContainer>
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="mx-auto mt-8 max-w-3xl flex flex-col gap-8"
+      >
+        <section>
+          <h1 className="bold text-2xl mb-2">Medicaid SPA Details</h1>
+          <p>
+            Once you submit this form, a confirmation email is sent to you and
+            to CMS. CMS will use this content to review your package, and you
+            will not be able to edit this form. If CMS needs any additional
+            information, they will follow up by email.{" "}
+            <strong className="bold">
+              If you leave this page, you will lose your progress on this form.
+            </strong>
+          </p>
+        </section>
+
+        <section>
+          <div className="flex justify-between">
+            <I.Label htmlFor="id">SPA ID</I.Label>
+            <Link to="/faq" className="hover:underline text-blue-600">
+              What is my SPA ID?
+            </Link>
+          </div>
+          <HelpText>
+            Must follow the format SS-YY-NNNN or SS-YY-NNNN-xxxx.
+          </HelpText>
+          <HintText>
+            Reminder - CMS recommends that all SPA numbers start with the year
+            in which the package is submitted.
+          </HintText>
+          <I.Input {...register("id")} className="max-w-sm" />
+        </section>
+
+        <section>
+          <I.Label htmlFor="additionalInformation">
+            Additional Information
+          </I.Label>
+          <I.Textarea
+            id="additionalInformation"
+            {...register("additionalInformation")}
+            className="max-w-sm"
+          />
+        </section>
+
+        <div className="flex gap-2">
+          <I.Button type="submit">Submit</I.Button>
+          <I.Button type="submit" variant="outline">
+            Cancel
+          </I.Button>
+        </div>
+      </form>
+    </SimplePageContainer>
   );
 };
+
+const HelpText = ({ children }: PropsWithChildren) => <p>{children}</p>;
+const HintText = ({ children }: PropsWithChildren) => (
+  <p className="italic">{children}</p>
+);

src/services/ui/src/router.tsx

@@ -6,6 +6,7 @@ import "@/api/amplifyConfig";
 import * as C from "@/components";
 import { QueryClient } from "@tanstack/react-query";
 import { ROUTES } from "@/routes";
+import { MedicaidForm } from "./pages/form/medicaid-form";
 export const queryClient = new QueryClient();
 
 export const router = createBrowserRouter([
@@ -66,6 +67,7 @@ export const router = createBrowserRouter([
         element: <P.CHIPEligibilityLandingPage />,
       },
       { path: ROUTES.CREATE, element: <P.Create /> },
+      { path: "/test-route", element: <MedicaidForm /> },
       // TODO: Remove "/form" and ExampleForm if there's no usage; the Create page
       //  is our current SEATool integration test form.
       { path: "/form", element: <P.ExampleForm /> },