Cleans up the new-doc forms.

src/components/documents/npc/NewNpcForm.tsx

@@ -1,6 +1,9 @@
 import { useState } from "react";
 import type { CampaignId, Npc } from "@/lib/types";
 import { pb } from "@/lib/pocketbase";
+import { BaseForm } from "@/components/form/BaseForm";
+import { SingleLineInput } from "@/components/form/SingleLineInput";
+import { MultiLineInput } from "@/components/form/MultiLineInput";
 
 /**
  * Renders a form to add a new npc. Calls onCreate with the new npc document.
@@ -42,42 +45,29 @@ export const NewNpcForm = ({
   }
 
   return (
-    <form
-      className="flex items-left flex-col gap-2 mt-4"
+    <BaseForm
+      title="Create new NPC"
       onSubmit={handleSubmit}
-    >
-      <h3>Create new npc</h3>
-      <div className="flex gap-5 w-full items-center">
-        <label>Name</label>
-        <input
-          type="text"
-          className="flex-1 px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500"
-          placeholder="Name"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          disabled={adding}
-          aria-label="Name"
-        />
-      </div>
-      <div className="flex gap-5 w-full items-center">
-        <label>Description</label>
-        <textarea
-          className="flex-1 px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500"
-          placeholder="Description"
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          disabled={adding}
-          aria-label="Description"
-        />
-      </div>
-      {error && <div className="text-red-400 mt-2 text-sm">{error}</div>}
-      <button
-        type="submit"
-        className="px-4 py-2 rounded bg-emerald-600 hover:bg-emerald-700 text-white font-semibold transition-colors disabled:opacity-60"
-        disabled={adding || !name.trim()}
-      >
-        {adding ? "Adding..." : "Create"}
-      </button>
-    </form>
+      isLoading={adding}
+      error={error}
+      content={
+        <>
+          <SingleLineInput
+            label="Name"
+            value={name}
+            onChange={setName}
+            disabled={adding}
+            placeholder="Enter NPC name"
+          />
+          <MultiLineInput
+            label="Description"
+            value={description}
+            placeholder="Enter NPC description"
+            onChange={setDescription}
+            disabled={adding}
+          />
+        </>
+      }
+    />
   );
 };