38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
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>
|
|
);
|
|
}
|