Adds NPCs

src/components/AutoSaveTextarea.tsx

@@ -9,12 +9,14 @@ export function AutoSaveTextarea({
   onSave,
   delay = 500,
   className = "",
+  multiline = true,
   ...props
 }: {
   value: string;
   onSave: (value: string) => Promise<void>;
   delay?: number;
   className?: string;
+  multiline?: boolean;
   [key: string]: any;
 }) {
   const [value, setValue] = useState(initialValue || "");
@@ -35,7 +37,9 @@ export function AutoSaveTextarea({
     };
   }, []);
 
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  const handleChange = (
+    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => {
     setValue(e.target.value);
     setSaved(false);
     setFlash(false);
@@ -55,12 +59,21 @@ export function AutoSaveTextarea({
 
   return (
     <div className="relative">
-      <textarea
-        value={value}
-        onChange={handleChange}
-        className={`w-full min-h-[4rem] p-2 rounded border bg-slate-800 text-slate-100 border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 transition-colors ${flash ? "ring-2 ring-emerald-400 border-emerald-400 bg-emerald-950" : ""} ${className}`}
-        {...props}
-      />
+      {multiline ? (
+        <textarea
+          value={value}
+          onChange={handleChange}
+          className={`w-full min-h-[4rem] p-2 rounded border bg-slate-800 text-slate-100 border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 transition-colors ${flash ? "ring-2 ring-emerald-400 border-emerald-400 bg-emerald-950" : ""} ${className}`}
+          {...props}
+        />
+      ) : (
+        <input
+          value={value}
+          onChange={handleChange}
+          className={`w-full p-2 rounded border bg-slate-800 text-slate-100 border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 transition-colors ${flash ? "ring-2 ring-emerald-400 border-emerald-400 bg-emerald-950" : ""} ${className}`}
+          {...props}
+        />
+      )}
       {saved && !saving && (
         <span className="absolute bottom-1 right-2 text-emerald-400 text-xs bg-slate-900 bg-opacity-80 px-2 py-0.5 rounded shadow">
           Saved