71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import type { NoteFormProps } from '../interfaces/note-editor'
|
|
|
|
const TITLE_REQUIRED_MESSAGE = 'Le titre est obligatoire.'
|
|
|
|
function NoteForm({
|
|
title,
|
|
content,
|
|
titleMissing,
|
|
cancelLabel,
|
|
onTitleChange,
|
|
onContentChange,
|
|
onCancel,
|
|
onSubmit,
|
|
}: NoteFormProps) {
|
|
return (
|
|
<form
|
|
className="flex flex-col gap-4 rounded-2xl border border-gray-200 bg-white p-4 shadow-sm"
|
|
onSubmit={(event) => {
|
|
event.preventDefault()
|
|
onSubmit()
|
|
}}
|
|
>
|
|
<label className="flex flex-col gap-1">
|
|
<span className="text-sm font-medium text-gray-500">Titre</span>
|
|
<input
|
|
value={title}
|
|
onChange={(event) => onTitleChange(event.target.value)}
|
|
autoFocus
|
|
aria-invalid={titleMissing}
|
|
className={`w-full rounded-lg border px-3 py-3 text-base focus:outline-none focus:ring-2 ${
|
|
titleMissing
|
|
? 'border-red-500 focus:ring-red-500/30'
|
|
: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/30'
|
|
}`}
|
|
placeholder="Sans titre"
|
|
/>
|
|
</label>
|
|
{titleMissing && (
|
|
<span role="alert" className="text-sm text-red-600">
|
|
{TITLE_REQUIRED_MESSAGE}
|
|
</span>
|
|
)}
|
|
<label className="flex flex-col gap-1">
|
|
<span className="text-sm font-medium text-gray-500">Contenu</span>
|
|
<textarea
|
|
value={content}
|
|
onChange={(event) => onContentChange(event.target.value)}
|
|
className="w-full min-h-48 rounded-lg border border-gray-300 px-3 py-3 text-base focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
|
|
placeholder="Écrire ici…"
|
|
/>
|
|
</label>
|
|
<div className="flex justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={onCancel}
|
|
className="rounded-lg border border-gray-300 px-5 py-3 text-gray-600 hover:bg-gray-50 active:bg-gray-100"
|
|
>
|
|
{cancelLabel}
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="rounded-lg bg-blue-600 px-5 py-3 text-white hover:bg-blue-700 active:bg-blue-800"
|
|
>
|
|
Enregistrer
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
export default NoteForm |