add:order notes ui component

2026-09-24 22:35:55 +09:00
parent 97438aaa56
commit 698a49ae82
3 changed files with 43 additions and 1 deletions
@@ -0,0 +1,37 @@
+import { useState } from "react";
+import type { OrderDetail } from "@orderops/shared";
+
+interface OrderNotesProps {
+  order: OrderDetail;
+  onSave: (notes: string) => Promise<void>;
+}
+
+export function OrderNotes({ order, onSave }: OrderNotesProps) {
+  const [notes, setNotes] = useState(order.notes ?? "");
+
+  return (
+    <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+      <h3 className="mb-3 text-sm font-semibold text-slate-700">Internal notes</h3>
+      <form
+        className="space-y-3"
+        onSubmit={async (event) => {
+          event.preventDefault();
+          await onSave(notes);
+        }}
+      >
+        <label className="block text-sm text-slate-700">
+          <span className="mb-1 block">Notes</span>
+          <textarea
+            className="w-full resize-none rounded-lg border border-slate-300 px-3 py-2"
+            rows={5}
+            value={notes}
+            onChange={(event) => setNotes(event.target.value)}
+          />
+        </label>
+        <button className="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white" type="submit">
+          Save notes
+        </button>
+      </form>
+    </section>
+  );
+}