mirror of
https://github.com/R0m1k3/Reviflow.git
synced 2026-10-11 17:26:20 +02:00
Fix syntax errors in RecentRevisionsWidget and MasteryWidget
This commit is contained in:
Reviflow Bot committed
1 parent
cfaa969401
commit
e5d3e3a24e
4 files changed
+303
-294
No files matched your search
@@ -72,27 +72,27 @@ export function ActivityTimeline({ learnerId }: ActivityTimelineProps) {
|
||||
<div className="space-y-8 animate-in fade-in duration-500">
|
||||
{/* Summary Cards */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
<div className="bg-indigo-50 p-4 rounded-xl text-center border border-indigo-100">
|
||||
<div className="bg-indigo-50 dark:bg-indigo-900/20 p-4 rounded-xl text-center border border-indigo-100 dark:border-indigo-900/30">
|
||||
<p className="text-xs font-bold text-indigo-400 uppercase tracking-widest mb-1">Aujourd'hui</p>
|
||||
<p className="text-2xl font-black text-indigo-600">{data.summary.today_minutes} <span className="text-sm font-bold opacity-70">min</span></p>
|
||||
<p className="text-2xl font-black text-indigo-600 dark:text-indigo-400">{data.summary.today_minutes} <span className="text-sm font-bold opacity-70">min</span></p>
|
||||
</div>
|
||||
<div className="bg-emerald-50 p-4 rounded-xl text-center border border-emerald-100">
|
||||
<div className="bg-emerald-50 dark:bg-emerald-900/20 p-4 rounded-xl text-center border border-emerald-100 dark:border-emerald-900/30">
|
||||
<p className="text-xs font-bold text-emerald-400 uppercase tracking-widest mb-1">Cette semaine</p>
|
||||
<p className="text-2xl font-black text-emerald-600">{data.summary.week_minutes} <span className="text-sm font-bold opacity-70">min</span></p>
|
||||
<p className="text-2xl font-black text-emerald-600 dark:text-emerald-400">{data.summary.week_minutes} <span className="text-sm font-bold opacity-70">min</span></p>
|
||||
</div>
|
||||
<div className="bg-amber-50 p-4 rounded-xl text-center border border-amber-100">
|
||||
<div className="bg-amber-50 dark:bg-amber-900/20 p-4 rounded-xl text-center border border-amber-100 dark:border-amber-900/30">
|
||||
<p className="text-xs font-bold text-amber-400 uppercase tracking-widest mb-1">Total Quiz</p>
|
||||
<p className="text-2xl font-black text-amber-600">{data.summary.total_quizzes}</p>
|
||||
<p className="text-2xl font-black text-amber-600 dark:text-amber-400">{data.summary.total_quizzes}</p>
|
||||
</div>
|
||||
<div className="bg-blue-50 p-4 rounded-xl text-center border border-blue-100">
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-xl text-center border border-blue-100 dark:border-blue-900/30">
|
||||
<p className="text-xs font-bold text-blue-400 uppercase tracking-widest mb-1">Total Révisions</p>
|
||||
<p className="text-2xl font-black text-blue-600">{data.summary.total_revisions}</p>
|
||||
<p className="text-2xl font-black text-blue-600 dark:text-blue-400">{data.summary.total_revisions}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div>
|
||||
<h3 className="text-xl font-black text-slate-900 mb-6 flex items-center gap-2">
|
||||
<h3 className="text-xl font-black text-slate-900 dark:text-white mb-6 flex items-center gap-2">
|
||||
<Calendar className="w-5 h-5 text-slate-400" />
|
||||
Historique
|
||||
</h3>
|
||||
@@ -102,10 +102,10 @@ export function ActivityTimeline({ learnerId }: ActivityTimelineProps) {
|
||||
{data.history.map((day) => (
|
||||
<div key={day.date} className="relative">
|
||||
{/* Date Marker */}
|
||||
<div className="absolute -left-[21px] top-0 w-4 h-4 rounded-full bg-slate-200 border-2 border-white"></div>
|
||||
<div className="absolute -left-[21px] top-0 w-4 h-4 rounded-full bg-slate-200 dark:bg-slate-700 border-2 border-white dark:border-slate-900"></div>
|
||||
|
||||
<div className="mb-4">
|
||||
<h4 className="font-extrabold text-slate-700 capitalize">
|
||||
<h4 className="font-extrabold text-slate-700 dark:text-slate-300 capitalize">
|
||||
{new Date(day.date).toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}
|
||||
</h4>
|
||||
<p className="text-xs font-bold text-slate-400 uppercase tracking-widest">{day.total_minutes} min d'activité</p>
|
||||
@@ -123,17 +123,17 @@ export function ActivityTimeline({ learnerId }: ActivityTimelineProps) {
|
||||
window.location.href = `/revision/${item.id}`;
|
||||
}
|
||||
}}
|
||||
className={`bg-white border border-slate-200 p-4 rounded-lg shadow-sm flex items-center gap-4 hover:border-slate-300 transition-colors ${item.type === 'REVISION' ? 'cursor-pointer hover:bg-slate-50' : ''}`}
|
||||
className={`bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-4 rounded-lg shadow-sm flex items-center gap-4 hover:border-slate-300 dark:hover:border-slate-600 transition-colors ${item.type === 'REVISION' ? 'cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700/50' : ''}`}
|
||||
>
|
||||
<div className={`p-3 rounded-md ${item.type === 'QUIZ' ? 'bg-amber-50 text-amber-500' : 'bg-blue-50 text-blue-500'}`}>
|
||||
<div className={`p-3 rounded-md ${item.type === 'QUIZ' ? 'bg-amber-50 dark:bg-amber-900/20 text-amber-500' : 'bg-blue-50 dark:bg-blue-900/20 text-blue-500'}`}>
|
||||
{item.type === 'QUIZ' ? <CheckCircle className="w-5 h-5" /> : <BookOpen className="w-5 h-5" />}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="font-bold text-slate-900">{item.topic}</p>
|
||||
<p className="text-xs text-slate-500 font-medium">{item.details}</p>
|
||||
<p className="font-bold text-slate-900 dark:text-slate-200">{item.topic}</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 font-medium">{item.details}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-bold text-slate-900 text-sm">{new Date(item.created_at).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}</p>
|
||||
<p className="font-bold text-slate-900 dark:text-slate-200 text-sm">{new Date(item.created_at).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}</p>
|
||||
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest flex items-center justify-end gap-1">
|
||||
<Clock className="w-3 h-3" /> {item.minutes} min
|
||||
</p>
|
||||
|
||||
@@ -32,7 +32,8 @@ export function GamificationWidget() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm relative overflow-hidden">
|
||||
<div className="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl p-6 shadow-sm relative overflow-hidden">
|
||||
|
||||
{/* Background Decorations */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-10 -mt-10"></div>
|
||||
<div className="absolute bottom-0 left-0 w-24 h-24 bg-purple-500/20 rounded-full blur-2xl -ml-5 -mb-5"></div>
|
||||
@@ -40,21 +41,21 @@ export function GamificationWidget() {
|
||||
<div className="relative z-10">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<div className="text-indigo-600 text-xs font-bold uppercase tracking-widest mb-1">Niveau {level}</div>
|
||||
<h3 className="text-2xl font-black text-gray-900">{getLevelTitle(level)}</h3>
|
||||
<div className="text-indigo-600 dark:text-indigo-400 text-xs font-bold uppercase tracking-widest mb-1">Niveau {level}</div>
|
||||
<h3 className="text-2xl font-black text-gray-900 dark:text-white">{getLevelTitle(level)}</h3>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center border border-indigo-100 shadow-sm">
|
||||
<div className="w-12 h-12 bg-indigo-50 dark:bg-slate-700 rounded-xl flex items-center justify-center border border-indigo-100 dark:border-slate-600 shadow-sm">
|
||||
<Trophy className="w-6 h-6 text-yellow-500 fill-yellow-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-2 flex justify-between text-xs font-bold text-gray-500">
|
||||
<div className="mb-2 flex justify-between text-xs font-bold text-gray-500 dark:text-gray-400">
|
||||
<span className="flex items-center gap-1"><Star className="w-3 h-3 text-amber-500" /> {currentXP} XP Totaux</span>
|
||||
<span className="flex items-center gap-1">Prochain niveau: {Math.round(nextLevelStartXP - currentXP)} XP <TrendingUp className="w-3 h-3 text-indigo-500" /></span>
|
||||
<span className="flex items-center gap-1">Prochain niveau: {Math.round(nextLevelStartXP - currentXP)} XP <TrendingUp className="w-3 h-3 text-indigo-500 dark:text-indigo-400" /></span>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar Container */}
|
||||
<div className="h-4 bg-gray-100 rounded-full p-1 border border-gray-200">
|
||||
<div className="h-4 bg-gray-100 dark:bg-slate-700 rounded-full p-1 border border-gray-200 dark:border-slate-600">
|
||||
{/* Active Progress */}
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full shadow-sm transition-all duration-1000 ease-out relative group"
|
||||
|
||||
@@ -42,21 +42,21 @@ export function MasteryWidget({ learnerId }: MasteryWidgetProps = {}) {
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200 h-[400px] relative overflow-hidden">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-slate-700 h-[400px] relative overflow-hidden">
|
||||
{/* Background Decorations */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-10 -mt-10"></div>
|
||||
<div className="absolute bottom-0 left-0 w-24 h-24 bg-purple-500/20 rounded-full blur-2xl -ml-5 -mb-5"></div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<Skeleton className="h-8 w-48 mb-8 bg-gray-100" />
|
||||
<Skeleton className="h-8 w-48 mb-8 bg-gray-100 dark:bg-slate-700" />
|
||||
<div className="space-y-6">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="flex justify-between items-center">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-5 w-32 bg-gray-100" />
|
||||
<Skeleton className="h-3 w-20 bg-gray-50" />
|
||||
<Skeleton className="h-5 w-32 bg-gray-100 dark:bg-slate-700" />
|
||||
<Skeleton className="h-3 w-20 bg-gray-50 dark:bg-slate-800" />
|
||||
</div>
|
||||
<Skeleton className="h-12 w-12 rounded-full bg-gray-100" />
|
||||
<Skeleton className="h-12 w-12 rounded-full bg-gray-100 dark:bg-slate-700" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -67,30 +67,30 @@ export function MasteryWidget({ learnerId }: MasteryWidgetProps = {}) {
|
||||
|
||||
if (stats.length === 0) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200 text-center flex flex-col items-center justify-center opacity-75">
|
||||
<div className="bg-gray-100 p-4 rounded-full mb-3">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-slate-700 text-center flex flex-col items-center justify-center opacity-75">
|
||||
<div className="bg-gray-100 dark:bg-slate-700 p-4 rounded-full mb-3">
|
||||
<span className="text-2xl">📊</span>
|
||||
</div>
|
||||
<h3 className="text-gray-900 font-bold mb-1">Pas encore de résultats</h3>
|
||||
<h3 className="text-gray-900 dark:text-white font-bold mb-1">Pas encore de résultats</h3>
|
||||
<p className="text-sm text-gray-500">Termine un quiz pour voir tes statistiques !</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200 relative overflow-hidden">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-slate-700 relative overflow-hidden">
|
||||
{/* Background Decorations */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-10 -mt-10"></div>
|
||||
<div className="absolute bottom-0 left-0 w-24 h-24 bg-purple-500/20 rounded-full blur-2xl -ml-5 -mb-5"></div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-xl font-bold text-gray-900 border-b border-gray-100 pb-3 mb-4">Maîtrise des Sujets 🧠</h3>
|
||||
<h3 className="text-xl font-bold text-gray-900 dark:text-white border-b border-gray-100 dark:border-slate-700 pb-3 mb-4">Maîtrise des Sujets 🧠</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
{stats.map((item, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors group">
|
||||
<div key={index} className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700/50 transition-colors group">
|
||||
<div className="flex-1">
|
||||
<h4 className="font-bold text-gray-800 text-sm">{item.topic}</h4>
|
||||
<h4 className="font-bold text-gray-800 dark:text-gray-200 text-sm">{item.topic}</h4>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-400 mt-1">
|
||||
<span className="flex items-center gap-1"><Clock className="w-3 h-3" /> {item.last_activity ? new Date(item.last_activity).toLocaleDateString() : '—'}</span>
|
||||
<span>•</span>
|
||||
@@ -101,9 +101,9 @@ export function MasteryWidget({ learnerId }: MasteryWidgetProps = {}) {
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Status Label */}
|
||||
<div className={`px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider hidden sm:block
|
||||
${item.status === 'MASTERED' ? 'bg-emerald-100 text-emerald-600' :
|
||||
item.status === 'REVIEWING' ? 'bg-blue-100 text-blue-600' :
|
||||
'bg-amber-100 text-amber-600'
|
||||
${item.status === 'MASTERED' ? 'bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400' :
|
||||
item.status === 'REVIEWING' ? 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' :
|
||||
'bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400'
|
||||
}
|
||||
`}>
|
||||
{item.status === 'MASTERED' ? 'Maîtrisé' :
|
||||
@@ -121,7 +121,7 @@ export function MasteryWidget({ learnerId }: MasteryWidgetProps = {}) {
|
||||
stroke="currentColor"
|
||||
strokeWidth="3"
|
||||
fill="transparent"
|
||||
className="text-gray-100"
|
||||
className="text-gray-100 dark:text-slate-700"
|
||||
/>
|
||||
<circle
|
||||
cx="20"
|
||||
@@ -140,17 +140,19 @@ export function MasteryWidget({ learnerId }: MasteryWidgetProps = {}) {
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
<span className="absolute text-[9px] font-bold text-gray-600">{Math.round(item.mastery_score || 0)}%</span>
|
||||
<span className="absolute text-[9px] font-bold text-gray-600 dark:text-gray-300">{Math.round(item.mastery_score || 0)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button className="w-full mt-4 py-2 text-sm font-bold text-gray-600 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
|
||||
Voir tous les sujets
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button className="w-full mt-4 py-2 text-sm font-bold text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-slate-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors">
|
||||
Voir tous les sujets
|
||||
</button>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
@@ -134,14 +134,14 @@ export const RecentRevisionsWidget = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-white rounded-[2rem] p-6 shadow-xl shadow-indigo-100/20 border border-slate-100 relative overflow-hidden">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-[2rem] p-6 shadow-xl shadow-indigo-100/20 dark:shadow-none border border-slate-100 dark:border-slate-700 relative overflow-hidden">
|
||||
{/* Background Decorations */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-10 -mt-10"></div>
|
||||
<div className="absolute bottom-0 left-0 w-24 h-24 bg-indigo-500/10 rounded-full blur-2xl -ml-5 -mb-5"></div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h3 className="font-black text-lg text-slate-800 flex items-center gap-2">
|
||||
<h3 className="font-black text-lg text-slate-800 dark:text-white flex items-center gap-2">
|
||||
Mes Cours
|
||||
</h3>
|
||||
</div>
|
||||
@@ -154,7 +154,7 @@ export const RecentRevisionsWidget = () => {
|
||||
key={rev.id}
|
||||
whileHover={{ y: -4 }}
|
||||
whileTap={{ scale: 0.99 }}
|
||||
className="group p-5 bg-slate-50/80 border border-slate-100/80 rounded-[2rem] hover:bg-white hover:border-indigo-100 shadow-sm hover:shadow-xl hover:shadow-indigo-500/10 transition-all cursor-pointer relative"
|
||||
className="group p-5 bg-slate-50/80 dark:bg-slate-700/30 border border-slate-100/80 dark:border-slate-700/50 rounded-[2rem] hover:bg-white dark:hover:bg-slate-700/50 hover:border-indigo-100 dark:hover:border-slate-600 shadow-sm hover:shadow-xl hover:shadow-indigo-500/10 transition-all cursor-pointer relative"
|
||||
onClick={() => navigate(`/play/${rev.id}`)}
|
||||
>
|
||||
{/* Delete Button - Subtle top right */}
|
||||
@@ -195,20 +195,20 @@ export const RecentRevisionsWidget = () => {
|
||||
{rev.subject || 'Général'}
|
||||
</span>
|
||||
</div>
|
||||
<h4 className="font-semibold text-slate-800 text-sm sm:text-base leading-tight">
|
||||
<h4 className="font-semibold text-slate-800 dark:text-slate-200 text-sm sm:text-base leading-tight">
|
||||
{rev.topic}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Section: Progress + Primary Actions */}
|
||||
<div className="flex items-end justify-between pt-3 border-t border-slate-100">
|
||||
<div className="flex items-end justify-between pt-3 border-t border-slate-100 dark:border-slate-700/50">
|
||||
<div className="space-y-1.5 min-w-0">
|
||||
<p className="text-[11px] font-bold text-slate-400 truncate">
|
||||
Ajouté le {new Date(rev.created_at).toLocaleDateString()}
|
||||
</p>
|
||||
<p className="text-[11px] font-black text-indigo-400 uppercase tracking-tight">
|
||||
Progression: <span className="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded-lg border border-indigo-100/50">{rev.current_series}/{rev.total_series} QUIZZ</span>
|
||||
Progression: <span className="text-indigo-600 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/30 px-1.5 py-0.5 rounded-lg border border-indigo-100/50 dark:border-indigo-800/30">{rev.current_series}/{rev.total_series} QUIZZ</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -237,7 +237,7 @@ export const RecentRevisionsWidget = () => {
|
||||
e.stopPropagation();
|
||||
setRestartModal({ isOpen: true, revisionId: rev.id });
|
||||
}}
|
||||
className="w-14 h-14 rounded-2xl bg-slate-50 border-2 border-slate-100 flex items-center justify-center text-slate-400 hover:bg-green-500 hover:text-white hover:border-transparent transition-all shadow-sm group/btn"
|
||||
className="w-14 h-14 rounded-2xl bg-slate-50 dark:bg-slate-700 border-2 border-slate-100 dark:border-slate-600 flex items-center justify-center text-slate-400 hover:bg-green-500 hover:text-white hover:border-transparent transition-all shadow-sm group/btn"
|
||||
title="Recommencer"
|
||||
>
|
||||
<span className="text-2xl group-hover/btn:rotate-180 transition-transform duration-500">🔄</span>
|
||||
@@ -260,275 +260,281 @@ export const RecentRevisionsWidget = () => {
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={() => navigate('/history')}
|
||||
className="w-full mt-6 py-4 px-6 bg-white border-2 border-slate-100 text-indigo-600 rounded-2xl font-black text-sm flex items-center justify-center gap-3 shadow-sm hover:border-indigo-200 hover:bg-indigo-50/30 transition-all active:bg-indigo-50"
|
||||
className="w-full mt-6 py-4 px-6 bg-white dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-700 text-indigo-600 dark:text-indigo-400 rounded-2xl font-black text-sm flex items-center justify-center gap-3 shadow-sm hover:border-indigo-200 dark:hover:border-indigo-900 hover:bg-indigo-50/30 dark:hover:bg-indigo-900/20 transition-all active:bg-indigo-50"
|
||||
>
|
||||
<span>Tout voir</span>
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
|
||||
{/* Restart Confirmation Modal */}
|
||||
<AnimatePresence>
|
||||
{restartModal.isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
|
||||
onClick={() => setRestartModal({ isOpen: false, revisionId: null })}
|
||||
>
|
||||
{
|
||||
restartModal.isOpen && (
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||
animate={{ scale: 1, opacity: 1, y: 0 }}
|
||||
exit={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="bg-white rounded-2xl p-6 shadow-2xl max-w-sm w-full relative overflow-hidden"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
|
||||
onClick={() => setRestartModal({ isOpen: false, revisionId: null })}
|
||||
>
|
||||
<div className="absolute top-0 right-0 p-4">
|
||||
<button
|
||||
onClick={() => setRestartModal({ isOpen: false, revisionId: null })}
|
||||
className="text-slate-400 hover:text-slate-600 transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4 text-amber-600">
|
||||
<AlertTriangle className="w-8 h-8" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-2">Recommencer le cours ?</h3>
|
||||
<p className="text-slate-500 text-sm mb-6 leading-relaxed">
|
||||
Vous allez recommencer ce cours depuis le début. Votre progression actuelle (série en cours) sera réinitialisée.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3 w-full">
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||
animate={{ scale: 1, opacity: 1, y: 0 }}
|
||||
exit={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-2xl max-w-sm w-full relative overflow-hidden border border-transparent dark:border-slate-800"
|
||||
>
|
||||
<div className="absolute top-0 right-0 p-4">
|
||||
<button
|
||||
onClick={() => setRestartModal({ isOpen: false, revisionId: null })}
|
||||
className="flex-1 py-3 px-4 rounded-xl font-bold text-slate-600 bg-slate-100 hover:bg-slate-200 transition-colors"
|
||||
className="text-slate-400 hover:text-slate-600 transition-colors"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
onClick={confirmRestart}
|
||||
disabled={isRestarting}
|
||||
className="flex-1 py-3 px-4 rounded-xl font-bold text-white bg-indigo-600 hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-200 flex items-center justify-center gap-2"
|
||||
>
|
||||
{isRestarting ? (
|
||||
<span className="animate-spin w-4 h-4 border-2 border-white/30 border-t-white rounded-full"></span>
|
||||
) : (
|
||||
<>
|
||||
<span>Recommencer</span>
|
||||
<span className="text-indigo-200">🔄</span>
|
||||
</>
|
||||
)}
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Delete Confirmation Modal */}
|
||||
<AnimatePresence>
|
||||
{deleteModal.isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
|
||||
onClick={() => setDeleteModal({ isOpen: false, revisionId: null })}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||
animate={{ scale: 1, opacity: 1, y: 0 }}
|
||||
exit={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="bg-white rounded-2xl p-6 shadow-2xl max-w-sm w-full relative overflow-hidden ring-4 ring-red-50"
|
||||
>
|
||||
<div className="absolute top-0 right-0 p-4">
|
||||
<button
|
||||
onClick={() => setDeleteModal({ isOpen: false, revisionId: null })}
|
||||
className="text-slate-400 hover:text-slate-600 transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4 text-red-600">
|
||||
<Trash2 className="w-8 h-8" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-2">Supprimer ce cours ?</h3>
|
||||
<p className="text-slate-500 text-sm mb-6 leading-relaxed">
|
||||
Cette action est irréversible. Toutes les données (progression, quiz, notes) seront effacées.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3 w-full">
|
||||
<button
|
||||
onClick={() => setDeleteModal({ isOpen: false, revisionId: null })}
|
||||
className="flex-1 py-3 px-4 rounded-xl font-bold text-slate-600 bg-slate-100 hover:bg-slate-200 transition-colors"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
onClick={confirmDelete}
|
||||
disabled={isDeleting}
|
||||
className="flex-1 py-3 px-4 rounded-xl font-bold text-white bg-red-600 hover:bg-red-700 transition-colors shadow-lg shadow-red-200 flex items-center justify-center gap-2"
|
||||
>
|
||||
{isDeleting ? (
|
||||
<span className="animate-spin w-4 h-4 border-2 border-white/30 border-t-white rounded-full"></span>
|
||||
) : (
|
||||
<>
|
||||
<span>Supprimer</span>
|
||||
<span className="text-red-200">❌</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Summary Modal */}
|
||||
<AnimatePresence>
|
||||
{summaryModal.isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 overflow-y-auto"
|
||||
onClick={() => setSummaryModal(prev => ({ ...prev, isOpen: false }))}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||
animate={{ scale: 1, opacity: 1, y: 0 }}
|
||||
exit={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="bg-[#FDFCF8] rounded-[2.5rem] p-8 shadow-2xl max-w-2xl w-full my-auto relative border border-white/50"
|
||||
>
|
||||
<div className="absolute top-6 right-8">
|
||||
<button
|
||||
onClick={() => setSummaryModal(prev => ({ ...prev, isOpen: false }))}
|
||||
className="w-10 h-10 bg-white shadow-sm border border-slate-100 rounded-full flex items-center justify-center text-slate-400 hover:text-slate-600 transition-all hover:scale-110 active:scale-95"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{summaryModal.loading ? (
|
||||
<div className="py-20 flex flex-col items-center gap-4">
|
||||
<div className="w-12 h-12 border-4 border-indigo-100 border-t-indigo-600 rounded-full animate-spin"></div>
|
||||
<p className="text-slate-400 font-bold animate-pulse">Chargement du résumé...</p>
|
||||
</div>
|
||||
) : summaryModal.data ? (
|
||||
<div className="animate-in fade-in zoom-in-95 duration-300">
|
||||
<div className="mb-8 border-b border-indigo-100/30 pb-6 pr-10">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="px-3 py-1 bg-indigo-50 text-indigo-600 rounded-full text-[10px] font-black uppercase tracking-widest border border-indigo-100">Résumé du cours</span>
|
||||
</div>
|
||||
<h3 className="text-2xl font-black text-slate-800 leading-tight">
|
||||
{summaryModal.data.topic}
|
||||
</h3>
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4 text-amber-600">
|
||||
<AlertTriangle className="w-8 h-8" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-8 max-h-[60vh] overflow-y-auto pr-2 custom-scrollbar">
|
||||
{/* Synthesis Section (Magic Summary) */}
|
||||
{summaryModal.data.synthesis && (
|
||||
<div className="bg-indigo-50 rounded-[2rem] p-6 border border-indigo-100/50 shadow-sm">
|
||||
<h4 className="flex items-center gap-2 text-indigo-900 font-black mb-4 uppercase tracking-tighter text-sm">
|
||||
<Sparkles className="w-5 h-5 text-indigo-500 animate-pulse" />
|
||||
Résumé Magique
|
||||
</h4>
|
||||
<div className="text-slate-700 leading-relaxed font-medium italic whitespace-pre-wrap">
|
||||
{summaryModal.data.synthesis}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<h3 className="text-xl font-bold text-slate-800 dark:text-white mb-2">Recommencer le cours ?</h3>
|
||||
<p className="text-slate-500 dark:text-slate-400 text-sm mb-6 leading-relaxed">
|
||||
Vous allez recommencer ce cours depuis le début. Votre progression actuelle (série en cours) sera réinitialisée.
|
||||
</p>
|
||||
|
||||
{/* Tips & Mnemonics Split Section */}
|
||||
{summaryModal.data.study_tips && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{(() => {
|
||||
try {
|
||||
const allTips: string[] = JSON.parse(summaryModal.data.study_tips);
|
||||
if (!Array.isArray(allTips)) return null;
|
||||
|
||||
const mnemonics = allTips.filter(tip =>
|
||||
tip.toLowerCase().includes('moyen') ||
|
||||
tip.toLowerCase().includes('mémo') ||
|
||||
tip.toLowerCase().includes('phrase') ||
|
||||
tip.length < 50
|
||||
);
|
||||
const regularTips = allTips.filter(tip => !mnemonics.includes(tip));
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Regular Tips Column */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="flex items-center gap-2 text-amber-700 font-black uppercase tracking-tighter text-xs">
|
||||
<Lightbulb className="w-4 h-4 text-amber-500" />
|
||||
Astuces
|
||||
</h4>
|
||||
<div className="space-y-3">
|
||||
{regularTips.length > 0 ? regularTips.map((tip, idx) => (
|
||||
<div key={idx} className="p-4 bg-amber-50/40 border border-amber-100/50 rounded-2xl text-amber-900/80 text-xs font-bold leading-relaxed shadow-sm italic">
|
||||
"{tip}"
|
||||
</div>
|
||||
)) : (
|
||||
<p className="text-xs text-slate-400 italic">Aucun conseil particulier.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mnemonics Column */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="flex items-center gap-2 text-purple-700 font-black uppercase tracking-tighter text-xs">
|
||||
<Brain className="w-4 h-4 text-purple-500" />
|
||||
Mémos
|
||||
</h4>
|
||||
<div className="space-y-3">
|
||||
{mnemonics.length > 0 ? mnemonics.map((memo, idx) => (
|
||||
<div key={idx} className="p-4 bg-purple-50/40 border border-purple-100/50 rounded-2xl text-purple-900/80 text-xs font-black leading-relaxed shadow-sm">
|
||||
{memo}
|
||||
</div>
|
||||
)) : (
|
||||
<p className="text-xs text-slate-400 italic">Pas de mémotechnique.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
} catch (e) { return null; }
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-slate-100 flex justify-center">
|
||||
<div className="flex gap-3 w-full">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSummaryModal(prev => ({ ...prev, isOpen: false }));
|
||||
navigate(`/play/${summaryModal.data.id}`);
|
||||
}}
|
||||
className="px-8 py-4 bg-indigo-600 text-white font-black rounded-2xl shadow-xl shadow-indigo-100 hover:bg-indigo-700 hover:scale-105 transition-all active:scale-95 flex items-center gap-3"
|
||||
onClick={() => setRestartModal({ isOpen: false, revisionId: null })}
|
||||
className="flex-1 py-3 px-4 rounded-xl font-bold text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
|
||||
>
|
||||
<Play className="w-5 h-5 ml-1" />
|
||||
<span>Commencer le Quiz</span>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
onClick={confirmRestart}
|
||||
disabled={isRestarting}
|
||||
className="flex-1 py-3 px-4 rounded-xl font-bold text-white bg-indigo-600 hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-200 flex items-center justify-center gap-2"
|
||||
>
|
||||
{isRestarting ? (
|
||||
<span className="animate-spin w-4 h-4 border-2 border-white/30 border-t-white rounded-full"></span>
|
||||
) : (
|
||||
<>
|
||||
<span>Recommencer</span>
|
||||
<span className="text-indigo-200">🔄</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
</AnimatePresence >
|
||||
|
||||
{/* Delete Confirmation Modal */}
|
||||
<AnimatePresence>
|
||||
{
|
||||
deleteModal.isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
|
||||
onClick={() => setDeleteModal({ isOpen: false, revisionId: null })}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||
animate={{ scale: 1, opacity: 1, y: 0 }}
|
||||
exit={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-2xl max-w-sm w-full relative overflow-hidden ring-4 ring-red-50 dark:ring-red-900/10 border border-transparent dark:border-slate-800"
|
||||
>
|
||||
<div className="absolute top-0 right-0 p-4">
|
||||
<button
|
||||
onClick={() => setDeleteModal({ isOpen: false, revisionId: null })}
|
||||
className="text-slate-400 hover:text-slate-600 transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4 text-red-600">
|
||||
<Trash2 className="w-8 h-8" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-slate-800 dark:text-white mb-2">Supprimer ce cours ?</h3>
|
||||
<p className="text-slate-500 dark:text-slate-400 text-sm mb-6 leading-relaxed">
|
||||
Cette action est irréversible. Toutes les données (progression, quiz, notes) seront effacées.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3 w-full">
|
||||
<button
|
||||
onClick={() => setDeleteModal({ isOpen: false, revisionId: null })}
|
||||
className="flex-1 py-3 px-4 rounded-xl font-bold text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
onClick={confirmDelete}
|
||||
disabled={isDeleting}
|
||||
className="flex-1 py-3 px-4 rounded-xl font-bold text-white bg-red-600 hover:bg-red-700 transition-colors shadow-lg shadow-red-200 flex items-center justify-center gap-2"
|
||||
>
|
||||
{isDeleting ? (
|
||||
<span className="animate-spin w-4 h-4 border-2 border-white/30 border-t-white rounded-full"></span>
|
||||
) : (
|
||||
<>
|
||||
<span>Supprimer</span>
|
||||
<span className="text-red-200">❌</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
</AnimatePresence >
|
||||
|
||||
{/* Summary Modal */}
|
||||
<AnimatePresence>
|
||||
{
|
||||
summaryModal.isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 overflow-y-auto"
|
||||
onClick={() => setSummaryModal(prev => ({ ...prev, isOpen: false }))}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||
animate={{ scale: 1, opacity: 1, y: 0 }}
|
||||
exit={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="bg-[#FDFCF8] dark:bg-slate-900 rounded-[2.5rem] p-8 shadow-2xl max-w-2xl w-full my-auto relative border border-white/50 dark:border-slate-800"
|
||||
>
|
||||
<div className="absolute top-6 right-8">
|
||||
<button
|
||||
onClick={() => setSummaryModal(prev => ({ ...prev, isOpen: false }))}
|
||||
className="w-10 h-10 bg-white dark:bg-slate-800 shadow-sm border border-slate-100 dark:border-slate-700 rounded-full flex items-center justify-center text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-all hover:scale-110 active:scale-95"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{summaryModal.loading ? (
|
||||
<div className="py-20 flex flex-col items-center gap-4">
|
||||
<div className="w-12 h-12 border-4 border-indigo-100 border-t-indigo-600 rounded-full animate-spin"></div>
|
||||
<p className="text-slate-400 font-bold animate-pulse">Chargement du résumé...</p>
|
||||
</div>
|
||||
) : summaryModal.data ? (
|
||||
<div className="animate-in fade-in zoom-in-95 duration-300">
|
||||
<div className="mb-8 border-b border-indigo-100/30 pb-6 pr-10">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="px-3 py-1 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-300 rounded-full text-[10px] font-black uppercase tracking-widest border border-indigo-100 dark:border-indigo-800/30">Résumé du cours</span>
|
||||
</div>
|
||||
<h3 className="text-2xl font-black text-slate-800 dark:text-slate-100 leading-tight">
|
||||
{summaryModal.data.topic}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8 max-h-[60vh] overflow-y-auto pr-2 custom-scrollbar">
|
||||
{/* Synthesis Section (Magic Summary) */}
|
||||
{summaryModal.data.synthesis && (
|
||||
<div className="bg-indigo-50 dark:bg-indigo-900/10 rounded-[2rem] p-6 border border-indigo-100/50 dark:border-indigo-800/30 shadow-sm">
|
||||
<h4 className="flex items-center gap-2 text-indigo-900 dark:text-indigo-300 font-black mb-4 uppercase tracking-tighter text-sm">
|
||||
<Sparkles className="w-5 h-5 text-indigo-500 animate-pulse" />
|
||||
Résumé Magique
|
||||
</h4>
|
||||
<div className="text-slate-700 dark:text-slate-300 leading-relaxed font-medium italic whitespace-pre-wrap">
|
||||
{summaryModal.data.synthesis}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tips & Mnemonics Split Section */}
|
||||
{summaryModal.data.study_tips && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{(() => {
|
||||
try {
|
||||
const allTips: string[] = JSON.parse(summaryModal.data.study_tips);
|
||||
if (!Array.isArray(allTips)) return null;
|
||||
|
||||
const mnemonics = allTips.filter(tip =>
|
||||
tip.toLowerCase().includes('moyen') ||
|
||||
tip.toLowerCase().includes('mémo') ||
|
||||
tip.toLowerCase().includes('phrase') ||
|
||||
tip.length < 50
|
||||
);
|
||||
const regularTips = allTips.filter(tip => !mnemonics.includes(tip));
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Regular Tips Column */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="flex items-center gap-2 text-amber-700 font-black uppercase tracking-tighter text-xs">
|
||||
<Lightbulb className="w-4 h-4 text-amber-500" />
|
||||
Astuces
|
||||
</h4>
|
||||
<div className="space-y-3">
|
||||
{regularTips.length > 0 ? regularTips.map((tip, idx) => (
|
||||
<div key={idx} className="p-4 bg-amber-50/40 border border-amber-100/50 rounded-2xl text-amber-900/80 text-xs font-bold leading-relaxed shadow-sm italic">
|
||||
"{tip}"
|
||||
</div>
|
||||
)) : (
|
||||
<p className="text-xs text-slate-400 italic">Aucun conseil particulier.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mnemonics Column */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="flex items-center gap-2 text-purple-700 font-black uppercase tracking-tighter text-xs">
|
||||
<Brain className="w-4 h-4 text-purple-500" />
|
||||
Mémos
|
||||
</h4>
|
||||
<div className="space-y-3">
|
||||
{mnemonics.length > 0 ? mnemonics.map((memo, idx) => (
|
||||
<div key={idx} className="p-4 bg-purple-50/40 border border-purple-100/50 rounded-2xl text-purple-900/80 text-xs font-black leading-relaxed shadow-sm">
|
||||
{memo}
|
||||
</div>
|
||||
)) : (
|
||||
<p className="text-xs text-slate-400 italic">Pas de mémotechnique.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
} catch (e) { return null; }
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-slate-100 dark:border-slate-700/50 flex justify-center">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSummaryModal(prev => ({ ...prev, isOpen: false }));
|
||||
navigate(`/play/${summaryModal.data.id}`);
|
||||
}}
|
||||
className="px-8 py-4 bg-indigo-600 text-white font-black rounded-2xl shadow-xl shadow-indigo-100 dark:shadow-none hover:bg-indigo-700 hover:scale-105 transition-all active:scale-95 flex items-center gap-3"
|
||||
>
|
||||
<Play className="w-5 h-5 ml-1" />
|
||||
<span>Commencer le Quiz</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
</AnimatePresence >
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in new issue
Block a user