added slate editor, fixes

app/client/pages/new/book.tsx

@@ -1,4 +1,4 @@
-import { Heading, Input, Stack } from '@chakra-ui/react';
+import { Heading, Input, Stack, Textarea } from '@chakra-ui/react';
 import { Button } from '@client/components/ui/button';
 import { Field } from '@client/components/ui/field';
 import { valibotResolver } from '@hookform/resolvers/valibot';
@@ -15,13 +15,51 @@ export const Route = createFileRoute('/new/book')({
 
 function RouteComponent() {
   return (
-    <Stack flexDirection={'column'} justifyContent={'center'} alignItems={'center'}>
+    <Stack width="100%" flexDirection={'column'} justifyContent={'center'} alignItems={'center'}>
       <Heading>New book</Heading>
-      <form></form>
+      <NewBookForm />
     </Stack>
   );
 }
 
+interface FormValues {
+  title: string;
+  description: string;
+}
+
+function NewBookForm() {
+  const schema = v.pipe(
+    v.object({
+      title: v.pipe(v.string(), v.nonEmpty('Title is required')),
+      description: v.pipe(v.string(), v.nonEmpty('Password is required'))
+    })
+  );
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<FormValues>({ resolver: valibotResolver(schema) });
+
+  return (
+    <form style={{ width: '80%' }} onSubmit={handleSubmit(async values => {})}>
+      <Stack>
+        <Field label="Title" invalid={errors.title != null} errorText={errors.title?.message}>
+          <Input {...register('title')} />
+        </Field>
+        <Field
+          label="Description"
+          invalid={errors.description != null}
+          errorText={errors.description?.message}
+        >
+          <Textarea width="100%" lineHeight={4} {...register('description')} />
+        </Field>
+        <Button type="submit">Create new book</Button>
+      </Stack>
+    </form>
+  );
+}
+
 // function LoginForm() {
 //   const schema = v.pipe(
 //     v.object({
@@ -40,13 +78,6 @@ function RouteComponent() {
 //
 //   return (
 //     <form
-//       onSubmit={handleSubmit(async values => {
-//         const session = await login({
-//           email: values.email,
-//           password: values.password
-//         });
-//         if (session != null) window.history.back();
-//       })}
 //     >
 //       <Stack>
 //         <Field label="Email" invalid={errors.email != null} errorText={errors.email?.message}>