Chap06 -> Reducing boilerplate code with React Hook Form -> Implementing the ask form

QandA/frontend/src/AskPage.tsx

@@ -1,6 +1,52 @@
 import React from 'react';
-import { Page } from './Page';
+import { useForm } from 'react-hook-form';
 
-export const AskPage = () => <Page title="Ask a question">{null}</Page>;
+import { Page } from './Page';
+import {
+  FieldInput,
+  FieldLabel,
+  Fieldset,
+  FieldContainer,
+  FieldTextArea,
+  FormButtonContainer,
+  PrimaryButton,
+} from './Styles';
+
+type FormData = {
+  title: string;
+  content: string;
+};
+
+export const AskPage = () => {
+  const { register } = useForm<FormData>();
+  return (
+    <Page title="Ask a question">
+      <form>
+        <Fieldset>
+          <FieldContainer>
+            <FieldLabel htmlFor="title">Title</FieldLabel>
+            <FieldInput
+              {...register('title')}
+              id="title"
+              name="title"
+              type="text"
+            />
+          </FieldContainer>
+          <FieldContainer>
+            <FieldLabel htmlFor="content">Content</FieldLabel>
+            <FieldTextArea
+              {...register('content')}
+              id="content"
+              name="content"
+            />
+          </FieldContainer>
+          <FormButtonContainer>
+            <PrimaryButton type="submit">Submit Your Question</PrimaryButton>
+          </FormButtonContainer>
+        </Fieldset>
+      </form>
+    </Page>
+  );
+};
 
 export default AskPage;