correction des themes
This commit is contained in:
@@ -43,8 +43,8 @@ const BookSettingsComponent: React.FC<BookSettingsProps> = ({ project, onUpdate,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full bg-[#eef2ff] p-8 overflow-y-auto">
|
||||
<div className="max-w-4xl mx-auto bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden">
|
||||
<div className="h-full bg-theme-bg p-8 overflow-y-auto transition-colors duration-300">
|
||||
<div className="max-w-4xl mx-auto bg-theme-panel rounded-xl shadow-lg border border-theme-border overflow-hidden transition-colors duration-300">
|
||||
|
||||
<div className="bg-slate-900 text-white p-6 border-b border-slate-800 flex items-center gap-4">
|
||||
<div className="bg-blue-600 p-3 rounded-lg">
|
||||
@@ -58,53 +58,53 @@ const BookSettingsComponent: React.FC<BookSettingsProps> = ({ project, onUpdate,
|
||||
|
||||
<div className="p-8 space-y-8">
|
||||
<section className="space-y-4">
|
||||
<h3 className="text-lg font-bold text-slate-800 flex items-center gap-2 border-b border-slate-100 pb-2">
|
||||
<h3 className="text-lg font-bold text-theme-text flex items-center gap-2 border-b border-theme-border pb-2">
|
||||
<Book size={18} className="text-blue-600" /> Informations de Base
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-600 mb-1">Titre du Roman</label>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">Titre du Roman</label>
|
||||
<input
|
||||
type="text"
|
||||
value={project.title}
|
||||
onChange={(e) => onUpdate({ ...project, title: e.target.value })}
|
||||
className="w-full p-2.5 bg-[#eef2ff] border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none font-serif font-bold text-lg"
|
||||
className="w-full p-2.5 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none font-serif font-bold text-lg transition-colors duration-300"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-600 mb-1">Nom d'Auteur</label>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">Nom d'Auteur</label>
|
||||
<input
|
||||
type="text"
|
||||
value={project.author}
|
||||
onChange={(e) => onUpdate({ ...project, author: e.target.value })}
|
||||
className="w-full p-2.5 bg-[#eef2ff] border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
className="w-full p-2.5 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-colors duration-300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-600 mb-1">Synopsis Global</label>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">Synopsis Global</label>
|
||||
<textarea
|
||||
value={settings.synopsis}
|
||||
onChange={(e) => handleChange('synopsis', e.target.value)}
|
||||
className="w-full p-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none h-24 text-sm bg-[#eef2ff]"
|
||||
className="w-full p-3 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none h-24 text-sm transition-colors duration-300"
|
||||
placeholder="De quoi parle votre histoire dans les grandes lignes ?"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h3 className="text-lg font-bold text-slate-800 flex items-center gap-2 border-b border-slate-100 pb-2">
|
||||
<h3 className="text-lg font-bold text-theme-text flex items-center gap-2 border-b border-theme-border pb-2">
|
||||
<Target size={18} className="text-red-500" /> Genre & Public
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-600 mb-1">Genre Principal</label>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">Genre Principal</label>
|
||||
<input
|
||||
type="text"
|
||||
list="genre-suggestions"
|
||||
value={settings.genre}
|
||||
onChange={(e) => handleChange('genre', e.target.value)}
|
||||
className="w-full p-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none bg-[#eef2ff]"
|
||||
className="w-full p-2.5 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-colors duration-300"
|
||||
placeholder="Ex: Fantasy"
|
||||
/>
|
||||
<datalist id="genre-suggestions">
|
||||
@@ -112,35 +112,35 @@ const BookSettingsComponent: React.FC<BookSettingsProps> = ({ project, onUpdate,
|
||||
</datalist>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-600 mb-1">Sous-Genre</label>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">Sous-Genre</label>
|
||||
<input
|
||||
type="text"
|
||||
value={settings.subGenre || ''}
|
||||
onChange={(e) => handleChange('subGenre', e.target.value)}
|
||||
className="w-full p-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none bg-[#eef2ff]"
|
||||
className="w-full p-2.5 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-colors duration-300"
|
||||
placeholder="Ex: Dark Fantasy"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-600 mb-1">Public Cible</label>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">Public Cible</label>
|
||||
<input
|
||||
type="text"
|
||||
value={settings.targetAudience}
|
||||
onChange={(e) => handleChange('targetAudience', e.target.value)}
|
||||
className="w-full p-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none bg-[#eef2ff]"
|
||||
className="w-full p-2.5 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-colors duration-300"
|
||||
placeholder="Ex: Jeune Adulte, Adulte..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-600 mb-1">Thèmes Clés</label>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">Thèmes Clés</label>
|
||||
<div className="relative">
|
||||
<Hash size={14} className="absolute left-3 top-3 text-slate-400" />
|
||||
<Hash size={14} className="absolute left-3 top-3 text-theme-muted" />
|
||||
<input
|
||||
type="text"
|
||||
value={settings.themes}
|
||||
onChange={(e) => handleChange('themes', e.target.value)}
|
||||
className="w-full pl-9 p-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none bg-[#eef2ff]"
|
||||
className="w-full pl-9 p-2.5 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-colors duration-300"
|
||||
placeholder="Ex: Vengeance, Rédemption, Voyage initiatique..."
|
||||
/>
|
||||
</div>
|
||||
@@ -148,44 +148,44 @@ const BookSettingsComponent: React.FC<BookSettingsProps> = ({ project, onUpdate,
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h3 className="text-lg font-bold text-slate-800 flex items-center gap-2 border-b border-slate-100 pb-2">
|
||||
<h3 className="text-lg font-bold text-theme-text flex items-center gap-2 border-b border-theme-border pb-2">
|
||||
<Feather size={18} className="text-purple-600" /> Narration & Style
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-600 mb-1 flex items-center gap-1">
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1 flex items-center gap-1">
|
||||
<Users size={14} /> Point de Vue (POV)
|
||||
</label>
|
||||
<select
|
||||
value={settings.pov}
|
||||
onChange={(e) => handleChange('pov', e.target.value)}
|
||||
className="w-full p-2.5 bg-[#eef2ff] border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
className="w-full p-2.5 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-colors duration-300"
|
||||
>
|
||||
<option value="">Sélectionner...</option>
|
||||
{POV_OPTIONS.map(o => <option key={o} value={o}>{o}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-600 mb-1 flex items-center gap-1">
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1 flex items-center gap-1">
|
||||
<Clock size={14} /> Temps du récit
|
||||
</label>
|
||||
<select
|
||||
value={settings.tense}
|
||||
onChange={(e) => handleChange('tense', e.target.value)}
|
||||
className="w-full p-2.5 bg-[#eef2ff] border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
className="w-full p-2.5 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-colors duration-300"
|
||||
>
|
||||
<option value="">Sélectionner...</option>
|
||||
{TENSE_OPTIONS.map(o => <option key={o} value={o}>{o}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-600 mb-1">Ton Général</label>
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">Ton Général</label>
|
||||
<input
|
||||
type="text"
|
||||
list="tone-suggestions"
|
||||
value={settings.tone}
|
||||
onChange={(e) => handleChange('tone', e.target.value)}
|
||||
className="w-full p-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none bg-[#eef2ff]"
|
||||
className="w-full p-2.5 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-colors duration-300"
|
||||
placeholder="Ex: Sombre, Ironique..."
|
||||
/>
|
||||
<datalist id="tone-suggestions">
|
||||
@@ -195,16 +195,16 @@ const BookSettingsComponent: React.FC<BookSettingsProps> = ({ project, onUpdate,
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label className="block text-sm font-semibold text-slate-600 mb-1">
|
||||
<label className="block text-sm font-semibold text-theme-muted mb-1">
|
||||
Guide de Style & Instructions IA (Prompt Système)
|
||||
</label>
|
||||
<p className="text-xs text-slate-400 mb-2">
|
||||
<p className="text-xs text-theme-muted mb-2">
|
||||
Ces instructions seront envoyées à l'IA à chaque génération. Décrivez ici le style d'écriture désiré (ex: "phrases courtes", "vocabulaire soutenu", "beaucoup de métaphores").
|
||||
</p>
|
||||
<textarea
|
||||
value={project.styleGuide || ''}
|
||||
onChange={(e) => handleStyleGuideChange(e.target.value)}
|
||||
className="w-full p-3 border border-indigo-100 bg-[#eef2ff] rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none h-32 text-sm font-mono text-slate-700"
|
||||
className="w-full p-3 bg-theme-bg text-theme-text border border-theme-border rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none h-32 text-sm font-mono transition-colors duration-300"
|
||||
placeholder="Ex: Utilise un style descriptif et sensoriel. Évite les adverbes. Le narrateur est cynique."
|
||||
/>
|
||||
</div>
|
||||
@@ -220,17 +220,17 @@ const BookSettingsComponent: React.FC<BookSettingsProps> = ({ project, onUpdate,
|
||||
Cette action est irréversible. Toutes les données associées à ce projet (chapitres, entités, idées) seront définitivement effacées.
|
||||
</p>
|
||||
{showDeleteConfirm ? (
|
||||
<div className="flex items-center gap-4 bg-white p-4 rounded border border-red-200">
|
||||
<span className="text-sm font-bold text-slate-700">Êtes-vous sûr ?</span>
|
||||
<div className="flex items-center gap-4 bg-theme-panel p-4 rounded border border-red-200">
|
||||
<span className="text-sm font-bold text-theme-text">Êtes-vous sûr ?</span>
|
||||
<button
|
||||
onClick={onDeleteProject}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 text-sm font-bold"
|
||||
className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 text-sm font-bold opacity-90 transition-opacity"
|
||||
>
|
||||
Oui, supprimer définitivement
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowDeleteConfirm(false)}
|
||||
className="px-4 py-2 bg-slate-200 text-slate-700 rounded hover:bg-slate-300 text-sm"
|
||||
className="px-4 py-2 bg-theme-bg text-theme-text border border-theme-border rounded hover:opacity-80 text-sm transition-opacity"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
@@ -238,7 +238,7 @@ const BookSettingsComponent: React.FC<BookSettingsProps> = ({ project, onUpdate,
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
className="px-4 py-2 bg-white border border-red-300 text-red-600 rounded hover:bg-red-50 text-sm font-bold"
|
||||
className="px-4 py-2 bg-theme-panel border border-red-300 text-red-600 rounded hover:bg-red-50 text-sm font-bold transition-colors duration-300"
|
||||
>
|
||||
Supprimer ce projet
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user