Admin Blog Posts Edit

Content

Title * setData('title', e.target.value)} /> {errors.title &&

{errors.title}

}

Slug setData('slug', e.target.value)} /> {errors.slug &&

{errors.slug}

}

Excerpt

setData('excerpt', e.target.value)}
                  rows={3}
                />
                {errors.excerpt && <p className="text-sm text-destructive">{errors.excerpt}</p>}
              </div>

<div className="space-y-1">
                <Label htmlFor="content">Content *</Label>
                <Textarea
                  id="content"
                  value={data.content}
                  onChange={(e) => setData('content', e.target.value)}
                  rows={20}
                  className="font-mono text-sm"
                />
                {errors.content && <p className="text-sm text-destructive">{errors.content}</p>}
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Publishing</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-1">
                <Label htmlFor="author">Author</Label>
                <Input
                  id="author"
                  value={data.author}
                  onChange={(e) => setData('author', e.target.value)}
                />
                {errors.author && <p className="text-sm text-destructive">{errors.author}</p>}
              </div>

<div className="space-y-1">
                <Label htmlFor="category">Category</Label>
                <Input
                  id="category"
                  value={data.category}
                  onChange={(e) => setData('category', e.target.value)}
                />
                {errors.category && <p className="text-sm text-destructive">{errors.category}</p>}
              </div>

<div className="space-y-1">
                <Label htmlFor="published_at">Publish Date (leave empty for draft)</Label>
                <Input
                  id="published_at"
                  type="datetime-local"
                  value={data.published_at}
                  onChange={(e) => setData('published_at', e.target.value)}
                />
                {errors.published_at && (
                  <p className="text-sm text-destructive">{errors.published_at}</p>
                )}
              </div>

<div className="flex items-center gap-3">
                <Switch
                  id="featured"
                  checked={data.featured}
                  onCheckedChange={(checked) => setData('featured', checked)}
                />
                <Label htmlFor="featured">Featured post</Label>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>SEO Metadata</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-1">
                <Label htmlFor="meta_title">Meta Title</Label>
                <Input
                  id="meta_title"
                  value={data.meta_title}
                  onChange={(e) => setData('meta_title', e.target.value)}
                />
                {errors.meta_title && (
                  <p className="text-sm text-destructive">{errors.meta_title}</p>
                )}
              </div>

<div className="space-y-1">
                <Label htmlFor="meta_description">Meta Description</Label>
                <Textarea
                  id="meta_description"
                  value={data.meta_description}
                  onChange={(e) => setData('meta_description', e.target.value)}
                  rows={3}
                />
                {errors.meta_description && (
                  <p className="text-sm text-destructive">{errors.meta_description}</p>
                )}
              </div>

<div className="space-y-1">
                <Label htmlFor="og_image">OG Image URL</Label>
                <Input
                  id="og_image"
                  type="url"
                  value={data.og_image}
                  onChange={(e) => setData('og_image', e.target.value)}
                  placeholder="https://example.com/image.png"
                />
                {errors.og_image && <p className="text-sm text-destructive">{errors.og_image}</p>}
              </div>

<div className="space-y-1">
                <Label htmlFor="canonical_url">Canonical URL</Label>
                <Input
                  id="canonical_url"
                  type="url"
                  value={data.canonical_url}
                  onChange={(e) => setData('canonical_url', e.target.value)}
                  placeholder="https://example.com/blog/post-slug"
                />
                {errors.canonical_url && (
                  <p className="text-sm text-destructive">{errors.canonical_url}</p>
                )}
              </div>

<div className="space-y-1">
                <Label htmlFor="keywords">Keywords (comma-separated, max 10)</Label>
                <Input
                  id="keywords"
                  value={data.keywords.join(', ')}
                  onChange={(e) => {
                    const arr = e.target.value
                      .split(',')
                      .map((k) => k.trim())
                      .filter((k) => k.length > 0);
                    setData('keywords', arr);
                  }}
                  placeholder="e.g. SEO, WordPress, content optimization"
                />
                <p className="text-xs text-muted-foreground">
                  Used in schema.org JSON-LD and displayed as topic tags.
                </p>
                {errors.keywords && <p className="text-sm text-destructive">{errors.keywords}</p>}
              </div>
            </CardContent>
          </Card>

<div className="flex gap-3">
            <Button type="submit" disabled={processing}>
              {processing ? 'Saving…' : 'Save Changes'}
            </Button>
            <Button variant="outline" asChild>
              <Link href={route('admin.blog-posts.index')}>Cancel</Link>
            </Button>
          </div>
        </form>
      </div>
    </AdminLayout>
  );
}