190 lines
7.6 KiB
TypeScript
190 lines
7.6 KiB
TypeScript
"use client";
|
|
|
|
import { useTransition } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { createInterview, updateInterview } from '@/app/actions/interview';
|
|
import { Loader2, ArrowLeft, Save, Video, FileText } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { InterviewType } from '@prisma/client';
|
|
import { toast } from 'react-hot-toast';
|
|
|
|
interface Props {
|
|
initialData?: any;
|
|
}
|
|
|
|
export default function InterviewForm({ initialData }: Props) {
|
|
const router = useRouter();
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
const formData = new FormData(event.currentTarget);
|
|
const data: any = {
|
|
title: formData.get('title') as string,
|
|
guestName: formData.get('guestName') as string,
|
|
companyName: formData.get('companyName') as string,
|
|
role: formData.get('role') as string,
|
|
type: formData.get('type') as InterviewType,
|
|
thumbnailUrl: formData.get('thumbnailUrl') as string,
|
|
videoUrl: formData.get('videoUrl') as string || null,
|
|
excerpt: formData.get('excerpt') as string,
|
|
content: formData.get('content') as string || null,
|
|
duration: formData.get('duration') as string || null,
|
|
};
|
|
|
|
startTransition(async () => {
|
|
const result = initialData
|
|
? await updateInterview(initialData.id, data)
|
|
: await createInterview(data);
|
|
|
|
if (result.success) {
|
|
toast.success(initialData ? "Interview mise à jour" : "Interview créée 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">
|
|
<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\'interview' : 'Nouvelle Interview'}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="card space-y-6">
|
|
<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 de l'interview</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: Entreprise X : Une success story..."
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-400">Nom de l'invité</label>
|
|
<input
|
|
name="guestName"
|
|
defaultValue={initialData?.guestName}
|
|
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: Sarah Koné"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-400">Entreprise</label>
|
|
<input
|
|
name="companyName"
|
|
defaultValue={initialData?.companyName}
|
|
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: TechAfrica"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-400">Rôle / Poste</label>
|
|
<input
|
|
name="role"
|
|
defaultValue={initialData?.role}
|
|
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: Fondatrice & CEO"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<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">Type d'interview</label>
|
|
<select
|
|
name="type"
|
|
defaultValue={initialData?.type || 'VIDEO'}
|
|
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-indigo-500"
|
|
>
|
|
<option value="VIDEO">Vidéo</option>
|
|
<option value="ARTICLE">Article (Texte)</option>
|
|
</select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-400">Durée (Optionnel)</label>
|
|
<input
|
|
name="duration"
|
|
defaultValue={initialData?.duration}
|
|
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: 12 min"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<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">URL de la miniature (Thumbnail)</label>
|
|
<input
|
|
name="thumbnailUrl"
|
|
defaultValue={initialData?.thumbnailUrl}
|
|
required
|
|
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-indigo-500"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-400">URL Vidéo (Si type Vidéo)</label>
|
|
<input
|
|
name="videoUrl"
|
|
defaultValue={initialData?.videoUrl}
|
|
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://youtube.com/..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-400">Extrait (Court résumé)</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"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-400">Contenu / Transcription (Optionnel)</label>
|
|
<textarea
|
|
name="content"
|
|
defaultValue={initialData?.content}
|
|
rows={8}
|
|
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-indigo-500"
|
|
/>
|
|
</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 bg-emerald-600"
|
|
>
|
|
{isPending ? (
|
|
<Loader2 className="w-6 h-6 animate-spin" />
|
|
) : (
|
|
<Save className="w-6 h-6" />
|
|
)}
|
|
{initialData ? 'Enregistrer les modifications' : 'Créer l\'interview'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|