✨(demo) improve create form submit

Take in account more fields. Use a form instead a ref to retrieve values
 easily.

apps/demo/src/Create.tsx

@@ -21,15 +21,22 @@ import { Page, PageProps } from "./App";
 
 export const Create = ({ changePage }: PageProps) => {
   const { toast } = useToastProvider();
-  const inputRef = React.useRef<HTMLInputElement>(null);
 
-  const submit = () => {
+  const submit: React.FormEventHandler<HTMLFormElement> = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    const fakeDates = randomDates();
     const character: Character = {
       id: faker.string.uuid(),
-      name: inputRef.current?.value || "",
+      name: (formData.get("name") as any) || "",
-      sex: "male",
+      sex: (formData.get("sex") as any) || "",
-      isGuest: false,
+      isGuest: (formData.get("is_guest") as any) || "",
-      ...randomDates(),
+      birthDate:
+        new Date(formData.get("birthdate") as any) || fakeDates.birthDate,
+      firstAppearanceDate:
+        new Date(formData.get("appearance_dates_start") as any) ||
+        fakeDates.firstAppearanceDate,
+      lastAppearanceDate: fakeDates.lastAppearanceDate,
     };
     database.unshift(character);
 
@@ -38,7 +45,7 @@ export const Create = ({ changePage }: PageProps) => {
   };
 
   return (
-    <div className="page__create clr-greyscale-900">
+    <form className="page__create clr-greyscale-900" onSubmit={submit}>
       <h1>Add a character</h1>
       <div className="card">
         <h3 className="fw-bold fs-h3">General Information</h3>
@@ -46,30 +53,35 @@ export const Create = ({ changePage }: PageProps) => {
           You are about to add a new character to the collection
         </Alert>
         <Input
-          ref={inputRef}
+          name="name"
           label="Name"
           text="Enter first and last name"
           fullWidth={true}
+          required
         />
         <Select
+          name="sex"
           label="Sex"
           fullWidth={true}
           options={[
             {
-              label: "Male",
+              label: "Female",
+              value: "female",
             },
             {
-              label: "Female",
+              label: "Male",
+              value: "male",
             },
           ]}
         />
-        <DatePicker label="Birth Date" fullWidth={true} />
+        <DatePicker name="birthdate" label="Birth Date" fullWidth={true} />
         <DateRangePicker
+          name="appearance_dates"
           startLabel="First appearance"
           endLabel="Last appearance"
           fullWidth={true}
         />
-        <Checkbox label="This character is a guest" />
+        <Checkbox name="is_guest" label="This character is a guest" />
       </div>
       <div className="card mt-l">
         <h3 className="fw-bold fs-h3">Bio</h3>
@@ -77,6 +89,7 @@ export const Create = ({ changePage }: PageProps) => {
           Please be exhaustive, every detail counts!
         </Alert>
         <TextArea
+          name="bio"
           label="Biography"
           text="Enter a detailed biography"
           fullWidth={true}
@@ -104,7 +117,7 @@ export const Create = ({ changePage }: PageProps) => {
             value="D"
           />
         </RadioGroup>
-        <Switch label="Make this character public" />
+        <Switch name="is_public" label="Make this character public" />
 
         <div>
           <h4>Add pictures</h4>
@@ -119,10 +132,10 @@ export const Create = ({ changePage }: PageProps) => {
         </div>
       </div>
       <div className="mt-l">
-        <Button fullWidth={true} onClick={() => submit()}>
+        <Button fullWidth={true} type="submit">
           Add character
         </Button>
       </div>
-    </div>
+    </form>
   );
 };

apps/demo/src/Home.tsx

@@ -83,8 +83,13 @@ export const Home = ({ changePage }: PageProps) => {
               headerName: "Name",
             },
             {
-              field: "sex",
+              id: "sex",
               headerName: "Sex",
+              renderCell: (params) => {
+                return (
+                  <span className="material-icons">{params.row.sex}</span>
+                );
+              },
             },
             {
               id: "birthDate",
@@ -104,7 +109,13 @@ export const Home = ({ changePage }: PageProps) => {
               id: "isGuest",
               headerName: "Is Guest",
               renderCell: (params) => {
-                return params.row.isGuest ? "yes" : "no";
+                return params.row.isGuest ? (
+                  <span className="material-icons ml-s">check_box</span>
+                ) : (
+                  <span className="material-icons ml-s">
+                    check_box_outline_blank
+                  </span>
+                );
               },
             },
             {