New Knowledge Base Article

System

Category (optional)

Title setData('title', e.target.value) } />

Content

setData('content', e.target.value)
                                    }
                                />
                                <InputError message={errors.content} />
                            </div>
                            <div className="space-y-2">
                                <Label>Tags</Label>
                                <div className="flex gap-2">
                                    <Input
                                        value={tagInput}
                                        onChange={(e) =>
                                            setTagInput(e.target.value)
                                        }
                                        placeholder="Add a tag"
                                        onKeyDown={(e) => {
                                            if (e.key === 'Enter') {
                                                e.preventDefault();
                                                addTag();
                                            }
                                        }}
                                    />
                                    <Button
                                        type="button"
                                        variant="outline"
                                        onClick={addTag}
                                    >
                                        Add
                                    </Button>
                                </div>
                                {data.tags.length > 0 && (
                                    <div className="mt-1 flex flex-wrap gap-1">
                                        {data.tags.map((tag) => (
                                            <span
                                                key={tag}
                                                className="inline-flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-xs"
                                            >
                                                {tag}
                                                <button
                                                    type="button"
                                                    className="text-muted-foreground hover:text-foreground"
                                                    onClick={() =>
                                                        removeTag(tag)
                                                    }
                                                >
                                                    ×
                                                </button>
                                            </span>
                                        ))}
                                    </div>
                                )}
                            </div>
                            <div className="flex items-center gap-2">
                                <Checkbox
                                    id="is_published"
                                    checked={data.is_published}
                                    onCheckedChange={(v) =>
                                        setData('is_published', !!v)
                                    }
                                />
                                <Label htmlFor="is_published">Publish</Label>
                            </div>
                            <div className="flex gap-3 pt-2">
                                <Button type="submit" disabled={processing}>
                                    Create
                                </Button>
                                <Button
                                    type="button"
                                    variant="outline"
                                    onClick={() =>
                                        router.visit('/admin/knowledge-base')
                                    }
                                >
                                    Cancel
                                </Button>
                            </div>
                        </CardContent>
                    </Card>
                </form>
            </div>
        </>
    );
}