feat: create formlayout and create collection form

inertia/pages/app.tsx

@@ -0,0 +1,9 @@
+import { Link } from '@inertiajs/react';
+
+export default function AppPage() {
+  return (
+    <div>
+      <Link href="/collections/create">Add collection</Link>
+    </div>
+  );
+}

inertia/pages/collection/create.tsx

@@ -0,0 +1,61 @@
+import { useForm } from '@inertiajs/react';
+import { ChangeEvent, FormEvent, useMemo } from 'react';
+import FormField from '~/components/common/form/_form_field';
+import TextBox from '~/components/common/form/textbox';
+import FormLayout from '~/components/layouts/form_layout';
+import { Visibility } from '../../../app/enums/visibility';
+
+export default function CreateCollectionPage() {
+  const { data, setData, post, processing, errors } = useForm({
+    name: '',
+    description: '',
+    visibility: Visibility.PRIVATE,
+  });
+  const isFormDisabled = useMemo(
+    () => processing || data.name.length === 0,
+    [processing, data]
+  );
+
+  function handleOnCheck({ target }: ChangeEvent<HTMLInputElement>) {
+    setData(
+      'visibility',
+      target.checked ? Visibility.PUBLIC : Visibility.PRIVATE
+    );
+  }
+
+  function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    post('/collections');
+  }
+
+  return (
+    <FormLayout
+      title="Create a collection"
+      handleSubmit={handleSubmit}
+      canSubmit={!isFormDisabled}
+    >
+      <TextBox
+        label="Collection name"
+        placeholder="Collection name"
+        name="name"
+        onChange={setData}
+        value={data.name}
+        required
+        autoFocus
+      />
+      {errors.name && <div>{errors.name}</div>}
+      <TextBox
+        label="Collection description"
+        placeholder="Collection description"
+        name="description"
+        onChange={setData}
+        value={data.name}
+      />
+      {errors.description && <div>{errors.description}</div>}
+      <FormField>
+        <label htmlFor="visibility">Public</label>
+        <input type="checkbox" onChange={handleOnCheck} id="visibility" />
+      </FormField>
+    </FormLayout>
+  );
+}

inertia/pages/home.tsx

@@ -1,24 +1,7 @@
-import { InferPageProps } from '@adonisjs/inertia/types';
+import type { InferPageProps } from '@adonisjs/inertia/types';
 import ContentLayout from '~/components/layouts/content_layout';
-import useUser from '~/hooks/use_user';
 import type AppsController from '../../app/controllers/apps_controller';
 
 export default function Home(_: InferPageProps<AppsController, 'index'>) {
-  const { isAuthenticated, user } = useUser();
-
-  return (
-    <ContentLayout>
-      <div className="container">
-        <div className="title">AdonisJS x Inertia x React</div>
-
-        <span>
-          Learn more about AdonisJS and Inertia.js by visiting the{' '}
-          <a href="https://docs.adonisjs.com/guides/inertia">AdonisJS documentation</a>.
-        </span>
-
-        <span>{isAuthenticated ? 'Authenticated' : 'Not authenticated'}</span>
-        <pre>{JSON.stringify(user, null, 2)}</pre>
-      </div>
-    </ContentLayout>
-  );
+  return <ContentLayout>blablabla welcome to MyLinks</ContentLayout>;
 }