) {
+ if (e.key === 'Enter') {
+ e.preventDefault()
+ addTag(tagInput)
+ } else if (e.key === 'Escape') {
+ setTagInput('')
+ setTagError(null)
+ }
+ }
+
async function handleSubmit(e: React.FormEvent) {
e.preventDefault()
setSaving(true)
setError(null)
- const input: CardInput = { question, response, theme }
+ const input: CardInput = { question, response, theme, tags }
try {
if (mode === 'create') {
const card = await cardsApi.create(input)
@@ -83,6 +143,64 @@ export function CardForm({ mode, cardId, initial }: CardFormProps) {
className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2"
/>
+
+
+ Tags ({tags.length}/{MAX_TAGS})
+
+ {tags.length > 0 && (
+
+ {tags.map((tag) => (
+ -
+ #{tag}
+
+
+ ))}
+
+ )}
+
{
+ setTagInput(e.target.value)
+ setTagError(null)
+ }}
+ onKeyDown={handleTagKeyDown}
+ placeholder="Saisis un tag puis Entrée (ex. git)"
+ aria-label="Ajouter un tag"
+ disabled={tags.length >= MAX_TAGS}
+ className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 disabled:opacity-50"
+ />
+ {tagError && (
+
+ {tagError}
+
+ )}
+ {suggestions.length > 0 && (
+
+ {suggestions.slice(0, 6).map((tag) => (
+ -
+
+
+ ))}
+
+ )}
+