基本完成创建Scheme的功能。

src/App.tsx

@@ -2,6 +2,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { Notifications } from './components/Notifications';
 import { Home } from './pages/Home';
 import { MainLayout } from './pages/MainLayout';
+import { NewScheme } from './pages/NewScheme';
 import { Schemes } from './pages/Schemes';
 
 const routes = createBrowserRouter([
@@ -10,7 +11,11 @@ const routes = createBrowserRouter([
     element: <MainLayout />,
     children: [
       { index: true, element: <Home /> },
-      { path: 'schemes', element: <Schemes /> },
+      {
+        path: 'schemes',
+        element: <Schemes />,
+        children: [{ path: 'new', element: <NewScheme /> }],
+      },
     ],
   },
 ]);

src/pages/NewScheme.module.css

@@ -0,0 +1,28 @@
+@layer pages {
+  .create_scheme_form_layout {
+    width: 100%;
+    padding: calc(var(--spacing) * 10) calc(var(--spacing) * 8);
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 6);
+    .form_row {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--spacing-xxs);
+      label {
+        font-size: var(--font-size-xs);
+      }
+      .name_input {
+        min-width: 20em;
+      }
+      .description_input {
+        min-width: 50em;
+      }
+      .error_message {
+        color: var(--color-danger);
+        font-size: var(--font-size-xs);
+      }
+    }
+  }
+}

src/pages/NewScheme.tsx

@@ -0,0 +1,46 @@
+import cx from 'clsx';
+import { isEmpty, isNil } from 'lodash-es';
+import { useActionState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useCreateScheme } from '../stores/schemes';
+import styles from './NewScheme.module.css';
+
+export function NewScheme() {
+  const createScheme = useCreateScheme();
+  const navigate = useNavigate();
+  const [errors, formAction] = useActionState((prevState, formData) => {
+    try {
+      const name = formData.get('name') as string;
+      if (isNil(name) || isEmpty(name)) {
+        throw { name: 'Name is required' };
+      }
+      const description = (formData.get('description') ?? null) as string | null;
+      const newId = createScheme(name, description);
+      navigate(`../${newId}`);
+    } catch (error) {
+      return error;
+    }
+    return {};
+  }, {});
+
+  return (
+    <form action={formAction} className={styles.create_scheme_form_layout}>
+      <div className={styles.form_row}>
+        <label>
+          Name <span>*</span>
+        </label>
+        <input type="text" name="name" className={styles.name_input} />
+        {errors.name && <div className={styles.error_message}>{errors.name}</div>}
+      </div>
+      <div className={styles.form_row}>
+        <label>Description</label>
+        <textarea rows={5} name="description" className={styles.description_input} />
+      </div>
+      <div className={styles.form_row}>
+        <button type="submit" className={cx('primary')}>
+          Create
+        </button>
+      </div>
+    </form>
+  );
+}