| 1 | import { useState, type FormEvent } from "react"; |
| 2 | |
| 3 | export const NoteForm = ({ |
| 4 | onCreate, |
| 5 | }: { |
| 6 | onCreate: (body: string) => Promise<void>; |
| 7 | }) => { |
| 8 | const [body, setBody] = useState(""); |
| 9 | const [pending, setPending] = useState(false); |
| 10 | |
| 11 | const submit = async (event: FormEvent<HTMLFormElement>) => { |
| 12 | event.preventDefault(); |
| 13 | const trimmed = body.trim(); |
| 14 | if (trimmed.length === 0 || pending) return; |
| 15 | setPending(true); |
| 16 | try { |
| 17 | await onCreate(trimmed); |
| 18 | setBody(""); |
| 19 | } finally { |
| 20 | setPending(false); |
| 21 | } |
| 22 | }; |
| 23 | |
| 24 | return ( |
| 25 | <form onSubmit={submit} className="flex flex-col gap-3 sm:flex-row"> |
| 26 | <label className="sr-only" htmlFor="note-body"> |
| 27 | Note |
| 28 | </label> |
| 29 | <input |
| 30 | id="note-body" |
| 31 | value={body} |
| 32 | onChange={(event) => setBody(event.target.value)} |
| 33 | placeholder="Write a note…" |
| 34 | className="min-w-0 flex-1 rounded-xl border border-slate-700 bg-slate-900 px-4 py-3 text-slate-100 outline-none ring-sky-400 focus:ring-2" |
| 35 | /> |
| 36 | <button |
| 37 | type="submit" |
| 38 | disabled={pending} |
| 39 | className="rounded-xl bg-sky-500 px-5 py-3 font-medium text-slate-950 hover:bg-sky-400 disabled:opacity-60" |
| 40 | > |
| 41 | {pending ? "Saving…" : "Add note"} |
| 42 | </button> |
| 43 | </form> |
| 44 | ); |
| 45 | }; |