Create New Blog Post

Fill in the details to create a new blog post

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

Author setData('author', e.target.value)} required />

Excerpt

setData('excerpt', e.target.value)}
                                    rows={2}
                                    required
                                />
                                <InputError message={errors.excerpt} className="mt-2" />
                            </div>

<div>
                                <Label htmlFor="content">Content</Label>
                                <Textarea
                                    id="content"
                                    name="content"
                                    value={data.content}
                                    className="mt-1 block w-full"
                                    onChange={(e) => setData('content', e.target.value)}
                                    rows={8}
                                    required
                                />
                                <InputError message={errors.content} className="mt-2" />
                            </div>

<div className="grid grid-cols-2 gap-4">
                                <div>
                                    <Label htmlFor="category">Category</Label>
                                    <Select
                                        value={data.category}
                                        onValueChange={(value) => setData('category', value)}
                                    >
                                        <SelectTrigger>
                                            <SelectValue placeholder="Select category" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {categories.map((category) => (
                                                <SelectItem key={category} value={category}>
                                                    {category}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                    <InputError message={errors.category} className="mt-2" />
                                </div>
                                <div>
                                    <Label htmlFor="status">Status</Label>
                                    <Select
                                        value={data.status}
                                        onValueChange={(value: Blog["status"]) => setData('status', value)}
                                    >
                                        <SelectTrigger>
                                            <SelectValue />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="draft">Draft</SelectItem>
                                            <SelectItem value="published">Published</SelectItem>
                                            <SelectItem value="archived">Archived</SelectItem>
                                        </SelectContent>
                                    </Select>
                                    <InputError message={errors.status} className="mt-2" />
                                </div>
                            </div>

<div>
                                <Label htmlFor="featured_image">Featured Image URL</Label>
                                <Input
                                    id="featured_image"
                                    type="url"
                                    name="featured_image"
                                    value={data.featured_image}
                                    className="mt-1 block w-full"
                                    autoComplete="featured_image"
                                    onChange={(e) => setData('featured_image', e.target.value)}
                                    placeholder="https://example.com/image.jpg"
                                />
                                <InputError message={errors.featured_image} className="mt-2" />
                            </div>

<div>
                                <Label htmlFor="tags">Tags (comma-separated)</Label>
                                <Input
                                    id="tags"
                                    type="text"
                                    name="tags"
                                    value={data.tags}
                                    className="mt-1 block w-full"
                                    autoComplete="tags"
                                    onChange={(e) => setData('tags', e.target.value)}
                                    placeholder="real estate, tips, guide"
                                />
                                <InputError message={errors.tags} className="mt-2" />
                            </div>

<div className="flex justify-end space-x-2">
                                <Link href={route('blogs.index')}>
                                    <Button type="button" variant="outline">
                                        Cancel
                                    </Button>
                                </Link>
                                <Button type="submit" disabled={processing}>
                                    Create Blog
                                </Button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </AppLayout>
    );
}