200 lines
7.9 KiB
TypeScript
200 lines
7.9 KiB
TypeScript
"use client";
|
|
|
|
import { useTransition, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { createBlogPost, updateBlogPost } from '@/app/actions/blog';
|
|
import { Loader2, ArrowLeft, Save } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { toast } from 'react-hot-toast';
|
|
import RichTextEditor from './RichTextEditor';
|
|
|
|
interface Props {
|
|
initialData?: {
|
|
id: string;
|
|
title: string;
|
|
excerpt: string;
|
|
content: string;
|
|
author: string;
|
|
imageUrl: string;
|
|
slug?: string | null;
|
|
tags?: string[];
|
|
metaTitle?: string | null;
|
|
metaDescription?: string | null;
|
|
};
|
|
}
|
|
|
|
export default function BlogForm({ initialData }: Props) {
|
|
const router = useRouter();
|
|
const [isPending, startTransition] = useTransition();
|
|
const [content, setContent] = useState(initialData?.content || '');
|
|
|
|
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
const formData = new FormData(event.currentTarget);
|
|
const data = {
|
|
title: formData.get('title') as string,
|
|
slug: formData.get('slug') as string,
|
|
excerpt: formData.get('excerpt') as string,
|
|
content: content,
|
|
author: formData.get('author') as string,
|
|
imageUrl: formData.get('imageUrl') as string,
|
|
tags: (formData.get('tags') as string)?.split(',').map(t => t.trim()).filter(t => t !== ''),
|
|
metaTitle: formData.get('metaTitle') as string,
|
|
metaDescription: formData.get('metaDescription') as string,
|
|
};
|
|
|
|
startTransition(async () => {
|
|
const result = initialData
|
|
? await updateBlogPost(initialData.id, data)
|
|
: await createBlogPost(data);
|
|
|
|
if (result.success) {
|
|
toast.success(initialData ? "Article mis à jour" : "Article publié avec succès");
|
|
router.push('/blog');
|
|
router.refresh();
|
|
} else {
|
|
toast.error(result.error || "Une erreur est survenue");
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto pb-20">
|
|
<div className="mb-8 flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/blog" className="p-2 bg-slate-800 rounded-lg text-slate-400 hover:text-white transition-colors">
|
|
<ArrowLeft className="w-5 h-5" />
|
|
</Link>
|
|
<h1 className="text-3xl font-bold text-white">
|
|
{initialData ? 'Modifier l\'article' : 'Nouvel Article'}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-8">
|
|
<div className="card space-y-6">
|
|
<h2 className="text-xl font-semibold text-white border-b border-slate-800 pb-4">Informations Générales</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-400">Titre</label>
|
|
<input
|
|
name="title"
|
|
defaultValue={initialData?.title}
|
|
required
|
|
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-indigo-500"
|
|
placeholder="Ex: L'essor de la Tech en Afrique"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-400">Auteur</label>
|
|
<input
|
|
name="author"
|
|
defaultValue={initialData?.author}
|
|
required
|
|
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-indigo-500"
|
|
placeholder="Ex: Jean Dupont"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-400">URL de l'image</label>
|
|
<input
|
|
name="imageUrl"
|
|
defaultValue={initialData?.imageUrl}
|
|
required
|
|
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-indigo-500"
|
|
placeholder="https://images.unsplash.com/..."
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-400">Extrait (Excerpt)</label>
|
|
<textarea
|
|
name="excerpt"
|
|
defaultValue={initialData?.excerpt}
|
|
required
|
|
rows={2}
|
|
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-indigo-500"
|
|
placeholder="Un court résumé de l'article..."
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-400">Contenu de l'article</label>
|
|
<RichTextEditor
|
|
value={content}
|
|
onChange={setContent}
|
|
placeholder="Rédigez votre article ici..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* SEO SECTION */}
|
|
<div className="card space-y-6">
|
|
<h2 className="text-xl font-semibold text-white border-b border-slate-800 pb-4">Optimisation SEO</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-400">Slug (URL personnalisée)</label>
|
|
<input
|
|
name="slug"
|
|
defaultValue={initialData?.slug || ''}
|
|
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-indigo-500"
|
|
placeholder="ex: lessor-de-la-tech-afrique"
|
|
/>
|
|
<p className="text-xs text-slate-500 italic">Laissez vide pour générer automatiquement à partir du titre.</p>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-400">Mots-clés (tags, séparés par des virgules)</label>
|
|
<input
|
|
name="tags"
|
|
defaultValue={initialData?.tags?.join(', ') || ''}
|
|
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-indigo-500"
|
|
placeholder="tech, afrique, innovation"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-400">Meta Titre (SEO)</label>
|
|
<input
|
|
name="metaTitle"
|
|
defaultValue={initialData?.metaTitle || ''}
|
|
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-indigo-500"
|
|
placeholder="Titre optimisé pour les moteurs de recherche"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-400">Meta Description (SEO)</label>
|
|
<textarea
|
|
name="metaDescription"
|
|
defaultValue={initialData?.metaDescription || ''}
|
|
rows={3}
|
|
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-indigo-500"
|
|
placeholder="Description optimisée pour les moteurs de recherche (max 160 caractères)..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-4">
|
|
<button
|
|
type="submit"
|
|
disabled={isPending}
|
|
className="w-full btn-verify flex items-center justify-center gap-2 py-4 text-lg"
|
|
>
|
|
{isPending ? (
|
|
<Loader2 className="w-6 h-6 animate-spin" />
|
|
) : (
|
|
<Save className="w-6 h-6" />
|
|
)}
|
|
{initialData ? 'Enregistrer les modifications' : 'Publier l\'article'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|