refactor: update UI components and pages with a refreshed visual design and improved styling.
This commit is contained in:
@@ -75,15 +75,15 @@ export default function AnnouncementsPage() {
|
||||
Comunicados del Curso
|
||||
</h2>
|
||||
{/* Search Bar */}
|
||||
<div className="glass p-4 rounded-2xl flex items-center gap-4">
|
||||
<div className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 p-6 rounded-[2rem] flex items-center gap-4 shadow-sm">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search announcements..."
|
||||
placeholder="Find an announcement..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-orange-500/50 transition-all text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500"
|
||||
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl py-3.5 pl-11 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500/50 transition-all text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500 font-bold shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -95,12 +95,12 @@ export default function AnnouncementsPage() {
|
||||
<p className="text-gray-400">Loading announcements...</p>
|
||||
</div>
|
||||
) : filteredAnnouncements.length > 0 ? (
|
||||
<div className="grid gap-6">
|
||||
<div className="grid gap-8">
|
||||
{filteredAnnouncements.map((a) => (
|
||||
<div key={a.id} className={`relative p-6 rounded-2xl border transition-all duration-300 ${a.is_pinned ? 'bg-orange-500/10 border-orange-500/30' : 'bg-slate-50 dark:bg-white/5 border-slate-100 dark:border-white/10 hover:border-slate-200 dark:hover:border-white/20'}`}>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center text-gray-900 dark:text-white font-bold overflow-hidden">
|
||||
<div key={a.id} className={`relative p-8 rounded-[2.5rem] border transition-all duration-300 shadow-sm ${a.is_pinned ? 'bg-orange-50 dark:bg-orange-500/10 border-orange-200 dark:border-orange-500/30' : 'bg-white dark:bg-white/5 border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/10'}`}>
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center text-white font-black overflow-hidden shadow-lg shadow-orange-500/20 border-2 border-white dark:border-white/10">
|
||||
{a.author_avatar ? (
|
||||
<img src={a.author_avatar} alt={a.author_name} className="w-full h-full object-cover" />
|
||||
) : (
|
||||
@@ -108,8 +108,8 @@ export default function AnnouncementsPage() {
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-900 dark:text-white">{a.author_name}</h4>
|
||||
<div className="flex items-center gap-2 text-sm text-slate-500 dark:text-gray-400">
|
||||
<h4 className="font-black text-slate-900 dark:text-white uppercase tracking-tight">{a.author_name}</h4>
|
||||
<div className="flex items-center gap-2 text-[11px] text-slate-400 dark:text-gray-500 font-bold uppercase tracking-widest mt-0.5">
|
||||
<span>{formatDistanceToNow(new Date(a.created_at), { addSuffix: true, locale: es })}</span>
|
||||
{a.cohort_ids && a.cohort_ids.length > 0 && (
|
||||
<>
|
||||
@@ -133,12 +133,12 @@ export default function AnnouncementsPage() {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{a.title}</h3>
|
||||
<p className="text-slate-600 dark:text-gray-300 whitespace-pre-wrap">{a.content}</p>
|
||||
<h3 className="text-2xl font-black text-slate-900 dark:text-white mb-3 uppercase tracking-tight leading-tight">{a.title}</h3>
|
||||
<p className="text-slate-600 dark:text-gray-300 whitespace-pre-wrap leading-relaxed font-medium italic">{a.content}</p>
|
||||
|
||||
{/* Display Target Cohort Names if segmented */}
|
||||
{a.cohort_ids && a.cohort_ids.length > 0 && (
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
<div className="mt-8 flex flex-wrap gap-2 pt-6 border-t border-slate-100 dark:border-white/5">
|
||||
{a.cohort_ids.map(cid => {
|
||||
const cohort = cohorts.find(c => c.id === cid);
|
||||
return (
|
||||
@@ -153,10 +153,12 @@ export default function AnnouncementsPage() {
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-2xl p-20 text-center">
|
||||
<Megaphone className="w-12 h-12 text-slate-400 dark:text-gray-600 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">No announcements found</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400">Start by creating a new announcement for your students.</p>
|
||||
<div className="bg-slate-50 dark:bg-white/5 border-2 border-dashed border-slate-200 dark:border-white/10 rounded-[2.5rem] p-24 text-center shadow-inner">
|
||||
<div className="w-20 h-20 rounded-3xl bg-white dark:bg-white/5 flex items-center justify-center mx-auto mb-6 shadow-sm">
|
||||
<Megaphone className="w-10 h-10 text-slate-400 dark:text-gray-600 opacity-40" />
|
||||
</div>
|
||||
<h3 className="text-xl font-black text-slate-900 dark:text-white mb-2 uppercase tracking-tight">No announcements yet</h3>
|
||||
<p className="text-xs text-slate-400 dark:text-gray-500 font-bold uppercase tracking-widest italic">Start communicating with your student body today.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -212,53 +214,55 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 dark:bg-black/80 backdrop-blur-sm animate-in fade-in duration-300">
|
||||
<div className="bg-white dark:bg-[#1a1c1e] border border-slate-200 dark:border-white/10 rounded-3xl w-full max-w-2xl overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
|
||||
<div className="p-6 border-b border-slate-100 dark:border-white/5 flex items-center justify-between">
|
||||
<h2 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
|
||||
<Megaphone className="w-5 h-5 text-orange-500" />
|
||||
Create New Announcement
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/40 dark:bg-black/80 backdrop-blur-md animate-in fade-in duration-300">
|
||||
<div className="bg-white dark:bg-[#1a1c1e] border border-slate-200 dark:border-white/10 rounded-[2.5rem] w-full max-w-2xl overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200">
|
||||
<div className="p-10 border-b border-slate-100 dark:border-white/5 flex items-center justify-between bg-slate-50/50 dark:bg-transparent">
|
||||
<div>
|
||||
<h2 className="text-2xl font-black flex items-center gap-3 text-slate-900 dark:text-white uppercase tracking-tight">
|
||||
<Megaphone className="w-6 h-6 text-orange-500" />
|
||||
New Announcement
|
||||
</h2>
|
||||
<button onClick={onClose} className="text-slate-400 hover:text-slate-900 dark:text-gray-500 dark:hover:text-white transition-colors">
|
||||
<Plus className="w-6 h-6 rotate-45" />
|
||||
<p className="text-xs text-slate-400 dark:text-gray-500 font-bold uppercase tracking-widest mt-1">Share news and updates with your course</p>
|
||||
</div>
|
||||
<button onClick={onClose} className="p-3 hover:bg-slate-200 dark:hover:bg-white/10 rounded-2xl transition-all group active:scale-95">
|
||||
<Plus size={20} className="text-slate-400 group-hover:text-slate-900 dark:group-hover:text-white transition-colors rotate-45" />
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-bold text-gray-400">Title</label>
|
||||
<form onSubmit={handleSubmit} className="p-10 space-y-8">
|
||||
<div className="space-y-3">
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 ml-1">Topic Title</label>
|
||||
<input
|
||||
required
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-orange-500/50 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500"
|
||||
placeholder="Announcement title"
|
||||
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl px-5 py-4 focus:outline-none focus:ring-2 focus:ring-orange-500/50 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500 font-bold shadow-inner"
|
||||
placeholder="What's this announcement about?"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-bold text-gray-400">Content</label>
|
||||
<div className="space-y-3">
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 ml-1">Message Body</label>
|
||||
<textarea
|
||||
required
|
||||
rows={5}
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-orange-500/50 resize-none text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500"
|
||||
placeholder="Type your message here..."
|
||||
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl px-5 py-4 focus:outline-none focus:ring-2 focus:ring-orange-500/50 resize-none text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500 font-medium italic shadow-inner"
|
||||
placeholder="Type your detailed message here..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="text-sm font-bold text-gray-400 flex items-center gap-2">
|
||||
<Users className="w-4 h-4" />
|
||||
<div className="space-y-4">
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 flex items-center gap-2 ml-1">
|
||||
<Users className="w-4 h-4 text-blue-500" />
|
||||
Target Segments (Optional)
|
||||
</label>
|
||||
<p className="text-xs text-gray-500">Select specific cohorts to receive this announcement. Leave empty to send to all students.</p>
|
||||
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto p-1">
|
||||
<div className="flex flex-wrap gap-2 max-h-40 overflow-y-auto p-1 custom-scrollbar">
|
||||
{cohorts.map(c => (
|
||||
<button
|
||||
key={c.id}
|
||||
type="button"
|
||||
onClick={() => toggleCohort(c.id)}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all border ${selectedCohorts.includes(c.id) ? 'bg-blue-600 border-blue-500 text-white' : 'bg-slate-50 dark:bg-white/5 border-slate-100 dark:border-white/10 text-slate-500 dark:text-gray-400 hover:bg-slate-100 dark:hover:bg-white/10'}`}
|
||||
className={`px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all border shadow-sm active:scale-95 ${selectedCohorts.includes(c.id) ? 'bg-blue-600 border-blue-500 text-white shadow-blue-500/20' : 'bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-400 dark:text-gray-500 hover:border-blue-500/30'}`}
|
||||
>
|
||||
{c.name}
|
||||
</button>
|
||||
@@ -266,29 +270,30 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 p-4 bg-orange-500/5 border border-orange-500/10 rounded-2xl">
|
||||
<div className="flex items-center gap-4 p-5 bg-orange-50 dark:bg-orange-500/5 border border-orange-100 dark:border-orange-500/10 rounded-[2rem] shadow-sm">
|
||||
<div className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="pin"
|
||||
checked={isPinned}
|
||||
onChange={(e) => setIsPinned(e.target.checked)}
|
||||
className="w-5 h-5 rounded border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-orange-600 focus:ring-orange-500/50"
|
||||
className="w-6 h-6 rounded-lg border-slate-300 dark:border-white/10 bg-white dark:bg-black/40 text-orange-600 focus:ring-orange-500/50 shadow-inner"
|
||||
/>
|
||||
<label htmlFor="pin" className="text-sm font-medium text-slate-600 dark:text-gray-300 cursor-pointer">
|
||||
Pin this announcement to the top
|
||||
</div>
|
||||
<label htmlFor="pin" className="text-xs font-black uppercase tracking-widest text-orange-800/80 dark:text-orange-400/80 cursor-pointer">
|
||||
Pin this announcement to the top of the course feed
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 pt-4">
|
||||
<button type="button" onClick={onClose} className="px-6 py-2.5 font-bold text-gray-500 hover:bg-white/5 rounded-xl transition-colors">
|
||||
Cancel
|
||||
<div className="flex justify-end gap-4 pt-6">
|
||||
<button type="button" onClick={onClose} className="px-8 py-3 font-black text-[10px] uppercase tracking-widest text-slate-400 dark:text-gray-500 hover:text-slate-900 dark:hover:text-white transition-all active:scale-95">
|
||||
Discard
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="px-8 py-2.5 bg-orange-600 hover:bg-orange-500 disabled:opacity-50 text-white rounded-xl font-bold flex items-center gap-2 shadow-lg shadow-orange-500/20"
|
||||
disabled={loading || !title || !content}
|
||||
className="px-10 py-3 bg-orange-600 hover:bg-orange-500 disabled:bg-slate-200 dark:disabled:bg-white/5 text-white disabled:text-slate-400 rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl shadow-orange-500/20 transition-all active:scale-95 disabled:shadow-none group flex items-center gap-3"
|
||||
>
|
||||
{loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Megaphone className="w-4 h-4" />}
|
||||
{loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Megaphone className="w-5 h-5 group-hover:scale-110 transition-transform" />}
|
||||
Publish Announcement
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -52,7 +52,7 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
|
||||
|
||||
// Padding for first week
|
||||
for (let i = 0; i < firstDay; i++) {
|
||||
days.push(<div key={`empty-${i}`} className="h-32 border border-white/5 bg-white/2"></div>);
|
||||
days.push(<div key={`empty-${i}`} className="h-32 border-r border-b border-slate-100 dark:border-white/5 bg-slate-50/50 dark:bg-white/2"></div>);
|
||||
}
|
||||
|
||||
// Days of month
|
||||
@@ -61,19 +61,19 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
|
||||
const dayLessons = lessons.filter(l => l.due_date && l.due_date.startsWith(dateStr));
|
||||
|
||||
days.push(
|
||||
<div key={day} className="h-32 border border-white/5 p-2 relative hover:bg-white/5 transition-colors group">
|
||||
<span className="text-sm font-bold text-gray-400">{day}</span>
|
||||
<div className="mt-1 space-y-1 overflow-y-auto max-h-24">
|
||||
<div key={day} className="h-36 border-r border-b border-slate-100 dark:border-white/5 p-3 relative hover:bg-slate-50 dark:hover:bg-white/5 transition-all group cursor-pointer">
|
||||
<span className="text-xs font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest">{day}</span>
|
||||
<div className="mt-2 space-y-1.5 overflow-y-auto max-h-24 custom-scrollbar">
|
||||
{dayLessons.map(lesson => (
|
||||
<div
|
||||
key={lesson.id}
|
||||
className={`text-[10px] p-1 rounded truncate flex items-center gap-1 ${lesson.important_date_type === 'exam' ? 'bg-red-500/20 text-red-400 border border-red-500/30' :
|
||||
lesson.important_date_type === 'assignment' ? 'bg-blue-500/20 text-blue-400 border border-blue-500/30' :
|
||||
lesson.important_date_type === 'live-session' ? 'bg-purple-500/20 text-purple-400 border border-purple-500/30' :
|
||||
'bg-green-500/20 text-green-400 border border-green-500/30'
|
||||
className={`text-[9px] p-1.5 rounded-lg truncate flex items-center gap-1.5 font-bold uppercase tracking-tight shadow-sm border ${lesson.important_date_type === 'exam' ? 'bg-red-50 text-red-700 border-red-100 dark:bg-red-500/20 dark:text-red-400 dark:border-red-500/30' :
|
||||
lesson.important_date_type === 'assignment' ? 'bg-blue-50 text-blue-700 border-blue-100 dark:bg-blue-500/20 dark:text-blue-400 dark:border-blue-500/30' :
|
||||
lesson.important_date_type === 'live-session' ? 'bg-purple-50 text-purple-700 border-purple-100 dark:bg-purple-500/20 dark:text-purple-400 dark:border-purple-500/30' :
|
||||
'bg-emerald-50 text-emerald-700 border-emerald-100 dark:bg-green-500/20 dark:text-green-400 dark:border-green-500/30'
|
||||
}`}
|
||||
>
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-current"></span>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${lesson.important_date_type === 'exam' ? 'bg-red-500' : lesson.important_date_type === 'assignment' ? 'bg-blue-500' : lesson.important_date_type === 'live-session' ? 'bg-purple-500' : 'bg-emerald-500'}`}></span>
|
||||
{lesson.title}
|
||||
</div>
|
||||
))}
|
||||
@@ -115,24 +115,24 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
|
||||
<span className="w-2 h-2 rounded-full bg-red-500"></span> Examen
|
||||
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-red-500 shadow-sm shadow-red-500/20"></span> Examen
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
|
||||
<span className="w-2 h-2 rounded-full bg-blue-500"></span> Tarea
|
||||
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-blue-500 shadow-sm shadow-blue-500/20"></span> Tarea
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
|
||||
<span className="w-2 h-2 rounded-full bg-purple-500"></span> En Vivo
|
||||
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-purple-500 shadow-sm shadow-purple-500/20"></span> En Vivo
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
|
||||
<span className="w-2 h-2 rounded-full bg-green-500"></span> Lección
|
||||
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-sm shadow-emerald-500/20"></span> Lección
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-7 border-t border-l border-white/5 rounded-xl overflow-hidden shadow-2xl overflow-hidden">
|
||||
<div className="grid grid-cols-7 border-t border-l border-slate-200 dark:border-white/5 rounded-[2.5rem] overflow-hidden shadow-sm bg-white dark:bg-white/[0.02]">
|
||||
{['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'].map(day => (
|
||||
<div key={day} className="bg-white/5 py-4 text-center text-xs font-black uppercase tracking-widest text-gray-500 border-r border-b border-white/5">
|
||||
<div key={day} className="bg-slate-50 dark:bg-white/5 py-4 text-center text-xs font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 border-r border-b border-slate-200 dark:border-white/5">
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
@@ -144,26 +144,26 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
|
||||
<AlertCircle className="w-5 h-5 text-blue-500" />
|
||||
Upcoming Deadlines
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{lessons
|
||||
.filter(l => l.due_date && new Date(l.due_date) >= new Date())
|
||||
.sort((a, b) => new Date(a.due_date!).getTime() - new Date(b.due_date!).getTime())
|
||||
.slice(0, 6)
|
||||
.map(lesson => (
|
||||
<div key={lesson.id} className="glass p-4 border-white/5 hover:border-blue-500/30 transition-all group">
|
||||
<div key={lesson.id} className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-6 hover:bg-white dark:hover:bg-white/10 transition-all group shadow-sm">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<div className={`text-[10px] font-black uppercase tracking-widest mb-1 ${lesson.important_date_type === 'exam' ? 'text-red-400' :
|
||||
lesson.important_date_type === 'assignment' ? 'text-blue-400' :
|
||||
'text-green-400'
|
||||
<div className={`text-[10px] font-black uppercase tracking-[0.2em] mb-2 ${lesson.important_date_type === 'exam' ? 'text-red-500' :
|
||||
lesson.important_date_type === 'assignment' ? 'text-blue-500' :
|
||||
'text-emerald-500'
|
||||
}`}>
|
||||
{lesson.important_date_type || 'Activity'}
|
||||
</div>
|
||||
<h5 className="font-bold group-hover:text-blue-400 transition-colors">{lesson.title}</h5>
|
||||
<h5 className="font-bold text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors uppercase tracking-tight">{lesson.title}</h5>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-sm font-black">{new Date(lesson.due_date!).toLocaleDateString()}</div>
|
||||
<div className="text-[10px] text-gray-500 uppercase font-bold">Due Date</div>
|
||||
<div className="text-sm font-black text-slate-900 dark:text-white">{new Date(lesson.due_date!).toLocaleDateString()}</div>
|
||||
<div className="text-[10px] text-slate-400 dark:text-gray-500 uppercase font-black mt-0.5 tracking-tighter">Due Date</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -95,60 +95,70 @@ export default function CourseFilesPage() {
|
||||
/>
|
||||
<label
|
||||
htmlFor="file-upload"
|
||||
className={`flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-sm shadow-md shadow-blue-600/20 transition-all cursor-pointer active:scale-95 ${isUploading ? 'opacity-50 cursor-wait' : ''}`}
|
||||
className={`flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20 transition-all cursor-pointer active:scale-95 ${isUploading ? 'opacity-50 cursor-wait' : ''}`}
|
||||
>
|
||||
{!isUploading && <Upload className="w-4 h-4" />}
|
||||
{isUploading ? `Subiendo ${uploadProgress}%` : 'Subir Archivo'}
|
||||
{isUploading ? `UPLOADING ${uploadProgress}%` : 'SUBIR ARCHIVO'}
|
||||
</label>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
|
||||
<div className="glass rounded-xl overflow-hidden">
|
||||
<table className="w-full text-left">
|
||||
<thead className="bg-white/5 border-b border-white/10 text-gray-400 font-medium">
|
||||
<tr>
|
||||
<th className="p-4">Name</th>
|
||||
<th className="p-4">Type</th>
|
||||
<th className="p-4">Size</th>
|
||||
<th className="p-4">Uploaded</th>
|
||||
<th className="p-4 text-right">Actions</th>
|
||||
<div className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2.5rem] overflow-hidden shadow-sm">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/5">
|
||||
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">Asset Name</th>
|
||||
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">MIME Type</th>
|
||||
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">Size</th>
|
||||
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">Uploaded</th>
|
||||
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-white/5">
|
||||
{isLoading ? (
|
||||
<tr><td colSpan={5} className="p-8 text-center text-gray-500">Loading files...</td></tr>
|
||||
<tr><td colSpan={5} className="p-12 text-center text-slate-400 dark:text-gray-500 font-bold italic animate-pulse">Scanning server for assets...</td></tr>
|
||||
) : assets.length === 0 ? (
|
||||
<tr><td colSpan={5} className="p-12 text-center text-gray-500">No files uploaded yet.</td></tr>
|
||||
<tr>
|
||||
<td colSpan={5} className="p-24 text-center">
|
||||
<div className="flex flex-col items-center justify-center gap-4 text-slate-300 dark:text-gray-600">
|
||||
<div className="w-20 h-20 rounded-3xl bg-slate-50 dark:bg-white/5 border-2 border-dashed border-slate-100 dark:border-white/5 flex items-center justify-center">
|
||||
<FileIcon className="w-10 h-10 opacity-20" />
|
||||
</div>
|
||||
<p className="text-xs font-black uppercase tracking-widest">No assets found for this course</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
assets.map((asset) => (
|
||||
<tr key={asset.id} className="hover:bg-white/5 transition-colors">
|
||||
<td className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<tr key={asset.id} className="hover:bg-slate-50 dark:hover:bg-white/[0.02] transition-colors group">
|
||||
<td className="p-6">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-14 rounded-2xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 flex items-center justify-center shadow-sm group-hover:scale-110 transition-transform">
|
||||
{getIcon(asset.mimetype)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900 dark:text-white">{asset.filename}</div>
|
||||
<div className="text-xs text-blue-400">{getImageUrl(asset.storage_path.replace('uploads/', '/assets/'))}</div>
|
||||
<div className="font-black text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors uppercase tracking-tight text-sm">{asset.filename}</div>
|
||||
<div className="text-[11px] text-blue-500/60 font-mono mt-1 break-all max-w-sm">{getImageUrl(asset.storage_path.replace('uploads/', '/assets/'))}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4 text-gray-400 font-mono text-sm">{asset.mimetype}</td>
|
||||
<td className="p-4 text-gray-400 text-sm">{formatSize(asset.size_bytes)}</td>
|
||||
<td className="p-4 text-gray-400 text-sm">{new Date(asset.created_at).toLocaleDateString()}</td>
|
||||
<td className="p-4 text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<td className="p-6 text-slate-400 dark:text-gray-500 font-mono text-xs uppercase font-bold">{asset.mimetype}</td>
|
||||
<td className="p-6 text-slate-900 dark:text-white font-black text-sm uppercase tracking-tighter">{formatSize(asset.size_bytes)}</td>
|
||||
<td className="p-6 text-slate-400 dark:text-gray-500 text-xs font-bold">{new Date(asset.created_at).toLocaleDateString()}</td>
|
||||
<td className="p-6 text-right">
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
onClick={() => copyToClipboard(asset.storage_path.replace('uploads/', '/assets/'))}
|
||||
title="Copy Internal URL"
|
||||
className="p-2 hover:bg-white/10 rounded-lg transition-colors text-blue-400"
|
||||
className="w-10 h-10 flex items-center justify-center bg-slate-100 dark:bg-white/5 hover:bg-blue-600 hover:text-white rounded-xl transition-all text-blue-500 shadow-sm active:scale-90"
|
||||
>
|
||||
<Copy className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(asset.id)}
|
||||
title="Delete File"
|
||||
className="p-2 hover:bg-white/10 rounded-lg transition-colors text-red-400"
|
||||
className="w-10 h-10 flex items-center justify-center bg-slate-100 dark:bg-white/5 hover:bg-red-600 hover:text-white rounded-xl transition-all text-red-500 shadow-sm active:scale-90"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
@@ -149,9 +149,9 @@ export default function GradebookPage() {
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => setShowBulkEnroll(true)}
|
||||
className="bg-white/5 hover:bg-white/10 border border-white/10 px-4 py-2 rounded-xl flex items-center gap-2 transition-all font-medium text-sm"
|
||||
className="bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 px-4 py-2 rounded-xl flex items-center gap-2 transition-all font-bold text-xs uppercase tracking-widest text-slate-600 dark:text-gray-400 shadow-sm"
|
||||
>
|
||||
<Users size={16} /> Inscripción Masiva
|
||||
<Users size={16} className="text-blue-500" /> Inscripción Masiva
|
||||
</button>
|
||||
<button
|
||||
onClick={exportCSV}
|
||||
@@ -166,66 +166,73 @@ export default function GradebookPage() {
|
||||
|
||||
{/* Bulk Enroll Modal */}
|
||||
{showBulkEnroll && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 dark:bg-black/80 backdrop-blur-sm animate-in fade-in duration-300">
|
||||
<div className="bg-white dark:bg-[#1a1d23] border border-slate-200 dark:border-white/10 rounded-2xl w-full max-w-2xl overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
|
||||
<div className="p-6 border-b border-slate-100 dark:border-white/5 flex items-center justify-between">
|
||||
<h3 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
|
||||
<Users className="text-blue-500 dark:text-blue-400" /> Inscripción Masiva de Estudiantes
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/40 dark:bg-black/80 backdrop-blur-md animate-in fade-in duration-300">
|
||||
<div className="bg-white dark:bg-[#1a1d23] border border-slate-200 dark:border-white/10 rounded-[2.5rem] w-full max-w-2xl overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200">
|
||||
<div className="p-8 border-b border-slate-100 dark:border-white/5 flex items-center justify-between bg-slate-50/50 dark:bg-transparent">
|
||||
<div>
|
||||
<h3 className="text-2xl font-black flex items-center gap-3 text-slate-900 dark:text-white uppercase tracking-tight">
|
||||
<Users className="text-blue-600 dark:text-blue-400" /> Inscripción Masiva
|
||||
</h3>
|
||||
<p className="text-xs text-slate-400 dark:text-gray-500 font-bold uppercase tracking-widest mt-1">Enroll multiple students at once</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowBulkEnroll(false);
|
||||
setBulkResults(null);
|
||||
setBulkEmails("");
|
||||
}}
|
||||
className="p-1 hover:bg-white/5 rounded-lg transition-colors"
|
||||
className="p-3 hover:bg-slate-200 dark:hover:bg-white/10 rounded-2xl transition-all group active:scale-95"
|
||||
>
|
||||
<X size={20} />
|
||||
<X size={20} className="text-slate-400 group-hover:text-slate-900 dark:group-hover:text-white" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-8 space-y-6">
|
||||
<div className="p-8 space-y-8">
|
||||
{!bulkResults ? (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-500 dark:text-gray-400 mb-2">
|
||||
Ingresa las direcciones de correo (separadas por comas o saltos de línea)
|
||||
<label className="block text-xs font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 mb-3">
|
||||
Enter email addresses (separated by commas or new lines)
|
||||
</label>
|
||||
<textarea
|
||||
value={bulkEmails}
|
||||
onChange={(e) => setBulkEmails(e.target.value)}
|
||||
placeholder="student1@example.com student2@example.com"
|
||||
className="w-full h-48 bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl p-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-600 resize-none font-mono"
|
||||
className="w-full h-48 bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-3xl p-5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-600 resize-none font-mono shadow-inner leading-relaxed"
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 flex gap-3 italic text-sm text-blue-400">
|
||||
<AlertTriangle size={18} className="shrink-0" />
|
||||
Los estudiantes deben tener una cuenta en esta organización para ser inscritos.
|
||||
<div className="bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 rounded-2xl p-5 flex gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-white dark:bg-black/20 flex items-center justify-center shrink-0 shadow-sm text-blue-500">
|
||||
<AlertTriangle size={20} />
|
||||
</div>
|
||||
<p className="text-xs text-blue-800/80 dark:text-blue-300 leading-relaxed font-bold uppercase tracking-tight">
|
||||
Students must already have an account in this organization directory to be successfully enrolled into the course.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="bg-green-500/10 border border-green-500/20 rounded-xl p-4 text-center">
|
||||
<div className="text-2xl font-black text-green-400">{bulkResults.successful_emails.length}</div>
|
||||
<div className="text-xs uppercase tracking-widest text-gray-500 font-bold mt-1">Enrolled</div>
|
||||
<div className="space-y-8">
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
<div className="bg-green-50 dark:bg-green-500/10 border border-green-100 dark:border-green-500/20 rounded-[2rem] p-6 text-center shadow-sm">
|
||||
<div className="text-3xl font-black text-green-600 dark:text-green-400">{bulkResults.successful_emails.length}</div>
|
||||
<div className="text-[10px] uppercase tracking-[0.2em] text-green-700/50 dark:text-gray-500 font-black mt-1">Enrolled</div>
|
||||
</div>
|
||||
<div className="bg-yellow-500/10 border border-yellow-500/20 rounded-xl p-4 text-center">
|
||||
<div className="text-2xl font-black text-yellow-400">{bulkResults.already_enrolled_emails.length}</div>
|
||||
<div className="text-xs uppercase tracking-widest text-gray-500 font-bold mt-1">Skipped</div>
|
||||
<div className="bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-100 dark:border-yellow-500/20 rounded-[2rem] p-6 text-center shadow-sm">
|
||||
<div className="text-3xl font-black text-yellow-600 dark:text-yellow-400">{bulkResults.already_enrolled_emails.length}</div>
|
||||
<div className="text-[10px] uppercase tracking-[0.2em] text-yellow-700/50 dark:text-gray-500 font-black mt-1">Skipped</div>
|
||||
</div>
|
||||
<div className="bg-red-500/10 border border-red-500/20 rounded-xl p-4 text-center">
|
||||
<div className="text-2xl font-black text-red-400">{bulkResults.failed_emails.length}</div>
|
||||
<div className="text-xs uppercase tracking-widest text-gray-500 font-bold mt-1">Failed</div>
|
||||
<div className="bg-red-50 dark:bg-red-500/10 border border-red-100 dark:border-red-500/20 rounded-[2rem] p-6 text-center shadow-sm">
|
||||
<div className="text-3xl font-black text-red-600 dark:text-red-400">{bulkResults.failed_emails.length}</div>
|
||||
<div className="text-[10px] uppercase tracking-[0.2em] text-red-700/50 dark:text-gray-500 font-black mt-1">Failed</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{bulkResults.failed_emails.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">Failed Emails (Not Found):</p>
|
||||
<div className="bg-black/20 rounded-xl p-3 text-xs text-red-400 max-h-32 overflow-y-auto font-mono">
|
||||
<div className="space-y-3">
|
||||
<p className="text-[10px] font-black text-red-500/60 dark:text-gray-500 uppercase tracking-[0.2em]">Failed Emails (Not Found):</p>
|
||||
<div className="bg-red-50/50 dark:bg-black/20 border border-red-100 dark:border-white/10 rounded-2xl p-5 text-xs text-red-600 dark:text-red-400 max-h-48 overflow-y-auto font-mono custom-scrollbar leading-relaxed">
|
||||
{bulkResults.failed_emails.map(e => (
|
||||
<div key={e}>{e}</div>
|
||||
<div key={e} className="py-1 border-b border-red-500/5 last:border-0">{e}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@@ -234,21 +241,21 @@ export default function GradebookPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5 flex justify-end gap-3">
|
||||
<div className="p-8 bg-slate-50/50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5 flex justify-end items-center gap-4">
|
||||
{!bulkResults ? (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setShowBulkEnroll(false)}
|
||||
className="px-6 py-2 rounded-xl hover:bg-slate-200 dark:hover:bg-white/5 transition-colors font-medium text-slate-600 dark:text-gray-400"
|
||||
className="px-8 py-3 rounded-2xl hover:bg-slate-200 dark:hover:bg-white/5 transition-all font-black text-[10px] uppercase tracking-widest text-slate-400 dark:text-gray-400 active:scale-95"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleBulkEnroll}
|
||||
disabled={bulkLoading || !bulkEmails.trim()}
|
||||
className="btn-premium px-8 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
className="flex items-center gap-3 px-10 py-3 bg-blue-600 hover:bg-blue-500 disabled:bg-slate-200 dark:disabled:bg-white/5 text-white disabled:text-slate-400 rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20 transition-all active:scale-95 disabled:shadow-none disabled:cursor-not-allowed group"
|
||||
>
|
||||
{bulkLoading ? <Loader2 className="animate-spin w-4 h-4" /> : 'Procesar Inscripción'}
|
||||
{bulkLoading ? <Loader2 className="animate-spin w-4 h-4" /> : <CheckCircle size={16} className="group-hover:scale-110 transition-transform" />} Procesar Inscripción
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
@@ -258,7 +265,7 @@ export default function GradebookPage() {
|
||||
setBulkResults(null);
|
||||
setBulkEmails("");
|
||||
}}
|
||||
className="btn-premium px-8"
|
||||
className="btn-premium px-12 py-3 rounded-2xl font-black text-[10px] uppercase tracking-widest active:scale-95 shadow-xl shadow-blue-500/20"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
@@ -274,41 +281,41 @@ export default function GradebookPage() {
|
||||
Registro de Calificaciones
|
||||
</h2>
|
||||
{/* Controls & Stats */}
|
||||
<div className="flex flex-col md:flex-row gap-6 justify-between items-center bg-white/5 border border-white/10 rounded-2xl p-6">
|
||||
<div className="flex items-center gap-4 w-full md:w-auto">
|
||||
<div className="relative">
|
||||
{/* Controls & Stats */}
|
||||
<div className="flex flex-col md:flex-row gap-8 justify-between items-stretch bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2.5rem] p-8 shadow-sm">
|
||||
<div className="flex flex-col sm:flex-row items-center gap-4 flex-1">
|
||||
<div className="relative w-full sm:w-auto">
|
||||
<Users size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 dark:text-gray-500 pointer-events-none z-10" />
|
||||
<select
|
||||
value={selectedCohortId}
|
||||
onChange={(e) => setSelectedCohortId(e.target.value)}
|
||||
className="appearance-none bg-slate-100 dark:bg-black/20 text-slate-900 dark:text-white border border-slate-200 dark:border-white/10 rounded-xl pl-4 pr-10 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 min-w-[200px]"
|
||||
className="appearance-none bg-slate-50 dark:bg-black/20 text-slate-900 dark:text-white border border-slate-200 dark:border-white/10 rounded-2xl pl-11 pr-10 py-3.5 text-xs font-black uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-blue-500/50 min-w-full sm:min-w-[240px] shadow-inner cursor-pointer"
|
||||
>
|
||||
<option value="">All Cohorts</option>
|
||||
{cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
<div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-500">
|
||||
▼
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative flex-1 md:w-64">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
|
||||
<div className="relative w-full flex-1">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 dark:text-gray-500 w-4 h-4" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search students..."
|
||||
placeholder="Find a student fast..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl pl-10 pr-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-600"
|
||||
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl pl-11 pr-4 py-3.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-600 font-bold shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-8 border-l border-white/10 pl-8">
|
||||
<div className="flex gap-10 border-l border-slate-100 dark:border-white/10 pl-10 items-center">
|
||||
<div>
|
||||
<p className="text-xs font-bold text-slate-500 dark:text-gray-500 uppercase tracking-wider mb-1">Students</p>
|
||||
<p className="text-2xl font-black text-slate-900 dark:text-white">{filteredStudents.length}</p>
|
||||
<p className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] mb-1.5">Total Enrollment</p>
|
||||
<p className="text-3xl font-black text-slate-900 dark:text-white uppercase tracking-tighter">{filteredStudents.length}</p>
|
||||
</div>
|
||||
<div className="w-px h-10 bg-slate-100 dark:bg-white/5" />
|
||||
<div>
|
||||
<p className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Avg Score</p>
|
||||
<p className={`text-2xl font-black ${averageScore < 0.7 ? 'text-orange-400' : 'text-green-400'}`}>
|
||||
<p className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] mb-1.5">Avg Performance</p>
|
||||
<p className={`text-3xl font-black tracking-tighter ${averageScore < 0.7 ? 'text-orange-500' : 'text-blue-600'}`}>
|
||||
{(averageScore * 100).toFixed(0)}%
|
||||
</p>
|
||||
</div>
|
||||
@@ -316,45 +323,45 @@ export default function GradebookPage() {
|
||||
</div>
|
||||
|
||||
{/* Student List */}
|
||||
<div className="rounded-3xl border border-white/10 bg-white/[0.02] overflow-hidden">
|
||||
<div className="rounded-[2.5rem] border border-slate-200 dark:border-white/10 bg-white dark:bg-white/[0.02] overflow-hidden shadow-sm">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-white/5 border-b border-white/5">
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Student</th>
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Progress</th>
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Avg. Score</th>
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Last Active</th>
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500 text-right">Status</th>
|
||||
<tr className="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/5">
|
||||
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">Student</th>
|
||||
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">Learning Progress</th>
|
||||
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">Score Rating</th>
|
||||
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">Activity</th>
|
||||
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 text-right">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-white/5">
|
||||
{filteredStudents.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="p-12 text-center text-gray-600 italic">No students found.</td>
|
||||
</tr>
|
||||
) : filteredStudents.map((s) => (
|
||||
<tr key={s.user_id} className="hover:bg-white/[0.02] transition-colors group">
|
||||
<tr key={s.user_id} className="hover:bg-slate-50 dark:hover:bg-white/[0.02] transition-colors group">
|
||||
<td className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-gray-900 dark:text-white font-bold text-sm">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-black text-lg shadow-lg shadow-blue-500/20">
|
||||
{s.full_name.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-gray-900 dark:text-white group-hover:text-blue-400 transition-colors">{s.full_name}</div>
|
||||
<div className="text-xs text-gray-500 flex items-center gap-1 mt-0.5">
|
||||
<Mail size={10} /> {s.email}
|
||||
<div className="font-black text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors uppercase tracking-tight text-sm">{s.full_name}</div>
|
||||
<div className="text-[11px] text-slate-400 dark:text-gray-500 flex items-center gap-1.5 mt-1 font-medium italic">
|
||||
<Mail size={12} className="text-blue-400" /> {s.email}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-6 align-middle">
|
||||
<div className="w-full max-w-[140px]">
|
||||
<div className="flex justify-between text-xs mb-1 font-bold text-gray-400">
|
||||
<span>{(s.progress * 100).toFixed(0)}%</span>
|
||||
<div className="w-full max-w-[160px]">
|
||||
<div className="flex justify-between text-[10px] mb-2 font-black text-slate-400 uppercase tracking-widest">
|
||||
<span>{(s.progress * 100).toFixed(0)}% Complete</span>
|
||||
</div>
|
||||
<div className="h-1.5 bg-white/10 rounded-full overflow-hidden">
|
||||
<div className="h-2 bg-slate-100 dark:bg-white/10 rounded-full overflow-hidden shadow-inner">
|
||||
<div
|
||||
className="h-full bg-blue-500 rounded-full"
|
||||
className="h-full bg-gradient-to-r from-blue-600 to-blue-400 rounded-full shadow-lg shadow-blue-500/30 transition-all duration-500"
|
||||
style={{ width: `${s.progress * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
@@ -362,31 +369,34 @@ export default function GradebookPage() {
|
||||
</td>
|
||||
<td className="p-6 align-middle">
|
||||
{s.average_score !== null ? (
|
||||
<span className={`font-black ${(s.average_score || 0) >= 0.8 ? 'text-green-400' : (s.average_score || 0) >= 0.6 ? 'text-yellow-400' : 'text-red-400'}`}>
|
||||
<div className="flex flex-col">
|
||||
<span className={`text-lg font-black tracking-tighter ${(s.average_score || 0) >= 0.8 ? 'text-green-600 dark:text-green-400' : (s.average_score || 0) >= 0.6 ? 'text-orange-500' : 'text-red-500'}`}>
|
||||
{((s.average_score || 0) * 100).toFixed(0)}%
|
||||
</span>
|
||||
<span className="text-[9px] font-black uppercase tracking-widest text-slate-400 mt-0.5">Weighted Avg</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-600 text-xs italic">No grades</span>
|
||||
<span className="text-slate-400 dark:text-gray-600 text-[10px] font-black uppercase tracking-widest italic bg-slate-100 dark:bg-white/5 px-2 py-1 rounded-md">Pending</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="p-6 align-middle">
|
||||
<div className="text-sm text-gray-400 flex items-center gap-2">
|
||||
<Clock size={14} />
|
||||
{s.last_active_at ? new Date(s.last_active_at).toLocaleDateString() : 'Never'}
|
||||
<div className="text-xs text-slate-500 dark:text-gray-400 font-bold flex items-center gap-2 uppercase tracking-tight">
|
||||
<Clock size={16} className="text-slate-400" />
|
||||
{s.last_active_at ? new Date(s.last_active_at).toLocaleDateString() : 'No Activity'}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-6 text-right align-middle">
|
||||
{s.progress >= 1 ? (
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
<CheckCircle size={12} /> Completed
|
||||
<span className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-[10px] font-black uppercase tracking-[0.2em] bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20 shadow-sm">
|
||||
<CheckCircle size={12} /> Graduated
|
||||
</span>
|
||||
) : s.last_active_at && (Date.now() - new Date(s.last_active_at).getTime() > 7 * 24 * 60 * 60 * 1000) ? (
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-red-500/10 text-red-400 border border-red-500/20">
|
||||
<AlertCircle size={12} /> Inactive
|
||||
<span className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-[10px] font-black uppercase tracking-[0.2em] bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20 shadow-sm">
|
||||
<AlertCircle size={12} /> At Risk
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
||||
<GraduationCap size={12} /> Active
|
||||
<span className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-[10px] font-black uppercase tracking-[0.2em] bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20 shadow-sm">
|
||||
<GraduationCap size={12} /> Engaged
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
|
||||
@@ -10,7 +10,8 @@ import {
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
TrendingUp,
|
||||
Settings
|
||||
Settings,
|
||||
Loader2
|
||||
} from "lucide-react";
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
@@ -84,13 +85,15 @@ export default function GradingPolicyPage() {
|
||||
pageDescription="Configura los tipos de evaluación y la distribución de pesos del curso."
|
||||
pageActions={
|
||||
<div className={cn(
|
||||
"flex items-center gap-2 px-4 py-2 rounded-xl border transition-all duration-500",
|
||||
isBalanced ? "bg-green-500/10 border-green-500/30 text-green-400 shadow-lg shadow-green-500/5"
|
||||
: "bg-amber-500/10 border-amber-500/30 text-amber-400"
|
||||
"flex items-center gap-3 px-6 py-2.5 rounded-2xl border transition-all duration-500 shadow-sm",
|
||||
isBalanced ? "bg-green-50 dark:bg-green-500/10 border-green-200 dark:border-green-500/30 text-green-600 dark:text-green-400"
|
||||
: "bg-amber-50 dark:bg-amber-500/10 border-amber-200 dark:border-amber-500/30 text-amber-600 dark:text-amber-400"
|
||||
)}>
|
||||
{isBalanced ? <CheckCircle2 className="w-5 h-5" /> : <AlertCircle className="w-5 h-5" />}
|
||||
<span className="font-bold text-lg">{totalWeight}%</span>
|
||||
<span className="text-sm opacity-70">Total Weight</span>
|
||||
{isBalanced ? <CheckCircle2 className="w-5 h-5" /> : <AlertCircle className="w-5 h-5 animate-pulse" />}
|
||||
<div className="flex flex-col items-start leading-none">
|
||||
<span className="font-black text-xl tracking-tighter">{totalWeight}%</span>
|
||||
<span className="text-[9px] font-black uppercase tracking-widest opacity-60">Total Defined</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
@@ -98,37 +101,38 @@ export default function GradingPolicyPage() {
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Categories List */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-gray-500 mb-6 flex items-center gap-2">
|
||||
<Settings className="w-4 h-4" /> Assessment Categories
|
||||
<h2 className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-8 flex items-center gap-2.5">
|
||||
<Settings className="w-4 h-4 text-blue-500" /> Course Grading Structure
|
||||
</h2>
|
||||
|
||||
{categories.length === 0 ? (
|
||||
<div className="bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-2xl p-12 text-center">
|
||||
<TrendingUp className="w-12 h-12 text-slate-400 dark:text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-slate-500 dark:text-gray-400 italic">No grading categories defined yet.</p>
|
||||
<div className="bg-slate-50 dark:bg-white/5 border-2 border-dashed border-slate-200 dark:border-white/10 rounded-[2.5rem] p-24 text-center shadow-inner">
|
||||
<TrendingUp className="w-12 h-12 text-slate-400 dark:text-gray-600 mx-auto mb-6 opacity-40 shadow-sm" />
|
||||
<p className="text-xs font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 italic">No grading categories defined for this curriculum</p>
|
||||
</div>
|
||||
) : (
|
||||
categories.map((cat) => (
|
||||
<div
|
||||
key={cat.id}
|
||||
className="group bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 p-6 rounded-2xl flex items-center justify-between hover:border-blue-500/50 hover:bg-slate-100 dark:hover:bg-white/[0.07] transition-all duration-300"
|
||||
className="group bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 p-6 rounded-3xl flex items-center justify-between hover:bg-slate-50 dark:hover:bg-white/[0.08] transition-all shadow-sm"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-600 dark:text-blue-400 font-bold group-hover:scale-110 transition-transform">
|
||||
{cat.weight}%
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-16 h-16 rounded-2xl bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 flex flex-col items-center justify-center text-blue-600 dark:text-blue-400 shadow-sm group-hover:scale-110 transition-transform">
|
||||
<span className="text-2xl font-black">{cat.weight}</span>
|
||||
<span className="text-[10px] font-black uppercase tracking-tighter">Weight</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white">{cat.name}</h3>
|
||||
<h3 className="text-lg font-black text-slate-900 dark:text-white uppercase tracking-tight">{cat.name}</h3>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-xs text-slate-500 dark:text-gray-500 bg-slate-100 dark:bg-white/5 px-2 py-0.5 rounded-full capitalize">
|
||||
Weight: {cat.weight}%
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-blue-500/60 dark:text-gray-500 bg-slate-100 dark:bg-white/5 px-2.5 py-1 rounded-md">
|
||||
Primary Assessment Category
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDelete(cat.id)}
|
||||
className="p-3 bg-red-500/10 text-red-500 dark:text-red-400 rounded-xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-white transition-all duration-300"
|
||||
className="p-4 bg-red-50 dark:bg-red-500/10 text-red-500 dark:text-red-400 rounded-2xl opacity-0 group-hover:opacity-100 hover:bg-red-600 hover:text-white transition-all shadow-sm active:scale-95"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
@@ -139,20 +143,20 @@ export default function GradingPolicyPage() {
|
||||
|
||||
{/* Add New Category Form */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-slate-50 dark:bg-gradient-to-br dark:from-gray-800/50 dark:to-gray-900/50 p-8 rounded-3xl border border-slate-200 dark:border-white/10 sticky top-8">
|
||||
<h2 className="text-xl font-bold mb-6 flex items-center gap-2 text-slate-900 dark:text-white">
|
||||
<Plus className="w-5 h-5 text-blue-500 dark:text-blue-400" /> New Format
|
||||
<div className="bg-white dark:bg-white/5 p-10 rounded-[2.5rem] border border-slate-200 dark:border-white/10 sticky top-8 shadow-sm">
|
||||
<h2 className="text-2xl font-black mb-8 flex items-center gap-3 text-slate-900 dark:text-white uppercase tracking-tight">
|
||||
<Plus className="w-6 h-6 text-blue-500" /> New Format
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-widest ml-1">Assessment Type</label>
|
||||
<div className="space-y-3">
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 ml-1">Assessment Type</label>
|
||||
<select
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
className="w-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 mt-1.5 focus:outline-none focus:border-blue-500 transition-all text-slate-900 dark:text-gray-100 appearance-none"
|
||||
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl px-5 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-slate-900 dark:text-gray-100 appearance-none font-bold shadow-inner"
|
||||
>
|
||||
<option value="">Select a type...</option>
|
||||
<option value="">Choose assessment...</option>
|
||||
<option value="Continuous Assessment">Continuous Assessment (Min 4)</option>
|
||||
<option value="Midterm">Midterm</option>
|
||||
<option value="Final Test">Final Test</option>
|
||||
@@ -160,26 +164,26 @@ export default function GradingPolicyPage() {
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-widest ml-1">Weight (%)</label>
|
||||
<div className="relative mt-1.5">
|
||||
<div className="space-y-3">
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 ml-1">Weight Value (%)</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="20"
|
||||
value={newWeight || ""}
|
||||
onChange={(e) => setNewWeight(parseInt(e.target.value) || 0)}
|
||||
className="w-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-all text-slate-900 dark:text-gray-100 pl-10"
|
||||
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl px-5 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-slate-900 dark:text-gray-100 pl-11 font-black text-lg shadow-inner"
|
||||
/>
|
||||
<Percent className="w-4 h-4 text-slate-400 dark:text-gray-500 absolute left-4 top-1/2 -translate-y-1/2" />
|
||||
<Percent className="w-4 h-4 text-blue-500 absolute left-4 top-1/2 -translate-y-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={submitting || !newName || newWeight <= 0}
|
||||
className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-slate-200 dark:disabled:bg-gray-700 disabled:text-slate-400 dark:disabled:text-gray-500 text-white font-bold py-4 rounded-2xl mt-4 transition-all shadow-lg shadow-blue-500/20 active:scale-95 flex items-center justify-center gap-2"
|
||||
className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-slate-100 dark:disabled:bg-white/5 disabled:text-slate-400 dark:disabled:text-gray-500 text-white font-black py-4 rounded-[1.5rem] mt-6 transition-all shadow-xl shadow-blue-500/20 active:scale-95 flex items-center justify-center gap-3 uppercase tracking-[0.2em] text-[10px]"
|
||||
>
|
||||
{submitting ? "Adding..." : (
|
||||
{submitting ? <Loader2 className="w-4 h-4 animate-spin" /> : (
|
||||
<>
|
||||
<Plus className="w-5 h-5" />
|
||||
Add Category
|
||||
@@ -188,10 +192,12 @@ export default function GradingPolicyPage() {
|
||||
</button>
|
||||
|
||||
{!isBalanced && (
|
||||
<div className="mt-6 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20 flex gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-amber-600 dark:text-amber-500 shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-amber-800 dark:text-amber-200/80 leading-relaxed">
|
||||
The total weight of all categories must be exactly 100% for the course to be valid for certification. Currently: <strong>{totalWeight}%</strong>
|
||||
<div className="mt-8 p-5 rounded-2xl bg-amber-50 dark:bg-amber-500/10 border border-amber-100 dark:border-amber-500/20 flex gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-white dark:bg-black/20 flex items-center justify-center shrink-0 shadow-sm text-amber-500">
|
||||
<AlertCircle size={20} className="animate-pulse" />
|
||||
</div>
|
||||
<p className="text-[11px] text-amber-900/80 dark:text-amber-200/80 leading-relaxed font-bold uppercase tracking-tight">
|
||||
The total weight must be exactly 100% for certification eligibility. Current sum: <span className="text-amber-600 font-black">{totalWeight}%</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -7,6 +7,7 @@ import { cmsApi, Lesson, Block, GradingCategory, LibraryBlock, Rubric, RubricLev
|
||||
import {
|
||||
Layout,
|
||||
CheckCircle2,
|
||||
Check,
|
||||
Pencil,
|
||||
Save,
|
||||
Trash2,
|
||||
@@ -368,10 +369,10 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
<div className="max-w-4xl mx-auto space-y-12 pb-40 px-4">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 border-b border-slate-200 dark:border-white/5 pb-8">
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2 text-[10px] text-blue-600 dark:text-blue-500 font-bold uppercase tracking-[0.2em]">
|
||||
<Link href={`/courses/${params.id}`} className="hover:text-slate-900 dark:text-white transition-colors">Outline</Link>
|
||||
<div className="flex items-center gap-3 text-[10px] font-black uppercase tracking-[0.2em]">
|
||||
<Link href={`/courses/${params.id}`} className="text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Outline</Link>
|
||||
<span className="text-slate-300 dark:text-gray-700">/</span>
|
||||
<span>Activity</span>
|
||||
<span className="text-blue-600 dark:text-blue-500">Activity Builder</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
{editingId === 'lesson-title' ? (
|
||||
@@ -381,10 +382,10 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSaveLessonTitle()}
|
||||
className="text-4xl font-black bg-transparent border-b-2 border-blue-500 focus:outline-none"
|
||||
className="text-4xl font-black bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.5rem] px-6 py-3 focus:outline-none focus:ring-4 focus:ring-blue-500/20 transition-all text-slate-900 dark:text-white shadow-inner"
|
||||
/>
|
||||
<button onClick={handleSaveLessonTitle} className="text-green-400"><Save className="w-6 h-6" /></button>
|
||||
<button onClick={() => setEditingId(null)} className="text-gray-400"><X className="w-6 h-6" /></button>
|
||||
<button onClick={handleSaveLessonTitle} className="p-3 bg-green-500 text-white rounded-2xl shadow-xl shadow-green-500/20 active:scale-95 transition-all"><Save className="w-6 h-6" /></button>
|
||||
<button onClick={() => setEditingId(null)} className="p-3 bg-slate-100 dark:bg-white/10 text-slate-400 rounded-2xl active:scale-95 transition-all"><X className="w-6 h-6" /></button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-4 group">
|
||||
@@ -402,28 +403,43 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{editMode ? (
|
||||
<>
|
||||
<button onClick={() => setEditMode(false)} className="px-6 py-2.5 glass text-xs font-bold uppercase tracking-widest hover:bg-slate-50 dark:hover:bg-white/5 transition-all text-slate-600 dark:text-white">Discard</button>
|
||||
<button onClick={handleSave} disabled={isSaving} className="btn-premium px-8 py-2.5 min-w-[140px] text-xs font-bold uppercase tracking-widest text-white">
|
||||
{isSaving ? "Saving..." : "Publish Changes"}
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => setEditMode(false)}
|
||||
className="px-8 py-3 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] hover:bg-slate-50 dark:hover:bg-white/10 transition-all text-slate-500 dark:text-white active:scale-95 shadow-sm"
|
||||
>
|
||||
Discard
|
||||
</button>
|
||||
</>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isSaving}
|
||||
className="px-10 py-3 bg-blue-600 text-white rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl shadow-blue-500/30 hover:bg-blue-500 transition-all active:scale-95 disabled:bg-slate-200"
|
||||
>
|
||||
{isSaving ? "Saving..." : "Save Changes"}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button onClick={() => setEditMode(true)} className="px-8 py-3 glass text-xs font-bold uppercase tracking-widest hover:border-blue-500/50 transition-all flex items-center gap-2 group text-slate-700 dark:text-white">
|
||||
<span className="group-hover:rotate-12 transition-transform">✏️</span> Edit Activity
|
||||
<button
|
||||
onClick={() => setEditMode(true)}
|
||||
className="group px-10 py-3.5 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.5rem] text-[10px] font-black uppercase tracking-[0.3em] hover:border-blue-500/50 hover:shadow-xl transition-all flex items-center gap-3 text-slate-700 dark:text-white active:scale-95 shadow-md"
|
||||
>
|
||||
<span className="group-hover:rotate-12 transition-transform text-lg">✏️</span> Edit Activity
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editMode && (
|
||||
<div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 space-y-6 animate-in fade-in slide-in-from-top-4 duration-500">
|
||||
<div className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2.5rem] p-10 space-y-8 animate-in fade-in slide-in-from-top-4 duration-500 shadow-sm hover:shadow-md transition-all">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
|
||||
<span className="text-blue-500">⚖️</span> Grading Configuration
|
||||
<h3 className="text-2xl font-black flex items-center gap-3 text-slate-900 dark:text-white uppercase tracking-tight">
|
||||
<div className="w-12 h-12 rounded-2xl bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-100 dark:border-indigo-500/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400 shadow-sm">
|
||||
<Target size={24} />
|
||||
</div>
|
||||
Grading Policy
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500 dark:text-gray-500 mt-1">Determine if this activity contributes to the final grade</p>
|
||||
<p className="text-sm font-medium text-slate-500 dark:text-gray-500 mt-2 ml-15">Configure how this activity impacts the student gradebook</p>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer group">
|
||||
<input
|
||||
@@ -432,19 +448,22 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
onChange={(e) => setIsGraded(e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-14 h-8 bg-slate-200 dark:bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:start-[4px] after:bg-white after:border-slate-300 dark:after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600 group-hover:after:scale-110 transition-all shadow-sm"></div>
|
||||
<span className="ms-3 text-sm font-bold uppercase tracking-widest text-slate-400 dark:text-gray-400 peer-checked:text-blue-600 dark:peer-checked:text-blue-400 transition-colors">
|
||||
{isGraded ? "Graded" : "Not Graded"}
|
||||
<div className="w-16 h-9 bg-slate-200 dark:bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4.5px] after:start-[5px] after:bg-white after:border-slate-300 dark:after:border-gray-300 after:border after:rounded-full after:h-7 after:w-7 after:transition-all peer-checked:bg-blue-600 group-hover:after:scale-105 transition-all shadow-md"></div>
|
||||
<span className="ms-4 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-400 peer-checked:text-blue-600 dark:peer-checked:text-blue-400 transition-colors">
|
||||
{isGraded ? "Graded" : "Unscored"}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-6 border-t border-slate-200 dark:border-white/5">
|
||||
<div className="flex items-center justify-between pt-10 border-t border-slate-100 dark:border-white/5">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
|
||||
<span className="text-blue-500">🔓</span> Course Preview
|
||||
<h3 className="text-2xl font-black flex items-center gap-3 text-slate-900 dark:text-white uppercase tracking-tight">
|
||||
<div className="w-12 h-12 rounded-2xl bg-amber-50 dark:bg-amber-500/10 border border-amber-100 dark:border-amber-500/20 flex items-center justify-center text-amber-600 dark:text-amber-400 shadow-sm">
|
||||
<Eye size={24} />
|
||||
</div>
|
||||
Discovery Settings
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500 dark:text-gray-500 mt-1">Allow students to view this lesson without being enrolled</p>
|
||||
<p className="text-sm font-medium text-slate-500 dark:text-gray-500 mt-2 ml-15">Control how this lesson appears to prospective students</p>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer group">
|
||||
<input
|
||||
@@ -453,22 +472,23 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
onChange={(e) => setIsPreviewable(e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-14 h-8 bg-slate-200 dark:bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:start-[4px] after:bg-white after:border-slate-300 dark:after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600 group-hover:after:scale-110 transition-all shadow-sm"></div>
|
||||
<span className="ms-3 text-sm font-bold uppercase tracking-widest text-slate-400 dark:text-gray-400 peer-checked:text-blue-600 dark:peer-checked:text-blue-400 transition-colors">
|
||||
{isPreviewable ? "Preview Enabled" : "Preview Disabled"}
|
||||
<div className="w-16 h-9 bg-slate-200 dark:bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4.5px] after:start-[5px] after:bg-white after:border-slate-300 dark:after:border-gray-300 after:border after:rounded-full after:h-7 after:w-7 after:transition-all peer-checked:bg-amber-600 group-hover:after:scale-105 transition-all shadow-md"></div>
|
||||
<span className="ms-4 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-400 peer-checked:text-amber-600 dark:peer-checked:text-amber-400 transition-colors">
|
||||
{isPreviewable ? "Preview Public" : "Private"}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{isGraded && (
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
<div className="space-y-4">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-2 block">Assessment Category</span>
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-2 block">Assessment Category</span>
|
||||
<div className="relative group/select">
|
||||
<select
|
||||
value={selectedCategoryId}
|
||||
onChange={(e) => setSelectedCategoryId(e.target.value)}
|
||||
className="w-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all appearance-none font-bold text-slate-900 dark:text-white"
|
||||
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.25rem] px-5 py-4 text-sm focus:outline-none focus:ring-4 focus:ring-blue-500/20 transition-all appearance-none font-bold text-slate-900 dark:text-white shadow-inner"
|
||||
>
|
||||
<option value="">Select Category...</option>
|
||||
{gradingCategories.map((cat) => (
|
||||
@@ -477,72 +497,87 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="text-[10px] text-slate-500 dark:text-gray-500 italic mt-1 pl-1">
|
||||
Manage categories in <Link href={`/courses/${params.id}/grading`} className="text-blue-600 dark:text-blue-400 hover:underline">Grading Policy</Link>
|
||||
<div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
|
||||
<ChevronDown size={18} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[10px] text-slate-400 dark:text-gray-500 italic mt-2 pl-2 flex items-center gap-2">
|
||||
<div className="w-1 h-1 rounded-full bg-slate-300"></div>
|
||||
Define rules in <Link href={`/courses/${params.id}/grading`} className="text-blue-600 dark:text-blue-400 hover:text-blue-700 font-black uppercase tracking-widest decoration-blue-500/30 underline-offset-4 underline">Grading Policy</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-2 block">Rubric (Optional)</span>
|
||||
<div className="bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl p-4 max-h-48 overflow-y-auto space-y-2">
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-2 block">Evaluation Rubric (Optional)</span>
|
||||
<div className="bg-slate-50 dark:bg-black/20 border border-slate-100 dark:border-white/10 rounded-[1.5rem] p-6 max-h-56 overflow-y-auto space-y-3 shadow-inner">
|
||||
{courseRubrics.length === 0 ? (
|
||||
<p className="text-xs text-slate-400 dark:text-gray-500 italic p-2 text-center">No rubrics found in this course.</p>
|
||||
<div className="flex flex-col items-center justify-center p-8 text-center text-slate-400 dark:text-gray-500 italic">
|
||||
<div className="w-10 h-10 bg-slate-100 dark:bg-white/5 rounded-full flex items-center justify-center mb-3">
|
||||
<Library size={16} />
|
||||
</div>
|
||||
<p className="text-xs font-medium">No rubrics found for this course.</p>
|
||||
</div>
|
||||
) : (
|
||||
courseRubrics.map(rubric => {
|
||||
const isAssigned = assignedRubricIds.includes(rubric.id);
|
||||
return (
|
||||
<label key={rubric.id} className="flex items-center justify-between p-2 rounded-lg hover:bg-slate-200 dark:hover:bg-white/5 transition-all cursor-pointer group">
|
||||
<div className="flex items-center gap-3">
|
||||
<label key={rubric.id} className={`flex items-center justify-between p-4 rounded-xl transition-all cursor-pointer group border ${isAssigned ? 'bg-blue-50 dark:bg-blue-500/10 border-blue-200 dark:border-blue-500/30' : 'bg-white dark:bg-white/5 border-slate-100 dark:border-white/5 hover:border-blue-300 dark:hover:border-blue-500/50 hover:shadow-sm'}`}>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`w-5 h-5 rounded flex items-center justify-center border transition-all ${isAssigned ? 'bg-blue-600 border-blue-600' : 'bg-slate-50 dark:bg-gray-800 border-slate-200 dark:border-gray-700'}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isAssigned}
|
||||
onChange={() => toggleRubric(rubric.id, isAssigned)}
|
||||
className="w-4 h-4 rounded border-slate-300 dark:border-gray-700 bg-slate-100 dark:bg-gray-800 text-blue-500 focus:ring-blue-500"
|
||||
className="hidden"
|
||||
/>
|
||||
<span className="text-sm font-medium text-slate-600 dark:text-gray-200 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{rubric.name}</span>
|
||||
{isAssigned && <Check size={14} className="text-white" />}
|
||||
</div>
|
||||
<span className="text-[10px] font-bold text-slate-500 bg-slate-200 dark:bg-white/5 px-1.5 py-0.5 rounded">{rubric.total_points} pts</span>
|
||||
<span className={`text-sm font-black uppercase tracking-tight transition-colors ${isAssigned ? 'text-blue-700 dark:text-blue-400' : 'text-slate-500 dark:text-gray-400 group-hover:text-blue-600'}`}>
|
||||
{rubric.name}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[9px] font-black text-slate-400 dark:text-gray-500 bg-slate-100 dark:bg-white/10 px-2.5 py-1 rounded-full border border-slate-200 dark:border-white/10 uppercase tracking-tighter">{rubric.total_points} PTS</span>
|
||||
</label>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-500 italic mt-1 pl-1">
|
||||
Manage rubrics in <Link href={`/courses/${params.id}/rubrics`} className="text-blue-400 hover:underline">Rubrics Manager</Link>
|
||||
<div className="text-[10px] text-slate-400 dark:text-gray-500 italic mt-2 pl-2 flex items-center gap-2">
|
||||
<div className="w-1 h-1 rounded-full bg-slate-300"></div>
|
||||
Create more in <Link href={`/courses/${params.id}/rubrics`} className="text-blue-600 dark:text-blue-400 hover:text-blue-700 font-black uppercase tracking-widest decoration-blue-500/30 underline-offset-4 underline">Rubrics Manager</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-6 border-t border-white/5 animate-in fade-in duration-500">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10 pt-10 border-t border-slate-100 dark:border-white/5 animate-in fade-in duration-500">
|
||||
<div className="space-y-4">
|
||||
<label className="block">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-2 block">Maximum Attempts</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-2 block">Maximum Attempts</span>
|
||||
<div className="flex items-center gap-5">
|
||||
<input
|
||||
type="number"
|
||||
value={maxAttempts || ""}
|
||||
onChange={(e) => setMaxAttempts(e.target.value ? parseInt(e.target.value) : null)}
|
||||
placeholder="Unlimited"
|
||||
className="bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all w-32 text-slate-900 dark:text-white"
|
||||
placeholder="∞ Unlimited"
|
||||
className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.25rem] px-5 py-4 text-sm focus:outline-none focus:ring-4 focus:ring-blue-500/20 transition-all w-40 text-slate-900 dark:text-white shadow-inner font-black"
|
||||
/>
|
||||
<span className="text-xs text-slate-500 dark:text-gray-500">Leave empty for unlimited</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-slate-400 dark:text-gray-500">Clear for infinite</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 block mb-2">After Submission</span>
|
||||
<label className="flex items-center gap-3 cursor-pointer group relative">
|
||||
<div className="space-y-3">
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 block mb-2">Self-Correction System</span>
|
||||
<label className="flex items-center gap-4 cursor-pointer group relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allowRetry}
|
||||
onChange={(e) => setAllowRetry(e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-10 h-6 bg-slate-200 dark:bg-gray-700 rounded-full peer peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-4 shadow-sm"></div>
|
||||
<span className="text-sm font-bold text-slate-400 dark:text-gray-400 peer-checked:text-slate-900 dark:peer-checked:text-white transition-colors">Allow Instant Corrections</span>
|
||||
<div className="w-12 h-7 bg-slate-200 dark:bg-gray-700 rounded-full peer peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-[3.5px] after:left-[4px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5 shadow-sm"></div>
|
||||
<span className="text-sm font-black uppercase tracking-tight text-slate-400 dark:text-gray-400 peer-checked:text-blue-700 dark:peer-checked:text-blue-400 transition-colors">Instant Feedback Mode</span>
|
||||
</label>
|
||||
<p className="text-[10px] text-slate-500 dark:text-gray-600 italic">Enables "Check Answer" buttons for individual blocks</p>
|
||||
<p className="text-[11px] font-medium text-slate-400 dark:text-gray-600 italic ml-1">Allows "Validate Answer" buttons in interactive blocks</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -649,44 +684,147 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
|
||||
{
|
||||
editMode && (
|
||||
<div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 space-y-6 animate-in fade-in slide-in-from-top-4 duration-500">
|
||||
<div className="bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-[2.5rem] p-10 space-y-8 animate-in fade-in slide-in-from-top-4 duration-500 shadow-sm hover:shadow-md transition-all">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
|
||||
<span className="text-blue-500">📅</span> Scheduling & Deadlines
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500 dark:text-gray-500 mt-1">Set deadlines and mark important dates for this activity</p>
|
||||
<h3 className="text-2xl font-black flex items-center gap-3 text-slate-900 dark:text-white uppercase tracking-tight">
|
||||
<div className="w-12 h-12 rounded-2xl bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 flex items-center justify-center text-blue-600 dark:text-blue-400 shadow-sm">
|
||||
<Settings size={24} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
Scheduling & Sequencing
|
||||
</h3>
|
||||
<p className="text-sm font-medium text-slate-500 dark:text-gray-500 mt-2 ml-15">Establish temporal constraints and learning paths</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
<div className="space-y-4">
|
||||
<label className="block">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-2 block">Due Date</span>
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-2 block">Final Deadline</span>
|
||||
<input
|
||||
type="date"
|
||||
value={dueDate}
|
||||
onChange={(e) => setDueDate(e.target.value)}
|
||||
className="w-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all font-bold text-slate-900 dark:text-white"
|
||||
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.25rem] px-5 py-4 text-sm focus:outline-none focus:ring-4 focus:ring-blue-500/20 transition-all font-black text-slate-900 dark:text-white shadow-inner"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<label className="block">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-2 block">Date Type</span>
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-2 block">Event Marker Type</span>
|
||||
<div className="relative group/select">
|
||||
<select
|
||||
value={importantDateType}
|
||||
onChange={(e) => setImportantDateType(e.target.value)}
|
||||
className="w-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all appearance-none font-bold text-slate-900 dark:text-white"
|
||||
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.25rem] px-5 py-4 text-sm focus:outline-none focus:ring-4 focus:ring-blue-500/20 transition-all appearance-none font-black text-slate-900 dark:text-white shadow-inner"
|
||||
>
|
||||
<option value="">Standard Activity</option>
|
||||
<option value="exam">Exam</option>
|
||||
<option value="assignment">Assignment</option>
|
||||
<option value="milestone">Milestone</option>
|
||||
<option value="live-session">Live Session</option>
|
||||
<option value="exam">🏆 Final Exam</option>
|
||||
<option value="assignment">📝 Main Assignment</option>
|
||||
<option value="milestone">🚩 Project Milestone</option>
|
||||
<option value="live-session">🎥 Live Training</option>
|
||||
</select>
|
||||
<div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
|
||||
<ChevronDown size={18} />
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/* Prerequisites Sub-Panel inside Scheduling */}
|
||||
<div className="pt-10 border-t border-slate-100 dark:border-white/5">
|
||||
<div className="flex items-center gap-3 mb-8 uppercase tracking-[0.2em] text-[10px] font-black text-slate-400 dark:text-gray-500">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-500 shadow-lg shadow-blue-500/50"></span>
|
||||
Learning Dependency Graph
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-[11px] font-black uppercase tracking-widest text-slate-900 dark:text-gray-200">Prerequisites</h4>
|
||||
<div className="bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-[2rem] p-6 max-h-72 overflow-y-auto space-y-3 shadow-inner">
|
||||
{allLessons.length === 0 ? (
|
||||
<p className="text-xs text-slate-400 italic p-6 text-center">No other modules in focus.</p>
|
||||
) : (
|
||||
allLessons.map(l => {
|
||||
const dep = dependencies.find(d => d.prerequisite_lesson_id === l.id);
|
||||
const isAssigned = !!dep;
|
||||
return (
|
||||
<div key={l.id} className={`p-4 rounded-[1.25rem] transition-all group border ${isAssigned ? 'bg-indigo-50 dark:bg-indigo-500/10 border-indigo-200 dark:border-indigo-500/30' : 'bg-white dark:bg-white/5 border-slate-50 dark:border-white/5 hover:border-indigo-300 shadow-sm'}`}>
|
||||
<label className="flex items-center justify-between cursor-pointer">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`w-5 h-5 rounded flex items-center justify-center border transition-all ${isAssigned ? 'bg-indigo-600 border-indigo-600' : 'bg-slate-50 dark:bg-gray-800 border-slate-200 dark:border-gray-700'}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isAssigned}
|
||||
onChange={() => toggleDependency(l.id, isAssigned)}
|
||||
className="hidden"
|
||||
/>
|
||||
{isAssigned && <Check size={14} className="text-white" />}
|
||||
</div>
|
||||
<span className={`text-sm font-black uppercase tracking-tight transition-colors ${isAssigned ? 'text-indigo-700 dark:text-indigo-400' : 'text-slate-500 dark:text-gray-400 group-hover:text-indigo-600'}`}>
|
||||
{l.title}
|
||||
</span>
|
||||
</div>
|
||||
{l.is_graded && (
|
||||
<span className="text-[8px] font-black uppercase tracking-widest px-2.5 py-1 bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 rounded-lg border border-indigo-500/20">GRADED</span>
|
||||
)}
|
||||
</label>
|
||||
{isAssigned && l.is_graded && (
|
||||
<div className="mt-4 pl-9 flex items-center gap-4 animate-in slide-in-from-left-4 duration-500">
|
||||
<span className="text-[10px] text-slate-400 dark:text-gray-500 font-extrabold uppercase tracking-widest">MIN % SCORE</span>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="100"
|
||||
value={dep.min_score_percentage || 0}
|
||||
onChange={async (e) => {
|
||||
const minScore = parseFloat(e.target.value);
|
||||
try {
|
||||
const updated = await cmsApi.assignDependency(params.lessonId, {
|
||||
prerequisite_lesson_id: l.id,
|
||||
min_score_percentage: minScore
|
||||
});
|
||||
setDependencies(dependencies.map(d => d.id === updated.id ? updated : d));
|
||||
} catch (err) {
|
||||
console.error("Failed to update min score", err);
|
||||
}
|
||||
}}
|
||||
className="w-16 bg-white dark:bg-black/60 border border-slate-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-indigo-600 dark:text-indigo-400 font-black text-center focus:outline-none focus:ring-4 focus:ring-indigo-500/20 shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center gap-6">
|
||||
<div className="p-6 rounded-[2rem] bg-indigo-50 dark:bg-indigo-500/5 border border-indigo-100 dark:border-indigo-500/10 shadow-sm">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-indigo-100 dark:bg-indigo-500/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400 shadow-sm shrink-0">
|
||||
<Layout size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-sm font-black uppercase tracking-tight text-indigo-700 dark:text-indigo-300">Intelligent Flow</h5>
|
||||
<p className="text-[11px] font-medium text-indigo-500/80 dark:text-indigo-300/60 leading-relaxed mt-2">
|
||||
Locked nodes appear with a lock visualizer until prerequisites are cleared by the student.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 rounded-[2rem] bg-emerald-50 dark:bg-emerald-500/5 border border-emerald-100 dark:border-emerald-500/10 shadow-sm">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-emerald-100 dark:bg-emerald-500/20 flex items-center justify-center text-emerald-600 dark:text-emerald-400 shadow-sm shrink-0">
|
||||
<CheckCircle2 size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-sm font-black uppercase tracking-tight text-emerald-700 dark:text-emerald-300">Mastery Gates</h5>
|
||||
<p className="text-[11px] font-medium text-emerald-500/80 dark:text-emerald-300/60 leading-relaxed mt-2">
|
||||
When score thresholds are set, success in prior activities is mandatory for progression.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -694,34 +832,45 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
{/* AI Magic Section */}
|
||||
{
|
||||
editMode && (
|
||||
<div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 space-y-6 animate-in fade-in slide-in-from-top-4 duration-500">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">🪄</span>
|
||||
<div className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2.5rem] p-10 space-y-10 animate-in fade-in slide-in-from-top-4 duration-500 shadow-sm hover:shadow-md transition-all group/ai overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 group-hover/ai:bg-indigo-500/10 transition-colors"></div>
|
||||
<div className="flex items-center gap-4 z-10 relative">
|
||||
<div className="w-14 h-14 rounded-2xl bg-indigo-600 dark:bg-white/10 flex items-center justify-center text-white dark:text-indigo-400 shadow-xl shadow-indigo-500/20">
|
||||
<Brain size={32} className="animate-pulse" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold italic tracking-tight text-slate-900 dark:text-white">AI Content Assistant</h3>
|
||||
<p className="text-xs text-slate-500 dark:text-gray-400 mt-1 uppercase tracking-widest font-bold">Automate your content creation with Local AI</p>
|
||||
<h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase">AI Content Copilot</h3>
|
||||
<p className="text-[10px] text-slate-400 dark:text-gray-400 mt-1 uppercase tracking-[0.2em] font-black">Powered by Neural Processing Unit</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 z-10 relative">
|
||||
<button
|
||||
onClick={handleSummarize}
|
||||
disabled={isGeneratingSummary}
|
||||
className={`p-6 rounded-2xl border transition-all text-left flex flex-col gap-2 shadow-sm ${isGeneratingSummary ? 'bg-indigo-500/20 border-indigo-500/50 text-indigo-600 dark:text-indigo-300 animate-pulse' : summary ? 'bg-green-500/10 border-green-500/30 text-green-600 dark:text-green-400' : 'bg-indigo-500/10 border-indigo-500/30 text-indigo-600 dark:text-indigo-400 hover:border-indigo-500/60'}`}
|
||||
className={`group/btn p-8 rounded-[2rem] border transition-all text-left flex flex-col gap-4 shadow-sm relative overflow-hidden ${isGeneratingSummary ? 'bg-indigo-50 dark:bg-indigo-500/20 border-indigo-200 dark:border-indigo-500/50 text-indigo-600 dark:text-indigo-300 animate-pulse' : summary ? 'bg-indigo-50/50 dark:bg-white/5 border-indigo-200 dark:border-indigo-500/20 text-indigo-600 dark:text-indigo-400 hover:border-indigo-400' : 'bg-white dark:bg-white/5 border-slate-100 dark:border-white/10 text-slate-400 dark:text-indigo-400 hover:border-indigo-500/50 hover:bg-indigo-50 hover:text-indigo-600 dark:hover:bg-indigo-500/10'}`}
|
||||
>
|
||||
<span className="text-xl">{isGeneratingSummary ? '⏳' : '✍️'}</span>
|
||||
<div className="text-[10px] font-black uppercase tracking-widest opacity-80">Summarization</div>
|
||||
<div className="font-bold">{isGeneratingSummary ? 'Generating...' : summary ? 'Update Summary' : 'Generate Summary'}</div>
|
||||
<div className="w-12 h-12 rounded-2xl bg-indigo-100 dark:bg-indigo-500/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400 shadow-sm group-hover/btn:scale-110 transition-transform">
|
||||
{isGeneratingSummary ? '⏳' : <ChevronDown className="rotate-90" />}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-[10px] font-black uppercase tracking-[0.2em] opacity-80">Semantic Analysis</div>
|
||||
<div className="font-black text-xl tracking-tight">{isGeneratingSummary ? 'Processing Content...' : summary ? 'Refresh Summary' : 'Extract Summary'}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleGenerateQuiz}
|
||||
disabled={isGeneratingQuiz}
|
||||
className={`p-6 border rounded-2xl transition-all text-left flex flex-col gap-2 shadow-sm ${isGeneratingQuiz ? 'bg-purple-500/20 border-purple-500/50 text-purple-600 dark:text-purple-300 animate-pulse' : 'bg-purple-500/10 border-purple-500/30 hover:border-purple-500/60 text-purple-600 dark:text-purple-400'}`}
|
||||
className={`group/btn p-8 border rounded-[2rem] transition-all text-left flex flex-col gap-4 shadow-sm relative overflow-hidden ${isGeneratingQuiz ? 'bg-purple-50 dark:bg-purple-500/20 border-purple-200 dark:border-purple-500/50 text-purple-600 dark:text-purple-300 animate-pulse' : 'bg-white dark:bg-white/5 border-slate-100 dark:border-white/10 text-slate-400 dark:text-purple-400 hover:border-purple-500/50 hover:bg-purple-50 hover:text-purple-600 dark:hover:bg-purple-500/10'}`}
|
||||
>
|
||||
<span className="text-xl">{isGeneratingQuiz ? '⏳' : '💡'}</span>
|
||||
<div className="text-[10px] font-black uppercase tracking-widest opacity-80">Assessments</div>
|
||||
<div className="font-bold">{isGeneratingQuiz ? 'Building...' : 'Generate Quiz'}</div>
|
||||
<div className="w-12 h-12 rounded-2xl bg-purple-100 dark:bg-purple-500/20 flex items-center justify-center text-purple-600 dark:text-purple-400 shadow-sm group-hover/btn:scale-110 transition-transform">
|
||||
{isGeneratingQuiz ? '⏳' : <Target />}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-[10px] font-black uppercase tracking-[0.2em] opacity-80">Knowledge Check</div>
|
||||
<div className="font-black text-xl tracking-tight">{isGeneratingQuiz ? 'Building Quiz...' : 'Generate New Test'}</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -731,27 +880,33 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
{/* AI Summary Visualization */}
|
||||
{
|
||||
(summary || editMode) && (
|
||||
<div className="bg-gradient-to-br from-indigo-500/10 to-blue-500/10 border border-indigo-500/20 rounded-3xl p-8 space-y-6 animate-in fade-in duration-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">✨</span>
|
||||
<div className="bg-white dark:bg-white/5 border border-indigo-100 dark:border-indigo-500/20 rounded-[2.5rem] p-10 space-y-8 animate-in fade-in duration-700 shadow-sm relative overflow-hidden group/summary">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-indigo-500/40"></div>
|
||||
<div className="flex items-center justify-between relative z-10">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-indigo-50 dark:bg-indigo-500/10 flex items-center justify-center text-indigo-600 dark:text-indigo-400">
|
||||
<Brain size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold font-black italic tracking-tight text-slate-900 dark:text-white">AI Lesson Summary</h3>
|
||||
<p className="text-xs text-slate-500 dark:text-gray-400 mt-1 uppercase tracking-widest font-bold">Key insights generated from content</p>
|
||||
<h3 className="text-xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase">Neural Insight Summary</h3>
|
||||
<p className="text-[10px] text-slate-400 dark:text-gray-400 mt-1 uppercase tracking-[0.2em] font-black">Synthesized from activity contents</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editMode ? (
|
||||
<textarea
|
||||
value={summary}
|
||||
onChange={(e) => setSummary(e.target.value)}
|
||||
placeholder="A concise summary of the lesson content..."
|
||||
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 text-sm text-slate-700 dark:text-gray-300 focus:outline-none focus:border-blue-500/50 min-h-[120px] transition-all"
|
||||
placeholder="Write a concise executive summary..."
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-[2rem] p-8 text-sm text-slate-700 dark:text-gray-300 focus:outline-none focus:ring-4 focus:ring-indigo-500/10 min-h-[160px] transition-all font-medium leading-relaxed shadow-inner"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-sm text-slate-600 dark:text-gray-400 leading-relaxed italic border-l-2 border-indigo-500/30 pl-6 py-2">
|
||||
"{summary}"
|
||||
<div className="relative">
|
||||
<span className="absolute -left-4 -top-4 text-6xl text-indigo-500/10 font-serif">“</span>
|
||||
<div className="text-lg text-slate-600 dark:text-gray-300 leading-relaxed italic pl-6 font-medium">
|
||||
{summary}
|
||||
</div>
|
||||
<span className="absolute -right-2 -bottom-4 text-6xl text-indigo-500/10 font-serif">”</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -762,40 +917,42 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
{blocks.map((block, index) => (
|
||||
<div key={block.id} className="relative group/block animate-in fade-in slide-in-from-bottom-4 duration-500" style={{ animationDelay: `${index * 100}ms` }}>
|
||||
{editMode && (
|
||||
<div className="absolute -left-16 top-0 h-full flex flex-col items-center gap-2 opacity-100 transition-all">
|
||||
<span className="text-[10px] font-black text-slate-300 dark:text-gray-700 uppercase vertical-text mb-2">Move</span>
|
||||
<div className="absolute -left-20 top-0 h-full flex flex-col items-center gap-3 opacity-0 group-hover/block:opacity-100 transition-all duration-300 -translate-x-4 group-hover/block:translate-x-0">
|
||||
<div className="flex flex-col gap-1.5 p-2 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.5rem] shadow-xl">
|
||||
<button
|
||||
onClick={() => moveBlock(index, 'up')}
|
||||
disabled={index === 0}
|
||||
className="w-10 h-10 rounded-xl bg-slate-100 dark:bg-white/5 text-slate-400 dark:text-gray-400 flex items-center justify-center hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white transition-all border border-slate-200 dark:border-white/10 disabled:opacity-20 disabled:cursor-not-allowed group-hover/block:scale-110 shadow-sm"
|
||||
title="Move Up"
|
||||
className="w-10 h-10 rounded-xl bg-slate-50 dark:bg-white/5 text-slate-400 dark:text-gray-400 flex items-center justify-center hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white transition-all disabled:opacity-20 disabled:cursor-not-allowed shadow-sm border border-slate-100 dark:border-transparent"
|
||||
title="Subir Bloque"
|
||||
>
|
||||
<ChevronUp className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => moveBlock(index, 'down')}
|
||||
disabled={index === blocks.length - 1}
|
||||
className="w-10 h-10 rounded-xl bg-slate-100 dark:bg-white/5 text-slate-400 dark:text-gray-400 flex items-center justify-center hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white transition-all border border-slate-200 dark:border-white/10 disabled:opacity-20 disabled:cursor-not-allowed group-hover/block:scale-110 shadow-sm"
|
||||
title="Move Down"
|
||||
className="w-10 h-10 rounded-xl bg-slate-50 dark:bg-white/5 text-slate-400 dark:text-gray-400 flex items-center justify-center hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white transition-all disabled:opacity-20 disabled:cursor-not-allowed shadow-sm border border-slate-100 dark:border-transparent"
|
||||
title="Bajar Bloque"
|
||||
>
|
||||
<ChevronDown className="w-5 h-5" />
|
||||
</button>
|
||||
<div className="h-4"></div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5 p-2 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.5rem] shadow-xl">
|
||||
<button
|
||||
onClick={() => openSaveToLibraryModal(block)}
|
||||
className="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 flex items-center justify-center hover:bg-emerald-500 hover:text-white transition-all border border-emerald-500/20 group-hover/block:scale-110 shadow-sm"
|
||||
title="Save to Library"
|
||||
className="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400 flex items-center justify-center hover:bg-emerald-600 hover:text-white transition-all border border-emerald-100 dark:border-transparent shadow-sm"
|
||||
title="Guardar en Biblioteca"
|
||||
>
|
||||
<BookMarked className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => removeBlock(block.id)}
|
||||
className="w-10 h-10 rounded-xl bg-red-500/10 text-red-600 dark:text-red-400 flex items-center justify-center hover:bg-red-500 hover:text-white transition-all border border-red-500/20 group-hover/block:scale-110 shadow-sm"
|
||||
title="Remove Block"
|
||||
className="w-10 h-10 rounded-xl bg-red-50 text-red-600 dark:bg-red-500/10 dark:text-red-400 flex items-center justify-center hover:bg-red-600 hover:text-white transition-all border border-red-100 dark:border-transparent shadow-sm"
|
||||
title="Eliminar Bloque"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
<div className="w-0.5 flex-1 bg-white/5 mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -935,120 +1092,68 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
))}
|
||||
|
||||
{editMode && (
|
||||
<div className="pt-12 border-t border-white/5">
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<span className="text-[10px] text-gray-500 font-bold uppercase tracking-[0.3em]">Add Content Block</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => addBlock('description')}
|
||||
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
|
||||
>
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">📄</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Text</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => addBlock('media')}
|
||||
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
|
||||
>
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">🎬</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Media</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => addBlock('video_marker')}
|
||||
className="flex flex-col items-center gap-2 p-6 glass hover:border-indigo-500/50 transition-all group w-32"
|
||||
>
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">⏱️</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Video+Q</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => addBlock('quiz')}
|
||||
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
|
||||
>
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">💡</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Quiz</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => addBlock('fill-in-the-blanks')}
|
||||
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
|
||||
>
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">✍️</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Blanks</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => addBlock('matching')}
|
||||
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
|
||||
>
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">🔗</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Match</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => addBlock('ordering')}
|
||||
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
|
||||
>
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">🔢</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Order</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => addBlock('short-answer')}
|
||||
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
|
||||
>
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">💬</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Short</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => addBlock('document')}
|
||||
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
|
||||
>
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">📚</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Reading</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => addBlock('audio-response')}
|
||||
className="flex flex-col items-center gap-2 p-6 glass hover:border-purple-500/50 transition-all group w-32"
|
||||
>
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">🎤</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Audio</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => addBlock('hotspot')}
|
||||
className="flex flex-col items-center gap-2 p-6 glass hover:border-amber-500/50 transition-all group w-32"
|
||||
>
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">🔍</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Hotspot</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => addBlock('memory-match')}
|
||||
className="flex flex-col items-center gap-2 p-6 glass hover:border-purple-500/50 transition-all group w-32"
|
||||
>
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">🧠</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Memory</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => addBlock('peer-review')}
|
||||
className="flex flex-col items-center gap-2 p-6 glass hover:border-purple-500/50 transition-all group w-32"
|
||||
>
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">👥</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Peer Rev</span>
|
||||
</button>
|
||||
<div className="pt-20 border-t border-slate-100 dark:border-white/5">
|
||||
<div className="flex flex-col items-center gap-12">
|
||||
<div className="text-center space-y-2">
|
||||
<h3 className="text-sm font-black uppercase tracking-[0.4em] text-slate-400 dark:text-gray-500">Infinite Canvas</h3>
|
||||
<p className="text-[10px] font-bold text-slate-300 dark:text-gray-600 uppercase tracking-widest">Select a specialized block to expand your activity</p>
|
||||
</div>
|
||||
|
||||
<div className="w-px h-12 bg-white/5"></div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4 w-full">
|
||||
{[
|
||||
{ type: 'description', icon: '📄', label: 'Text Block', color: 'blue' },
|
||||
{ type: 'media', icon: '🎬', label: 'Hyper Media', color: 'indigo' },
|
||||
{ type: 'video_marker', icon: '⏱️', label: 'Interactive', color: 'violet' },
|
||||
{ type: 'document', icon: '📚', label: 'Resources', color: 'slate' },
|
||||
{ type: 'quiz', icon: '💡', label: 'Knowledge', color: 'blue' },
|
||||
{ type: 'fill-in-the-blanks', icon: '✍️', label: 'Syntax', color: 'indigo' },
|
||||
{ type: 'matching', icon: '🔗', label: 'Relations', color: 'violet' },
|
||||
{ type: 'ordering', icon: '🔢', label: 'Sequence', color: 'blue' },
|
||||
{ type: 'short-answer', icon: '💬', label: 'Open-Ended', color: 'indigo' },
|
||||
{ type: 'hotspot', icon: '🔍', label: 'Hotspot', color: 'amber' },
|
||||
{ type: 'audio-response', icon: '🎤', label: 'Phonetic', color: 'purple' },
|
||||
{ type: 'memory-match', icon: '🧠', label: 'Cognitive', color: 'fuchsia' },
|
||||
{ type: 'peer-review', icon: '👥', label: 'Peer Review', color: 'rose' },
|
||||
].map((item) => (
|
||||
<button
|
||||
key={item.type}
|
||||
onClick={() => addBlock(item.type as any)}
|
||||
className="flex flex-col items-center justify-center gap-3 p-6 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-[2rem] hover:border-blue-500/50 hover:shadow-xl hover:-translate-y-1 transition-all active:scale-95 group shadow-sm shrink-0"
|
||||
>
|
||||
<span className="text-3xl group-hover:scale-125 transition-transform duration-300">{item.icon}</span>
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="text-[8px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 group-hover:text-blue-600 transition-colors uppercase">{item.label}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-center gap-6 pt-8">
|
||||
<button
|
||||
onClick={handleGenerateQuiz}
|
||||
disabled={isGeneratingQuiz}
|
||||
className="flex flex-col items-center gap-2 p-6 bg-gradient-to-b from-indigo-500/20 to-blue-500/20 border border-indigo-500/30 hover:border-indigo-500/60 rounded-3xl transition-all group w-36"
|
||||
className="px-10 py-5 bg-gradient-to-br from-indigo-600 to-blue-700 text-white rounded-[2rem] shadow-2xl shadow-blue-500/40 hover:scale-105 active:scale-95 transition-all flex items-center gap-4 group disabled:opacity-50"
|
||||
>
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">{isGeneratingQuiz ? '⏳' : '✨'}</span>
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-indigo-400">{isGeneratingQuiz ? 'Building...' : 'AI Builder'}</span>
|
||||
<div className="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center text-xl group-hover:rotate-12 transition-transform">
|
||||
{isGeneratingQuiz ? '⏳' : '✨'}
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="text-[10px] font-black uppercase tracking-[0.2em] opacity-70">Neural Engine</div>
|
||||
<div className="font-black text-sm uppercase tracking-wider">{isGeneratingQuiz ? 'Constructing...' : 'AI Builder'}</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Browse Library */}
|
||||
<button
|
||||
onClick={() => setIsLibraryPanelOpen(true)}
|
||||
className="flex flex-col items-center gap-2 p-6 bg-gradient-to-b from-emerald-500/20 to-teal-500/20 border border-emerald-500/30 hover:border-emerald-500/60 rounded-3xl transition-all group w-36"
|
||||
className="px-10 py-5 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-900 dark:text-white rounded-[2rem] shadow-xl hover:border-emerald-500/50 hover:bg-emerald-50 dark:hover:bg-emerald-500/10 active:scale-95 transition-all flex items-center gap-4 group"
|
||||
>
|
||||
<Library className="w-6 h-6 text-emerald-400 group-hover:scale-110 transition-transform" />
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-emerald-400">Library</span>
|
||||
<div className="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-600 dark:text-emerald-400 group-hover:scale-110 transition-transform">
|
||||
<Library size={24} />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">Personal Vault</div>
|
||||
<div className="font-black text-sm uppercase tracking-wider">Cloud Library</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1059,67 +1164,75 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
<Modal
|
||||
isOpen={isAIQuizModalOpen}
|
||||
onClose={() => !isGeneratingQuiz && setIsAIQuizModalOpen(false)}
|
||||
title="AI Quiz Customization"
|
||||
title="AI Neural Configuration"
|
||||
>
|
||||
<form onSubmit={handleConfirmGenerateQuiz} className="space-y-6">
|
||||
<div className="p-4 rounded-xl bg-purple-500/5 border border-purple-500/10">
|
||||
<p className="text-xs text-purple-300 leading-relaxed font-medium">
|
||||
Tell the AI what to focus on and what type of questions you prefer.
|
||||
<form onSubmit={handleConfirmGenerateQuiz} className="space-y-8 p-4">
|
||||
<div className="p-6 rounded-[1.5rem] bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-100 dark:border-indigo-500/20 flex gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-white dark:bg-white/10 flex items-center justify-center text-indigo-600 dark:text-indigo-400 shadow-sm shrink-0">
|
||||
<Brain size={20} />
|
||||
</div>
|
||||
<p className="text-xs text-indigo-700 dark:text-indigo-300 leading-relaxed font-black uppercase tracking-tight">
|
||||
Define the thematic focus. The model will synthesize activity blocks based on your curriculum constraints.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2">
|
||||
Focus / Context
|
||||
<div className="space-y-3">
|
||||
<label className="block text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">
|
||||
Thematic Context / Focus Area
|
||||
</label>
|
||||
<textarea
|
||||
autoFocus
|
||||
value={aiQuizContext}
|
||||
onChange={(e) => setAiQuizContext(e.target.value)}
|
||||
placeholder="e.g. Focus on past tense verbs, or use vocabulary related to travel..."
|
||||
className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-purple-500 transition-all text-gray-900 dark:text-white h-24 resize-none"
|
||||
placeholder="e.g. Focus on cognitive load management, or prioritize practical applications..."
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-[1.5rem] p-6 text-sm focus:outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all text-slate-900 dark:text-white h-32 resize-none shadow-inner font-medium"
|
||||
disabled={isGeneratingQuiz}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2">
|
||||
Question Type
|
||||
<div className="space-y-3">
|
||||
<label className="block text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">
|
||||
Block Architecture
|
||||
</label>
|
||||
<div className="relative group/select">
|
||||
<select
|
||||
value={aiQuizType}
|
||||
onChange={(e) => setAiQuizType(e.target.value)}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-purple-500 transition-all text-gray-900 dark:text-white appearance-none font-bold"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all text-slate-900 dark:text-white appearance-none font-black uppercase tracking-tight shadow-inner"
|
||||
disabled={isGeneratingQuiz}
|
||||
>
|
||||
<option value="multiple-choice">Multiple Choice</option>
|
||||
<option value="true-false">True / False</option>
|
||||
<option value="vocabulary">Vocabulary Focus</option>
|
||||
<option value="grammar">Grammar Focus</option>
|
||||
<option value="multiple-choice">Multiple Choice Matrix</option>
|
||||
<option value="true-false">Binary Validation (T/F)</option>
|
||||
<option value="vocabulary">Lexical Focus / Vocab</option>
|
||||
<option value="grammar">Structural / Grammar Focus</option>
|
||||
</select>
|
||||
<div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
|
||||
<ChevronDown size={18} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-2">
|
||||
<div className="flex gap-4 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsAIQuizModalOpen(false)}
|
||||
disabled={isGeneratingQuiz}
|
||||
className="flex-1 px-4 py-2.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg transition-all text-sm font-medium"
|
||||
className="flex-1 px-8 py-4 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl transition-all text-[10px] font-black uppercase tracking-[0.2em] text-slate-500 hover:bg-slate-50 active:scale-95 shadow-sm"
|
||||
>
|
||||
Cancel
|
||||
Abort
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isGeneratingQuiz}
|
||||
className="flex-[2] px-4 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-gray-900 dark:text-white rounded-lg transition-all shadow-lg shadow-purple-500/20 font-bold text-sm flex items-center justify-center gap-2"
|
||||
className="flex-[2] px-8 py-4 bg-indigo-600 text-white rounded-2xl transition-all shadow-xl shadow-indigo-500/40 font-black text-[10px] uppercase tracking-[0.2em] flex items-center justify-center gap-3 hover:bg-indigo-500 active:scale-95 disabled:bg-slate-300"
|
||||
>
|
||||
{isGeneratingQuiz ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
|
||||
Generating...
|
||||
Synthesizing...
|
||||
</>
|
||||
) : (
|
||||
"Generate Quiz"
|
||||
"Initiate Generation"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -228,7 +228,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
pageTitle="Editor de Curso"
|
||||
pageDescription={`Diseña la estructura de tu curso y el contenido de las lecciones.`}
|
||||
pageActions={
|
||||
<>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={async () => {
|
||||
try {
|
||||
@@ -240,105 +240,108 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
alert("Failed to start preview.");
|
||||
}
|
||||
}}
|
||||
className="flex items-center gap-2 px-6 py-2.5 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-xl text-sm font-bold transition-all active:scale-95 text-slate-700 dark:text-white shadow-sm"
|
||||
className="flex items-center gap-3 px-6 py-3 bg-white dark:bg-white/5 hover:bg-slate-50 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-2xl text-[10px] uppercase tracking-widest font-black transition-all active:scale-95 text-slate-600 dark:text-white shadow-sm"
|
||||
>
|
||||
<PlayCircle size={18} /> Previsualizar
|
||||
<PlayCircle size={20} className="text-blue-500" /> PREVIEW
|
||||
</button>
|
||||
<button
|
||||
onClick={handlePublish}
|
||||
disabled={saving}
|
||||
className={`flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-sm shadow-md shadow-blue-600/20 transition-all active:scale-95 ${saving ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
className={`flex items-center gap-3 px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20 transition-all active:scale-95 ${saving ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
{saving ? (
|
||||
<div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" />
|
||||
<div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
|
||||
) : (
|
||||
<Send size={18} />
|
||||
)}
|
||||
{saving ? 'Publicando...' : 'Publicar Curso'}
|
||||
{saving ? 'PUBLISHING...' : 'PUBLISH COURSE'}
|
||||
</button>
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{modules.map((module: FullModule, mIndex: number) => (
|
||||
<div key={module.id} className="glass rounded-xl overflow-hidden border-slate-200 dark:border-white/5 shadow-sm">
|
||||
<div className="bg-slate-50 dark:bg-white/5 px-6 py-4 flex justify-between items-center border-b border-slate-200 dark:border-white/5">
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<div className="flex flex-col">
|
||||
<div key={module.id} className="bg-white dark:bg-white/5 rounded-[2.5rem] overflow-hidden border border-slate-200 dark:border-white/10 shadow-sm group/module">
|
||||
<div className="bg-slate-50 dark:bg-white/5 px-8 p-6 flex justify-between items-center border-b border-slate-200 dark:border-white/5">
|
||||
<div className="flex items-center gap-6 flex-1">
|
||||
<div className="flex flex-col gap-1">
|
||||
<button
|
||||
onClick={() => handleReorderModule(mIndex, 'up')}
|
||||
disabled={mIndex === 0}
|
||||
className="text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0 transition-colors"
|
||||
className="p-1 text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0 transition-colors bg-white dark:bg-white/5 rounded-md border border-slate-100 dark:border-white/5"
|
||||
>
|
||||
<ChevronUp className="w-4 h-4" />
|
||||
<ChevronUp className="w-3 h-3" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleReorderModule(mIndex, 'down')}
|
||||
disabled={mIndex === modules.length - 1}
|
||||
className="text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0 transition-colors"
|
||||
className="p-1 text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0 transition-colors bg-white dark:bg-white/5 rounded-md border border-slate-100 dark:border-white/5"
|
||||
>
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
<ChevronDown className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
<GripVertical className="text-slate-400 dark:text-gray-600 w-5 h-5 cursor-grab active:cursor-grabbing" />
|
||||
<GripVertical className="text-slate-300 dark:text-gray-600 w-5 h-5 cursor-grab active:cursor-grabbing hover:text-blue-500 transition-colors" />
|
||||
|
||||
{editingId === module.id ? (
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<div className="flex items-center gap-3 flex-1 max-w-2xl">
|
||||
<input
|
||||
autoFocus
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(module.id, 'module')}
|
||||
className="bg-slate-100 dark:bg-black/40 border border-blue-500/50 rounded px-3 py-1 flex-1 text-slate-900 dark:text-white focus:outline-none"
|
||||
className="bg-white dark:bg-black/40 border border-blue-500/50 rounded-2xl px-5 py-3 flex-1 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/30 text-lg font-black uppercase tracking-tight shadow-inner"
|
||||
/>
|
||||
<button onClick={() => handleSaveTitle(module.id, 'module')} className="text-green-400 hover:text-green-300">
|
||||
<button onClick={() => handleSaveTitle(module.id, 'module')} className="w-12 h-12 flex items-center justify-center bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-xl hover:bg-blue-600 hover:text-white transition-all shadow-lg shadow-blue-500/10">
|
||||
<Save className="w-5 h-5" />
|
||||
</button>
|
||||
<button onClick={() => setEditingId(null)} className="text-gray-400 hover:text-red-400">
|
||||
<button onClick={() => setEditingId(null)} className="w-12 h-12 flex items-center justify-center bg-red-50 dark:bg-red-500/10 text-red-500 dark:text-red-400 rounded-xl hover:bg-red-600 hover:text-white transition-all">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-3 group flex-1">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 mb-0.5">Module {mIndex + 1}</span>
|
||||
<span
|
||||
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
|
||||
className="font-bold text-lg text-blue-600 dark:text-blue-400 cursor-pointer hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
|
||||
className="font-black text-2xl text-slate-900 dark:text-white cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 transition-colors uppercase tracking-tight"
|
||||
>
|
||||
{module.title || `Module ${module.position}`}
|
||||
{module.title || `Untitled Section`}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
|
||||
className="opacity-0 group-hover:opacity-100 text-slate-400 hover:text-slate-900 dark:text-white transition-opacity"
|
||||
className="opacity-0 group-hover:opacity-100 p-2 text-slate-400 hover:text-blue-600 dark:text-gray-600 transition-all active:scale-90"
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => handleDeleteModule(module.id)}
|
||||
className="text-slate-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
|
||||
className="w-11 h-11 flex items-center justify-center bg-transparent border border-transparent hover:border-red-500/30 hover:bg-red-50 dark:hover:bg-red-500/10 text-slate-300 hover:text-red-600 transition-all rounded-xl active:scale-95"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 space-y-3">
|
||||
<div className="p-10 space-y-4 bg-slate-50/30 dark:bg-transparent">
|
||||
{module.lessons.map((lesson: Lesson, lIndex: number) => (
|
||||
<div key={lesson.id} className="flex items-center gap-3 group/row">
|
||||
<div className="flex flex-col opacity-0 group-hover/row:opacity-100 transition-opacity">
|
||||
<div key={lesson.id} className="flex items-center gap-5 group/row">
|
||||
<div className="flex flex-col gap-1 opacity-0 group-hover/row:opacity-100 transition-all scale-95 group-hover/row:scale-100">
|
||||
<button
|
||||
onClick={() => handleReorderLesson(module.id, lIndex, 'up')}
|
||||
disabled={lIndex === 0}
|
||||
className="text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0"
|
||||
className="p-1 text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0 bg-white dark:bg-white/5 rounded-md border border-slate-100 dark:border-white/5"
|
||||
>
|
||||
<ChevronUp className="w-3 h-3" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleReorderLesson(module.id, lIndex, 'down')}
|
||||
disabled={lIndex === module.lessons.length - 1}
|
||||
className="text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0"
|
||||
className="p-1 text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0 bg-white dark:bg-white/5 rounded-md border border-slate-100 dark:border-white/5"
|
||||
>
|
||||
<ChevronDown className="w-3 h-3" />
|
||||
</button>
|
||||
@@ -346,38 +349,38 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
|
||||
<div className="flex-1">
|
||||
{editingId === lesson.id ? (
|
||||
<div className="flex items-center gap-2 glass border-blue-500/30 p-2 rounded-lg bg-slate-50 dark:bg-black/20 shadow-inner">
|
||||
<div className="flex items-center gap-3 bg-white dark:bg-black/20 border-2 border-blue-500/50 p-3 rounded-2xl shadow-inner animate-in slide-in-from-left-2 duration-200">
|
||||
<input
|
||||
autoFocus
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(lesson.id, 'lesson')}
|
||||
className="bg-transparent border-none flex-1 text-slate-900 dark:text-white focus:outline-none font-medium"
|
||||
className="bg-transparent border-none flex-1 text-slate-900 dark:text-white focus:outline-none font-black uppercase tracking-tight"
|
||||
/>
|
||||
<button onClick={() => handleSaveTitle(lesson.id, 'lesson')} className="text-green-600 dark:text-green-400">
|
||||
<button onClick={() => handleSaveTitle(lesson.id, 'lesson')} className="w-9 h-9 flex items-center justify-center bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-xl hover:bg-blue-600 hover:text-white transition-all">
|
||||
<Save className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={() => setEditingId(null)} className="text-slate-400 dark:text-gray-400">
|
||||
<button onClick={() => setEditingId(null)} className="w-9 h-9 flex items-center justify-center bg-red-50 dark:bg-red-500/10 text-red-500 dark:text-red-400 rounded-xl hover:bg-red-600 hover:text-white transition-all">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-between glass border-slate-200 dark:border-white/5 p-4 rounded-xl hover:bg-slate-50 dark:hover:bg-white/10 hover:border-blue-500/30 transition-all cursor-pointer group/lesson shadow-sm">
|
||||
<Link href={`/courses/${params.id}/lessons/${lesson.id}`} className="flex-1 flex items-center gap-4">
|
||||
<div className="p-2 bg-blue-600/10 dark:bg-blue-500/20 rounded-lg text-blue-600 dark:text-blue-400 group-hover/lesson:scale-110 transition-transform">
|
||||
{lesson.content_type === 'video' ? <PlayCircle className="w-5 h-5" /> : <FileText className="w-5 h-5" />}
|
||||
<div className="flex items-center justify-between bg-white dark:bg-black/20 border border-slate-200 dark:border-white/5 p-5 rounded-[1.5rem] hover:bg-slate-50 dark:hover:bg-white/10 hover:border-blue-500/30 transition-all cursor-pointer group/lesson shadow-sm">
|
||||
<Link href={`/courses/${params.id}/lessons/${lesson.id}`} className="flex-1 flex items-center gap-5">
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 flex items-center justify-center text-blue-600 dark:text-blue-400 group-hover/lesson:scale-110 transition-transform shadow-sm">
|
||||
{lesson.content_type === 'video' ? <PlayCircle className="w-6 h-6" /> : <FileText className="w-6 h-6" />}
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
|
||||
className="font-bold text-slate-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
||||
className="font-black text-slate-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors uppercase tracking-tight text-sm"
|
||||
>
|
||||
{lesson.title}
|
||||
</span>
|
||||
<div className="flex items-center gap-3 text-xs text-slate-500 dark:text-gray-500 uppercase mt-0.5 font-bold">
|
||||
<span>{lesson.content_type}</span>
|
||||
<div className="flex items-center gap-3 text-[10px] text-slate-400 dark:text-gray-500 uppercase mt-1 font-black tracking-widest">
|
||||
<span className="px-2 py-0.5 bg-slate-100 dark:bg-white/5 rounded-md">{lesson.content_type}</span>
|
||||
{lesson.due_date && (
|
||||
<div className="flex items-center gap-1 text-orange-600 dark:text-orange-400">
|
||||
<div className="flex items-center gap-1.5 text-orange-600 dark:text-orange-400/80">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{new Date(lesson.due_date).toLocaleDateString()}
|
||||
</div>
|
||||
@@ -385,16 +388,16 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
|
||||
className="opacity-0 group-hover/lesson:opacity-100 text-slate-400 hover:text-slate-900 dark:text-white transition-opacity"
|
||||
className="opacity-0 group-hover/lesson:opacity-100 w-10 h-10 flex items-center justify-center bg-transparent hover:bg-blue-50 dark:hover:bg-white/5 rounded-xl text-slate-400 hover:text-blue-600 transition-all"
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleDeleteLesson(module.id, lesson.id); }}
|
||||
className="opacity-0 group-hover/lesson:opacity-100 text-slate-400 hover:text-red-500 dark:hover:text-red-400 transition-opacity"
|
||||
className="opacity-0 group-hover/lesson:opacity-100 w-10 h-10 flex items-center justify-center bg-transparent hover:bg-red-50 dark:hover:bg-red-500/10 rounded-xl text-slate-400 hover:text-red-500 transition-all"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
@@ -407,9 +410,9 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
|
||||
<button
|
||||
onClick={() => handleAddLesson(module.id)}
|
||||
className="w-full py-3 border border-dashed border-slate-300 dark:border-white/10 rounded-xl text-sm text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white hover:border-blue-500/50 hover:bg-slate-50 dark:hover:bg-white/5 transition-all mt-3 flex items-center justify-center gap-2 font-bold"
|
||||
className="w-full py-4 border-2 border-dashed border-slate-200 dark:border-white/10 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 hover:border-blue-500/40 hover:bg-blue-50/50 dark:hover:bg-blue-500/5 transition-all mt-4 flex items-center justify-center gap-3 active:scale-95"
|
||||
>
|
||||
<Plus className="w-4 h-4" /> New Lesson
|
||||
<Plus className="w-4 h-4" /> Add Lesson to Module
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -417,9 +420,12 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
|
||||
<button
|
||||
onClick={handleAddModule}
|
||||
className="w-full py-6 border-2 border-dashed border-slate-300 dark:border-white/10 rounded-2xl font-bold text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white hover:border-blue-500/50 hover:bg-slate-50 dark:hover:bg-white/5 transition-all flex items-center justify-center gap-3 text-lg"
|
||||
className="w-full py-12 border-2 border-dashed border-slate-200 dark:border-white/10 rounded-[2.5rem] font-black text-xs uppercase tracking-[0.3em] text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 hover:border-blue-500/40 hover:bg-blue-50/50 dark:hover:bg-blue-500/5 transition-all flex items-center justify-center gap-4 group shadow-inner"
|
||||
>
|
||||
<Plus className="w-6 h-6" /> Add New Module
|
||||
<div className="w-12 h-12 rounded-2xl bg-white dark:bg-white/5 flex items-center justify-center border border-slate-100 dark:border-white/5 shadow-sm group-hover:scale-110 transition-transform">
|
||||
<Plus className="w-6 h-6" />
|
||||
</div>
|
||||
Add New Curriculum Module
|
||||
</button>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
|
||||
@@ -119,23 +119,23 @@ export default function PeerReviewDashboard() {
|
||||
<ArrowLeft className="w-6 h-6" />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
|
||||
Peer Review Management
|
||||
<h1 className="text-4xl font-black bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent uppercase tracking-tighter">
|
||||
Peer Assessment
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Monitor and manage student peer assessments</p>
|
||||
<p className="text-slate-500 dark:text-gray-400 mt-1 font-medium">Monitor and manage student peer feedback loops</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="peer-reviews">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-10">
|
||||
{/* Lessons List */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-bold text-gray-500 uppercase tracking-widest px-2">Activities</h3>
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] px-4">Learning Activities</h3>
|
||||
<div className="space-y-2">
|
||||
{lessons.length === 0 ? (
|
||||
<div className="p-4 bg-white/5 border border-white/10 rounded-xl text-sm text-gray-500 italic">
|
||||
No peer review activities found in this course.
|
||||
<div className="p-6 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl text-sm text-slate-400 italic">
|
||||
No peer review activities found.
|
||||
</div>
|
||||
) : (
|
||||
lessons.map(lesson => (
|
||||
@@ -145,13 +145,13 @@ export default function PeerReviewDashboard() {
|
||||
setSelectedLessonId(lesson.id);
|
||||
setSelectedSubmissionId(null);
|
||||
}}
|
||||
className={`w-full text-left p-4 rounded-xl border transition-all ${selectedLessonId === lesson.id
|
||||
? "bg-purple-500/10 border-purple-500/50 text-purple-400 shadow-lg shadow-purple-500/5"
|
||||
: "bg-white/5 border-white/10 text-gray-400 hover:border-white/20"
|
||||
className={`w-full text-left p-5 rounded-[1.5rem] border transition-all active:scale-95 ${selectedLessonId === lesson.id
|
||||
? "bg-purple-50 dark:bg-purple-500/10 border-purple-200 dark:border-purple-500/50 text-purple-600 dark:text-purple-400 shadow-md shadow-purple-500/5 font-black uppercase tracking-tight"
|
||||
: "bg-white dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-500 dark:text-gray-400 hover:border-purple-500/30 font-bold"
|
||||
}`}
|
||||
>
|
||||
<div className="font-bold truncate">{lesson.title}</div>
|
||||
<div className="text-[10px] uppercase font-black tracking-tighter opacity-70 mt-1">Peer Assessment</div>
|
||||
<div className="truncate text-sm">{lesson.title}</div>
|
||||
<div className="text-[9px] uppercase font-black tracking-widest opacity-60 mt-1">Requirement</div>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
@@ -159,100 +159,111 @@ export default function PeerReviewDashboard() {
|
||||
</div>
|
||||
|
||||
{/* Submissions List */}
|
||||
<div className="lg:col-span-3 space-y-6">
|
||||
<div className="glass p-6 border-white/10">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
|
||||
<h2 className="text-xl font-bold flex items-center gap-2">
|
||||
<Users className="text-blue-400" />
|
||||
<div className="lg:col-span-3 space-y-8">
|
||||
<div className="bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-[2.5rem] p-10 shadow-sm">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
|
||||
<h2 className="text-2xl font-black flex items-center gap-4 uppercase tracking-tight text-slate-900 dark:text-white">
|
||||
<div className="w-12 h-12 rounded-2xl bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 flex items-center justify-center text-blue-600 dark:text-blue-400 shadow-sm">
|
||||
<Users size={24} />
|
||||
</div>
|
||||
Submissions
|
||||
</h2>
|
||||
<div className="relative w-full md:w-64">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
|
||||
<div className="relative w-full md:w-80 group">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-300 dark:text-gray-500 w-5 h-5 group-focus-within:text-blue-500 transition-colors" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search students..."
|
||||
placeholder="Search student or email..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-black/20 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500/50 transition-all"
|
||||
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-[1.25rem] py-4 pl-12 pr-6 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30 text-slate-900 dark:text-white transition-all shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{submissionsLoading ? (
|
||||
<div className="flex justify-center py-20">
|
||||
<Loader2 className="w-8 h-8 text-blue-500 animate-spin" />
|
||||
<div className="flex flex-col items-center justify-center py-32 space-y-4">
|
||||
<Loader2 className="w-12 h-12 text-blue-500 animate-spin" />
|
||||
<span className="text-xs font-black uppercase tracking-widest text-slate-400">Loading records...</span>
|
||||
</div>
|
||||
) : filteredSubmissions.length === 0 ? (
|
||||
<div className="text-center py-20 bg-black/20 rounded-2xl border border-dashed border-white/10">
|
||||
<MessageSquare className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-500 italic">No submissions found for this activity.</p>
|
||||
<div className="text-center py-32 bg-slate-50 dark:bg-black/20 rounded-3xl border border-dashed border-slate-200 dark:border-white/10">
|
||||
<div className="w-20 h-20 bg-white dark:bg-white/5 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm">
|
||||
<MessageSquare className="w-10 h-10 text-slate-300 dark:text-gray-700" />
|
||||
</div>
|
||||
<p className="text-slate-500 dark:text-gray-500 font-bold uppercase tracking-tight">No submissions found for this activity.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3 overflow-y-auto max-h-[600px] pr-2 custom-scrollbar">
|
||||
<div className="space-y-4 overflow-y-auto max-h-[700px] pr-4 custom-scrollbar">
|
||||
{filteredSubmissions.map(sub => (
|
||||
<div key={sub.id} className="group">
|
||||
<div
|
||||
onClick={() => setSelectedSubmissionId(selectedSubmissionId === sub.id ? null : sub.id)}
|
||||
className={`p-4 rounded-xl border transition-all cursor-pointer ${selectedSubmissionId === sub.id
|
||||
? "bg-blue-500/5 border-blue-500/30"
|
||||
: "bg-white/[0.02] border-white/5 hover:bg-white/[0.05] hover:border-white/20"
|
||||
className={`p-6 rounded-[1.5rem] border transition-all cursor-pointer shadow-sm active:scale-[0.99] ${selectedSubmissionId === sub.id
|
||||
? "bg-blue-50 dark:bg-blue-500/5 border-blue-200 dark:border-blue-500/30"
|
||||
: "bg-slate-50/50 dark:bg-white/[0.02] border-slate-200 dark:border-white/5 hover:bg-white dark:hover:bg-white/[0.05] hover:border-blue-500/30"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center font-bold text-sm">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-700 flex items-center justify-center font-black text-white text-lg shadow-lg shadow-blue-500/20">
|
||||
{sub.full_name.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-gray-900 dark:text-white group-hover:text-blue-400 transition-colors">{sub.full_name}</div>
|
||||
<div className="text-xs text-gray-500">{sub.email}</div>
|
||||
<div className="font-black text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors uppercase tracking-tight text-sm">{sub.full_name}</div>
|
||||
<div className="text-[10px] font-bold text-slate-400 dark:text-gray-500 uppercase tracking-widest">{sub.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8">
|
||||
<div className="flex items-center gap-10">
|
||||
<div className="text-right">
|
||||
<div className="text-sm font-black text-gray-900 dark:text-white flex items-center gap-1.5 justify-end">
|
||||
<Award className="w-4 h-4 text-yellow-400" />
|
||||
<div className="text-lg font-black text-slate-900 dark:text-white flex items-center gap-2 justify-end">
|
||||
<Award className="w-5 h-5 text-yellow-500" />
|
||||
{sub.average_score !== null ? `${(sub.average_score).toFixed(1)}/10` : '—'}
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Avg. Score</div>
|
||||
<div className="text-[9px] text-slate-400 dark:text-gray-500 font-black uppercase tracking-[0.2em]">Rating</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className={`text-sm font-black flex items-center gap-1.5 justify-end ${sub.review_count >= 2 ? 'text-green-400' : 'text-orange-400'}`}>
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
<div className={`text-lg font-black flex items-center gap-2 justify-end ${sub.review_count >= 2 ? 'text-green-600' : 'text-orange-500'}`}>
|
||||
<CheckCircle className="w-5 h-5" />
|
||||
{sub.review_count}
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Reviews</div>
|
||||
<div className="text-[9px] text-slate-400 dark:text-gray-500 font-black uppercase tracking-[0.2em]">Feedback</div>
|
||||
</div>
|
||||
<div className="text-right hidden md:block">
|
||||
<div className="text-sm font-medium text-gray-400 flex items-center gap-1.5 justify-end">
|
||||
<div className="text-right hidden xl:block">
|
||||
<div className="text-sm font-bold text-slate-400 dark:text-gray-500 flex items-center gap-2 justify-end">
|
||||
<Clock className="w-4 h-4" />
|
||||
{new Date(sub.submitted_at).toLocaleDateString()}
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Submitted</div>
|
||||
<div className="text-[9px] text-slate-400 dark:text-gray-500 font-black uppercase tracking-[0.2em]">Delivery</div>
|
||||
</div>
|
||||
<ChevronRight className={`w-5 h-5 text-gray-600 transition-transform ${selectedSubmissionId === sub.id ? 'rotate-90' : ''}`} />
|
||||
<ChevronRight className={`w-6 h-6 text-slate-300 transition-all ${selectedSubmissionId === sub.id ? 'rotate-90 text-blue-500' : ''}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reviews Detail Drawer-like expansion */}
|
||||
{selectedSubmissionId === sub.id && (
|
||||
<div className="mt-2 ml-4 p-6 bg-black/40 border-l-2 border-blue-500/50 rounded-r-xl space-y-4 animate-in slide-in-from-left-2 duration-200">
|
||||
<h4 className="text-sm font-bold uppercase tracking-widest text-blue-400">Review Details</h4>
|
||||
<div className="mt-4 ml-8 p-10 bg-slate-50 dark:bg-black/40 border-l-4 border-blue-500 dark:border-blue-500/50 rounded-r-[2rem] space-y-8 animate-in slide-in-from-left-4 duration-300 shadow-inner">
|
||||
<h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-600 dark:text-blue-400 ml-1">Submission Feedback Details</h4>
|
||||
{reviewsLoading ? (
|
||||
<div className="flex py-4"><Loader2 className="w-5 h-5 animate-spin text-blue-500" /></div>
|
||||
<div className="flex py-10"><Loader2 className="w-8 h-8 animate-spin text-blue-500" /></div>
|
||||
) : reviews.length === 0 ? (
|
||||
<p className="text-sm text-gray-500 italic">No reviews received yet.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{reviews.map(review => (
|
||||
<div key={review.id} className="p-4 bg-white/5 border border-white/10 rounded-xl space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs font-bold text-gray-400">Review Task</span>
|
||||
<span className="text-sm font-black text-yellow-500">{review.score}/10</span>
|
||||
<div className="p-8 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl text-center text-slate-400 italic">
|
||||
No peer reviews have been submitted for this user yet.
|
||||
</div>
|
||||
<p className="text-sm text-gray-300 leading-relaxed italic">"{review.feedback}"</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{reviews.map(review => (
|
||||
<div key={review.id} className="p-6 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-2xl space-y-4 shadow-sm group/review hover:border-blue-500/30 transition-all">
|
||||
<div className="flex justify-between items-center pb-3 border-b border-slate-50 dark:border-white/5">
|
||||
<span className="text-[9px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest">Peer Evaluator</span>
|
||||
<span className="px-3 py-1 bg-yellow-50 dark:bg-yellow-500/10 text-yellow-600 dark:text-yellow-500 text-sm font-black rounded-lg">
|
||||
{review.score}/10
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600 dark:text-gray-300 leading-relaxed italic font-medium px-2">
|
||||
"{review.feedback}"
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -17,9 +17,9 @@ export default function RubricsPage() {
|
||||
pageTitle="Gestión de Rúbricas"
|
||||
pageDescription="Crea y gestiona rúbricas de evaluación para tu curso."
|
||||
pageActions={
|
||||
<div className="hidden md:flex items-center gap-2 bg-blue-500/10 border border-blue-500/20 px-4 py-2 rounded-2xl text-blue-400 text-sm">
|
||||
<div className="hidden md:flex items-center gap-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 px-5 py-2.5 rounded-2xl text-blue-600 dark:text-blue-400 text-[10px] font-black uppercase tracking-widest shadow-sm">
|
||||
<Info className="w-4 h-4" />
|
||||
<span>Las rúbricas pueden asignarse a múltiples lecciones.</span>
|
||||
<span>Reusable rubrics can be assigned to multiple lessons across the course.</span>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
|
||||
@@ -87,60 +87,62 @@ export default function LiveSessionsPage() {
|
||||
pageActions={
|
||||
<button
|
||||
onClick={() => setIsCreateModalOpen(true)}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-sm shadow-md shadow-blue-600/20 transition-all active:scale-95"
|
||||
className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20 transition-all active:scale-95"
|
||||
>
|
||||
<Plus size={16} />
|
||||
Programar Sesión
|
||||
<Plus size={18} />
|
||||
PROGRAM SESSION
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{meetings.length === 0 ? (
|
||||
<div className="col-span-full py-20 bg-white/[0.02] border border-dashed border-white/10 rounded-3xl text-center">
|
||||
<Video className="w-16 h-16 text-gray-700 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-gray-400 mb-2">No active sessions</h3>
|
||||
<p className="text-gray-500 max-w-sm mx-auto">Start by scheduling your first virtual meeting for this course.</p>
|
||||
<div className="col-span-full py-32 bg-slate-50 dark:bg-white/[0.02] border border-dashed border-slate-200 dark:border-white/10 rounded-[3rem] text-center">
|
||||
<div className="w-24 h-24 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/5 rounded-[2rem] flex items-center justify-center mx-auto mb-6 shadow-sm">
|
||||
<Video className="w-12 h-12 text-slate-300 dark:text-gray-700" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-black text-slate-900 dark:text-white mb-2 uppercase tracking-tight">No active sessions</h3>
|
||||
<p className="text-slate-500 dark:text-gray-500 max-w-sm mx-auto font-medium">Start by scheduling your first virtual meeting for this course.</p>
|
||||
</div>
|
||||
) : (
|
||||
meetings.map(meeting => (
|
||||
<div key={meeting.id} className="glass p-6 border-white/10 hover:border-blue-500/30 transition-all group relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 p-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<div key={meeting.id} className="bg-white dark:bg-black/20 rounded-[2rem] p-8 border border-slate-200 dark:border-white/10 hover:border-blue-500/30 transition-all group relative overflow-hidden shadow-sm hover:shadow-md">
|
||||
<div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => handleDeleteMeeting(meeting.id)}
|
||||
className="p-2 hover:bg-red-500/20 text-red-400 rounded-lg transition-colors"
|
||||
className="p-3 bg-red-50 dark:bg-red-500/10 hover:bg-red-500 text-red-500 hover:text-white rounded-xl transition-all shadow-sm"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-blue-500/20 border border-blue-500/30 flex items-center justify-center text-blue-400 shrink-0">
|
||||
<Video size={24} />
|
||||
<div className="flex items-start gap-5 mb-8">
|
||||
<div className="w-14 h-14 rounded-2xl bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 flex items-center justify-center text-blue-600 dark:text-blue-400 shrink-0 shadow-sm transition-transform group-hover:scale-110">
|
||||
<Video size={28} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-lg leading-tight mb-1 group-hover:text-blue-400 transition-colors uppercase tracking-tight">{meeting.title}</h4>
|
||||
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-gray-500">
|
||||
<Globe size={10} />
|
||||
<h4 className="font-black text-xl leading-tight mb-2 text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors uppercase tracking-tight">{meeting.title}</h4>
|
||||
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500">
|
||||
<Globe size={12} className="text-blue-500/50" />
|
||||
{meeting.provider} Session
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-8">
|
||||
<div className="flex items-center gap-3 text-sm text-gray-400">
|
||||
<CalendarIcon size={16} className="text-blue-500" />
|
||||
<span className="font-medium">{new Date(meeting.start_at).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
|
||||
<div className="space-y-4 mb-10">
|
||||
<div className="flex items-center gap-3 text-sm text-slate-600 dark:text-gray-400 bg-slate-50 dark:bg-white/5 p-3 rounded-xl border border-slate-100 dark:border-white/5 shadow-inner">
|
||||
<CalendarIcon size={18} className="text-blue-500" />
|
||||
<span className="font-bold tracking-tight uppercase text-[11px]">{new Date(meeting.start_at).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm text-gray-400">
|
||||
<Clock size={16} className="text-blue-500" />
|
||||
<span className="font-medium">
|
||||
<div className="flex items-center gap-3 text-sm text-slate-600 dark:text-gray-400 bg-slate-50 dark:bg-white/5 p-3 rounded-xl border border-slate-100 dark:border-white/5 shadow-inner">
|
||||
<Clock size={18} className="text-blue-500" />
|
||||
<span className="font-black text-[11px] uppercase tracking-widest">
|
||||
{new Date(meeting.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
<span className="mx-2 opacity-30">|</span>
|
||||
{meeting.duration_minutes} minutes
|
||||
<span className="mx-3 opacity-30">|</span>
|
||||
{meeting.duration_minutes} MIN
|
||||
</span>
|
||||
</div>
|
||||
{meeting.description && (
|
||||
<p className="text-xs text-gray-500 line-clamp-2 mt-2 leading-relaxed italic">
|
||||
<p className="text-xs text-slate-500 dark:text-gray-500 line-clamp-3 mt-4 leading-relaxed italic px-2">
|
||||
"{meeting.description}"
|
||||
</p>
|
||||
)}
|
||||
@@ -148,17 +150,17 @@ export default function LiveSessionsPage() {
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
className="flex-1 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-xs font-bold transition-all flex items-center justify-center gap-2"
|
||||
className="flex-1 py-3 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-xl text-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-white transition-all flex items-center justify-center gap-2 shadow-sm active:scale-95"
|
||||
onClick={() => {
|
||||
const url = meeting.join_url || `https://meet.jit.si/${meeting.meeting_id}`;
|
||||
window.open(url, '_blank');
|
||||
}}
|
||||
>
|
||||
<LinkIcon size={14} />
|
||||
Preview Link
|
||||
<LinkIcon size={14} className="text-blue-500" />
|
||||
PREVIEW LINK
|
||||
</button>
|
||||
<div className={`px-3 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest ${meeting.is_active ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-500'}`}>
|
||||
{meeting.is_active ? 'Scheduled' : 'Past'}
|
||||
<div className={`px-4 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest border ${meeting.is_active ? 'bg-green-50 dark:bg-green-500/10 text-green-600 dark:text-green-400 border-green-100 dark:border-green-500/20' : 'bg-slate-100 dark:bg-gray-500/20 text-slate-400 dark:text-gray-500 border-slate-200 dark:border-white/5'}`}>
|
||||
{meeting.is_active ? 'SCHEDULED' : 'PAST'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -169,65 +171,67 @@ export default function LiveSessionsPage() {
|
||||
|
||||
{/* Create Meeting Modal */}
|
||||
{isCreateModalOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-[#16181b] border border-white/10 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl scale-in-center">
|
||||
<div className="p-6 border-b border-white/5 flex items-center justify-between">
|
||||
<h2 className="text-xl font-bold flex items-center gap-2 font-black uppercase tracking-tighter">
|
||||
<Video className="text-blue-500" />
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 dark:bg-black/80 backdrop-blur-md">
|
||||
<div className="bg-white dark:bg-[#16181b] border border-slate-200 dark:border-white/10 rounded-[2.5rem] w-full max-w-lg overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
|
||||
<div className="p-8 border-b border-slate-100 dark:border-white/5 flex items-center justify-between bg-slate-50/50 dark:bg-transparent">
|
||||
<h2 className="text-2xl font-black flex items-center gap-3 uppercase tracking-tighter text-slate-900 dark:text-white">
|
||||
<div className="p-2 bg-blue-50 dark:bg-blue-500/10 rounded-xl text-blue-600 dark:text-blue-400">
|
||||
<Video size={24} />
|
||||
</div>
|
||||
Schedule Session
|
||||
</h2>
|
||||
<button onClick={() => setIsCreateModalOpen(false)} className="p-2 hover:bg-white/10 rounded-full transition-colors">
|
||||
<X size={20} />
|
||||
<button onClick={() => setIsCreateModalOpen(false)} className="w-10 h-10 flex items-center justify-center hover:bg-slate-100 dark:hover:bg-white/10 text-slate-400 rounded-full transition-colors">
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-8 space-y-4">
|
||||
<div className="p-10 space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black uppercase tracking-widest text-gray-500">Meeting Title</label>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 ml-1">Meeting Title</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newMeeting.title}
|
||||
onChange={(e) => setNewMeeting({ ...newMeeting, title: e.target.value })}
|
||||
placeholder="e.g., Weekly Office Hours"
|
||||
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 px-4 text-sm focus:outline-none focus:border-blue-500/50"
|
||||
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl py-4 px-5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30 text-slate-900 dark:text-white placeholder:text-slate-300 transition-all font-medium shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black uppercase tracking-widest text-gray-500">Description (Optional)</label>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 ml-1">Description (Optional)</label>
|
||||
<textarea
|
||||
value={newMeeting.description}
|
||||
onChange={(e) => setNewMeeting({ ...newMeeting, description: e.target.value })}
|
||||
placeholder="What will be covered?"
|
||||
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 px-4 text-sm focus:outline-none focus:border-blue-500/50 resize-none h-20"
|
||||
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl py-4 px-5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30 text-slate-900 dark:text-white placeholder:text-slate-300 transition-all font-medium h-24 resize-none shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black uppercase tracking-widest text-gray-500">Start Time</label>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 ml-1">Start Time</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={newMeeting.start_at}
|
||||
onChange={(e) => setNewMeeting({ ...newMeeting, start_at: e.target.value })}
|
||||
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 px-4 text-sm focus:outline-none focus:border-blue-500/50 text-gray-900 dark:text-white"
|
||||
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl py-4 px-5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30 text-slate-900 dark:text-white transition-all font-medium shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black uppercase tracking-widest text-gray-500">Duration (Min)</label>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 ml-1">Duration (Min)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={newMeeting.duration_minutes}
|
||||
onChange={(e) => setNewMeeting({ ...newMeeting, duration_minutes: parseInt(e.target.value) })}
|
||||
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 px-4 text-sm focus:outline-none focus:border-blue-500/50"
|
||||
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl py-4 px-5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30 text-slate-900 dark:text-white transition-all font-medium shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-6">
|
||||
<div className="pt-8 pb-4">
|
||||
<button
|
||||
onClick={handleCreateMeeting}
|
||||
disabled={!newMeeting.title}
|
||||
className="w-full py-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed rounded-2xl text-sm font-black uppercase tracking-[0.2em] transition-all shadow-xl shadow-blue-500/10"
|
||||
className="w-full py-5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed rounded-2xl text-xs font-black uppercase tracking-[0.3em] transition-all shadow-xl shadow-blue-500/20 active:scale-95 text-white"
|
||||
>
|
||||
Create Session
|
||||
Confirm & Create Session
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,8 @@ import {
|
||||
Mail,
|
||||
Plus,
|
||||
UserCircle,
|
||||
MoreHorizontal
|
||||
MoreHorizontal,
|
||||
ChevronRight
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
@@ -137,21 +138,21 @@ export default function CourseStudentsPage() {
|
||||
Listado de Estudiantes
|
||||
</h2>
|
||||
{/* Search and Filters */}
|
||||
<div className="glass p-4 rounded-2xl flex flex-col md:flex-row items-center gap-4">
|
||||
<div className="bg-slate-50/50 dark:bg-white/5 border border-slate-200 dark:border-white/10 p-5 rounded-3xl flex flex-col md:flex-row items-center gap-4 shadow-sm">
|
||||
<div className="relative flex-1 w-full">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
|
||||
<Search className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 dark:text-gray-500 w-4 h-4" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by name or email..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500/50 transition-all font-medium text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-600"
|
||||
className="w-full bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl py-2.5 pl-11 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-bold text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-600 shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 w-full md:w-auto">
|
||||
<Filter size={16} className="text-gray-400" />
|
||||
<div className="flex items-center gap-3 w-full md:w-auto">
|
||||
<Filter size={16} className="text-slate-400 dark:text-gray-400" />
|
||||
<select
|
||||
className="bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500/50 text-slate-900 dark:text-white min-w-[150px]"
|
||||
className="bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl px-5 py-2.5 text-xs font-black uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-slate-900 dark:text-white min-w-[180px] shadow-sm cursor-pointer"
|
||||
value={selectedCohortId}
|
||||
onChange={(e) => setSelectedCohortId(e.target.value)}
|
||||
>
|
||||
@@ -162,16 +163,16 @@ export default function CourseStudentsPage() {
|
||||
</div>
|
||||
|
||||
{/* Student List */}
|
||||
<div className="rounded-3xl border border-white/10 bg-white/[0.02] overflow-hidden">
|
||||
<div className="rounded-3xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/[0.02] overflow-hidden shadow-sm">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-white/5 border-b border-white/5 font-bold text-xs uppercase tracking-widest text-gray-500 uppercase">
|
||||
<tr className="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/5 font-black text-[10px] uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">
|
||||
<th className="p-6">Student</th>
|
||||
<th className="p-6">Enrollment Date</th>
|
||||
<th className="p-6 text-center">Enrollment Status</th>
|
||||
<th className="p-6 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-white/5">
|
||||
{filteredStudents.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={3} className="p-12 text-center text-slate-500 dark:text-gray-500 italic">No students found.</td>
|
||||
@@ -180,41 +181,45 @@ export default function CourseStudentsPage() {
|
||||
<tr key={student.user_id} className="hover:bg-white/[0.02] transition-colors group">
|
||||
<td className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center font-bold text-sm">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center font-black text-white text-lg shadow-lg shadow-blue-500/20">
|
||||
{student.full_name.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-gray-900 dark:text-white group-hover:text-blue-400 transition-colors uppercase tracking-tight">{student.full_name}</div>
|
||||
<div className="text-xs text-gray-500 flex items-center gap-1 mt-0.5"><Mail size={12} /> {student.email}</div>
|
||||
<div className="font-black text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors uppercase tracking-tight text-sm">{student.full_name}</div>
|
||||
<div className="text-xs text-slate-400 dark:text-gray-500 flex items-center gap-1.5 mt-1 font-medium italic"><Mail size={12} className="text-blue-400" /> {student.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-6 text-gray-400 text-sm font-medium">
|
||||
{/* In a real app we'd have the enrollment date here */}
|
||||
Available upon request
|
||||
<td className="p-6 text-center">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 bg-green-500/10 text-green-600 dark:text-green-400 rounded-full border border-green-500/20 text-[10px] font-black uppercase tracking-widest">
|
||||
<CheckCircle2 size={12} /> Active
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-6 text-right">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<div className="relative group/actions">
|
||||
<button className="p-2 hover:bg-white/10 rounded-lg transition-colors text-gray-500">
|
||||
<button className="p-2.5 hover:bg-slate-100 dark:hover:bg-white/10 rounded-xl transition-all text-slate-400 dark:text-gray-500 active:scale-90">
|
||||
<MoreHorizontal size={20} />
|
||||
</button>
|
||||
<div className="absolute right-0 top-full mt-2 w-48 bg-[#1a1c1e] border border-white/10 rounded-xl shadow-2xl invisible group-hover/actions:visible z-10 p-2">
|
||||
<div className="text-[10px] font-black uppercase tracking-widest text-gray-600 px-3 py-2 border-b border-white/5 mb-1">Move to Cohort</div>
|
||||
<div className="absolute right-0 top-full mt-2 w-56 bg-white dark:bg-[#1a1c1e] border border-slate-200 dark:border-white/10 rounded-2xl shadow-2xl invisible group-hover/actions:visible z-10 p-2 animate-in fade-in slide-in-from-top-2 duration-200">
|
||||
<div className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-600 px-3 py-2.5 border-b border-slate-100 dark:border-white/5 mb-1.5 flex items-center gap-2">
|
||||
<Filter size={10} /> Move to Cohort
|
||||
</div>
|
||||
{cohorts.map(c => (
|
||||
<button
|
||||
key={c.id}
|
||||
onClick={() => handleCohortAssignment(student.user_id, c.id)}
|
||||
className="w-full text-left px-3 py-2 text-xs hover:bg-white/5 rounded-lg transition-colors"
|
||||
className="w-full text-left px-4 py-2.5 text-xs font-bold text-slate-700 dark:text-gray-300 hover:bg-slate-50 dark:hover:bg-white/5 hover:text-blue-600 dark:hover:text-white rounded-xl transition-all flex items-center justify-between group/item"
|
||||
>
|
||||
{c.name}
|
||||
<ChevronRight size={14} className="opacity-0 group-hover/item:opacity-100 -translate-x-2 group-hover/item:translate-x-0 transition-all" />
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
className="w-full text-left px-3 py-2 text-xs text-red-400 hover:bg-red-500/10 rounded-lg transition-colors mt-2 border-t border-white/5"
|
||||
className="w-full text-left px-4 py-2.5 text-xs font-black uppercase tracking-widest text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-xl transition-all mt-2 border-t border-slate-100 dark:border-white/5 pt-3"
|
||||
onClick={() => { if (confirm("Unenroll student?")) handleCohortAssignment(student.user_id, "", true) }}
|
||||
>
|
||||
Unenroll
|
||||
Unenroll Student
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -231,58 +236,68 @@ export default function CourseStudentsPage() {
|
||||
{/* Enroll Modal */}
|
||||
{
|
||||
isEnrollModalOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="bg-[#16181b] border border-white/10 rounded-3xl w-full max-w-2xl overflow-hidden shadow-2xl scale-in-center">
|
||||
<div className="p-6 border-b border-white/5 flex items-center justify-between">
|
||||
<h2 className="text-xl font-bold flex items-center gap-2">
|
||||
<UserPlus className="text-blue-500" />
|
||||
Enroll Organization Students
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/40 dark:bg-black/80 backdrop-blur-md animate-in fade-in duration-300">
|
||||
<div className="bg-white dark:bg-[#16181b] border border-slate-200 dark:border-white/10 rounded-[2.5rem] w-full max-w-2xl overflow-hidden shadow-2xl scale-in-center">
|
||||
<div className="p-8 border-b border-slate-100 dark:border-white/5 flex items-center justify-between bg-slate-50/50 dark:bg-transparent">
|
||||
<div>
|
||||
<h2 className="text-2xl font-black flex items-center gap-3 text-slate-900 dark:text-white">
|
||||
<UserPlus className="text-blue-600 dark:text-blue-500" />
|
||||
Enroll Students
|
||||
</h2>
|
||||
<button onClick={() => setIsEnrollModalOpen(false)} className="p-2 hover:bg-white/10 rounded-full transition-colors">
|
||||
<X size={20} />
|
||||
<p className="text-xs text-slate-400 dark:text-gray-500 font-bold uppercase tracking-widest mt-1">Select from organization directory</p>
|
||||
</div>
|
||||
<button onClick={() => setIsEnrollModalOpen(false)} className="p-3 hover:bg-slate-200 dark:hover:bg-white/10 rounded-2xl transition-all group active:scale-90">
|
||||
<X size={20} className="text-slate-400 group-hover:text-slate-900 dark:group-hover:text-white" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-8 space-y-6">
|
||||
<div className="p-8 space-y-8">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 dark:text-gray-500 w-5 h-5" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search and select students from organization..."
|
||||
placeholder="Search by name or email..."
|
||||
value={enrollSearch}
|
||||
onChange={(e) => setEnrollSearch(e.target.value)}
|
||||
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 pl-10 pr-4 text-sm focus:outline-none"
|
||||
className="w-full bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-[1.5rem] py-4 pl-12 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 font-bold text-slate-900 dark:text-white shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar">
|
||||
<div className="space-y-3 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
|
||||
{orgUsersLoading ? (
|
||||
<div className="flex justify-center p-8"><Loader2 className="w-8 h-8 animate-spin text-blue-500" /></div>
|
||||
<div className="flex justify-center p-12 text-blue-500 items-center flex-col gap-4">
|
||||
<Loader2 className="w-10 h-10 animate-spin" />
|
||||
<span className="text-xs font-black uppercase tracking-widest text-slate-400">Fetching Directory...</span>
|
||||
</div>
|
||||
) : allOrgUsers.filter(u => u.full_name.toLowerCase().includes(enrollSearch.toLowerCase())).length === 0 ? (
|
||||
<div className="text-center p-8 text-gray-500 italic">No remaining students to enroll.</div>
|
||||
<div className="text-center p-12 text-slate-400 dark:text-gray-500 italic font-medium">No remaining students found in organization directory.</div>
|
||||
) : (
|
||||
allOrgUsers.filter(u => u.full_name.toLowerCase().includes(enrollSearch.toLowerCase())).map(user => (
|
||||
<div key={user.id} className="flex items-center justify-between p-4 bg-white/5 border border-white/10 rounded-xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<UserCircle className="text-gray-500" />
|
||||
<div key={user.id} className="flex items-center justify-between p-5 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl group/user hover:bg-white dark:hover:bg-white/[0.08] transition-all shadow-sm">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-white dark:bg-black/20 border border-slate-100 dark:border-white/10 flex items-center justify-center shadow-sm">
|
||||
<UserCircle className="text-slate-400 dark:text-gray-500" size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-sm tracking-tight">{user.full_name}</div>
|
||||
<div className="text-xs text-gray-500">{user.email}</div>
|
||||
<div className="font-black text-slate-900 dark:text-white text-sm tracking-tight group-hover/user:text-blue-600 dark:group-hover/user:text-blue-400 transition-colors uppercase">{user.full_name}</div>
|
||||
<div className="text-xs text-slate-400 dark:text-gray-500 font-medium flex items-center gap-1.5 mt-0.5 italic"><Mail size={10} className="text-blue-400" /> {user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleEnroll([user.email])}
|
||||
className="px-4 py-1.5 bg-blue-600 hover:bg-blue-500 text-gray-900 dark:text-white text-xs font-bold rounded-lg transition-all"
|
||||
className="px-6 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-black uppercase tracking-widest rounded-xl transition-all shadow-md shadow-blue-500/20 active:scale-95"
|
||||
>
|
||||
Enroll Now
|
||||
Enroll
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-500/10 border border-blue-500/20 p-4 rounded-xl flex gap-3">
|
||||
<Plus size={20} className="text-blue-400 shrink-0" />
|
||||
<div className="text-xs text-blue-300 leading-relaxed font-medium">
|
||||
<div className="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 p-5 rounded-3xl flex gap-4 shadow-sm">
|
||||
<div className="w-10 h-10 rounded-2xl bg-white dark:bg-black/20 flex items-center justify-center shrink-0 shadow-sm">
|
||||
<Plus size={20} className="text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<div className="text-xs text-blue-800/80 dark:text-blue-300 leading-relaxed font-bold uppercase tracking-wide">
|
||||
You can also enroll external students by going to the <strong>Gradebook</strong> and using the Bulk Enroll feature.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -119,31 +119,36 @@ export default function CourseTeamPage() {
|
||||
{loading ? (
|
||||
<div className="py-20 text-center text-gray-500 animate-pulse">Loading team members...</div>
|
||||
) : instructors.length === 0 ? (
|
||||
<div className="py-20 glass rounded-2xl flex flex-col items-center justify-center text-gray-500 gap-4">
|
||||
<GraduationCap className="w-12 h-12 opacity-20" />
|
||||
<p>No instructors assigned yet.</p>
|
||||
<div className="py-24 bg-slate-50 dark:bg-white/5 border-2 border-dashed border-slate-200 dark:border-white/10 rounded-[2.5rem] flex flex-col items-center justify-center text-slate-400 dark:text-gray-500 gap-4 shadow-inner">
|
||||
<div className="w-20 h-20 rounded-3xl bg-white dark:bg-white/5 flex items-center justify-center shadow-sm">
|
||||
<GraduationCap className="w-10 h-10 opacity-40" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="font-black uppercase tracking-widest text-xs">No instructors assigned yet</p>
|
||||
<p className="text-[10px] mt-1 font-medium italic">Start by adding your first team member</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
instructors.map((inst) => (
|
||||
<div key={inst.id} className="glass p-6 rounded-2xl border-white/5 flex items-center justify-between group">
|
||||
<div key={inst.id} className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 p-6 rounded-[2rem] flex items-center justify-between group hover:bg-slate-50 dark:hover:bg-white/[0.08] transition-all shadow-sm">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-xl font-bold border-2 border-white/10 shadow-xl">
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-2xl font-black text-white border-4 border-white dark:border-white/10 shadow-xl shadow-blue-500/20">
|
||||
{inst.full_name?.charAt(0) || inst.email?.charAt(0)}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-lg font-bold flex items-center gap-2">
|
||||
<h3 className="text-lg font-black text-slate-900 dark:text-white flex items-center gap-3 uppercase tracking-tight">
|
||||
{inst.full_name}
|
||||
{inst.role === 'primary' && (
|
||||
<span className="text-[10px] font-black uppercase px-2 py-0.5 bg-orange-500/10 text-orange-400 border border-orange-500/20 rounded-full">
|
||||
<span className="text-[9px] font-black uppercase px-2.5 py-1 bg-blue-600 text-white border border-blue-500 shadow-sm shadow-blue-500/20 rounded-full">
|
||||
Owner
|
||||
</span>
|
||||
)}
|
||||
</h3>
|
||||
<div className="flex items-center gap-3 text-sm text-slate-600 dark:text-gray-400 font-medium">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Mail className="w-3.5 h-3.5 opacity-60" /> {inst.email}
|
||||
<div className="flex items-center gap-3 text-xs text-slate-500 dark:text-gray-400 font-bold uppercase tracking-wider">
|
||||
<span className="flex items-center gap-1.5 lowercase font-medium text-slate-400 normal-case">
|
||||
<Mail className="w-3.5 h-3.5 text-blue-400 shrink-0" /> {inst.email}
|
||||
</span>
|
||||
<span className="w-1 h-1 rounded-full bg-gray-700" />
|
||||
<span className="w-1 h-1 rounded-full bg-slate-300 dark:bg-gray-700" />
|
||||
<span className="flex items-center gap-1.5">
|
||||
{getRoleIcon(inst.role)} {getRoleLabel(inst.role)}
|
||||
</span>
|
||||
@@ -171,31 +176,31 @@ export default function CourseTeamPage() {
|
||||
{/* Add Member Modal */}
|
||||
{
|
||||
isAddModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 dark:bg-black/80 backdrop-blur-sm animate-in fade-in duration-300">
|
||||
<div className="bg-white dark:bg-[#1a1c22] border border-slate-200 dark:border-white/10 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300">
|
||||
<div className="p-8 border-b border-white/5 flex justify-between items-center">
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/40 dark:bg-black/80 backdrop-blur-md animate-in fade-in duration-300">
|
||||
<div className="bg-white dark:bg-[#1a1c22] border border-slate-200 dark:border-white/10 rounded-[2.5rem] w-full max-w-lg overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300">
|
||||
<div className="p-8 border-b border-slate-100 dark:border-white/5 flex justify-between items-center bg-slate-50/50 dark:bg-transparent">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white">Add Team Member</h2>
|
||||
<p className="text-sm text-slate-500 dark:text-gray-400 mt-1">Search for a user by name or email</p>
|
||||
<h2 className="text-2xl font-black text-slate-900 dark:text-white uppercase tracking-tight">Add Team Member</h2>
|
||||
<p className="text-xs text-slate-400 dark:text-gray-500 mt-1 font-bold uppercase tracking-widest">Search for a user in the directory</p>
|
||||
</div>
|
||||
<button onClick={() => setIsAddModalOpen(false)} className="p-2 hover:bg-white/5 rounded-full transition-colors text-gray-500">
|
||||
<X className="w-6 h-6" />
|
||||
<button onClick={() => setIsAddModalOpen(false)} className="p-3 hover:bg-slate-200 dark:hover:bg-white/10 rounded-2xl transition-all text-slate-400 dark:text-gray-500 active:scale-90 group">
|
||||
<X className="w-6 h-6 group-hover:text-slate-900 dark:group-hover:text-white transition-colors" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-8 space-y-8">
|
||||
<form onSubmit={handleSearch} className="relative">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 dark:text-gray-500" />
|
||||
<input
|
||||
autoFocus
|
||||
placeholder="Type name or email..."
|
||||
placeholder="Enter name or direct email..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm focus:outline-none focus:border-blue-500 transition-all font-medium text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500"
|
||||
className="w-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-bold text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500 shadow-inner"
|
||||
/>
|
||||
{searching && (
|
||||
<div className="absolute right-4 top-1/2 -translate-y-1/2">
|
||||
<div className="w-5 h-5 border-2 border-white/20 border-t-blue-500 rounded-full animate-spin" />
|
||||
<div className="w-5 h-5 border-2 border-slate-200 dark:border-white/20 border-t-blue-500 rounded-full animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
@@ -228,31 +233,36 @@ export default function CourseTeamPage() {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 max-h-60 overflow-y-auto pr-2 custom-scrollbar">
|
||||
<div className="space-y-4 max-h-72 overflow-y-auto pr-2 custom-scrollbar">
|
||||
{users.length > 0 ? (
|
||||
users.map(u => (
|
||||
<button
|
||||
key={u.id}
|
||||
onClick={() => handleAddMember(u)}
|
||||
className="w-full flex items-center justify-between p-4 rounded-2xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 hover:border-blue-500/30 hover:bg-slate-100 dark:hover:bg-white/10 transition-all group"
|
||||
className="w-full flex items-center justify-between p-5 rounded-3xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 hover:border-blue-500/30 hover:bg-white dark:hover:bg-white/10 transition-all group shadow-sm active:scale-[0.98]"
|
||||
>
|
||||
<div className="flex items-center gap-4 text-left">
|
||||
<div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center font-bold text-sm">
|
||||
<div className="w-12 h-12 rounded-2xl bg-white dark:bg-black/20 border border-slate-100 dark:border-white/10 flex items-center justify-center font-black text-blue-500 text-lg shadow-sm">
|
||||
{u.full_name.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-sm text-slate-900 dark:text-white">{u.full_name}</div>
|
||||
<div className="text-xs text-slate-500 dark:text-gray-500">{u.email}</div>
|
||||
<div className="font-black text-slate-900 dark:text-white text-sm tracking-tight group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors uppercase">{u.full_name}</div>
|
||||
<div className="text-xs text-slate-400 dark:text-gray-500 font-medium italic flex items-center gap-1.5 mt-0.5"><Mail size={12} className="text-blue-400" /> {u.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-8 h-8 rounded-lg bg-blue-500/0 flex items-center justify-center group-hover:bg-blue-500/20 transition-all">
|
||||
<Plus className="w-4 h-4 text-blue-400 opacity-0 group-hover:opacity-100" />
|
||||
<div className="w-10 h-10 rounded-xl bg-blue-500/0 flex items-center justify-center group-hover:bg-blue-600 group-hover:text-white transition-all shadow-lg shadow-blue-500/0 group-hover:shadow-blue-500/20">
|
||||
<Plus className="w-5 h-5 text-blue-600 group-hover:text-white" />
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
) : searchQuery && !searching ? (
|
||||
<div className="py-8 text-center text-gray-600 italic text-sm">No users found matching your search.</div>
|
||||
) : null}
|
||||
<div className="py-12 text-center text-slate-400 dark:text-gray-600 italic text-sm font-medium border-2 border-dashed border-slate-100 dark:border-white/5 rounded-[2rem]">No users found matching your search.</div>
|
||||
) : (
|
||||
<div className="py-12 bg-blue-50/30 dark:bg-blue-500/5 rounded-3xl border border-blue-100/50 dark:border-blue-500/10 flex flex-col items-center justify-center text-blue-600/50 dark:text-blue-400/30 gap-3">
|
||||
<Search className="w-8 h-8" />
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.2em]">Enter a name to search</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -199,68 +199,71 @@ export default function RubricEditor({ rubricId, courseId, onClose, onSaved }: R
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="bg-[#1a1d23] rounded-3xl border border-white/10 overflow-hidden shadow-2xl flex flex-col max-h-[90vh]">
|
||||
<div className="bg-white dark:bg-[#1a1d23] rounded-[2.5rem] border border-slate-200 dark:border-white/10 overflow-hidden shadow-2xl flex flex-col max-h-[90vh]">
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-white/10 flex items-center justify-between bg-white/[0.02]">
|
||||
<div className="p-8 border-b border-slate-100 dark:border-white/10 flex items-center justify-between bg-slate-50/50 dark:bg-white/[0.02]">
|
||||
<div className="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
value={rubric.name}
|
||||
onChange={(e) => handleUpdateRubric(e.target.value, rubric.description || "")}
|
||||
placeholder="Rubric Name"
|
||||
className="bg-transparent text-2xl font-bold text-white focus:outline-none focus:ring-1 focus:ring-blue-500/50 rounded px-2 w-full"
|
||||
className="bg-transparent text-3xl font-black text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500/30 rounded px-2 w-full uppercase tracking-tighter"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={rubric.description || ""}
|
||||
onChange={(e) => handleUpdateRubric(rubric.name, e.target.value)}
|
||||
placeholder="Add a description..."
|
||||
className="bg-transparent text-sm text-gray-400 focus:outline-none focus:ring-1 focus:ring-blue-500/50 rounded px-2 mt-1 w-full"
|
||||
className="bg-transparent text-sm font-bold text-slate-400 dark:text-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-500/30 rounded px-2 mt-2 w-full italic"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 ml-4">
|
||||
<div className="text-right mr-4">
|
||||
<span className="text-xs text-gray-500 uppercase tracking-widest block font-semibold">Total Points</span>
|
||||
<span className="text-2xl font-bold text-blue-400">{rubric.total_points}</span>
|
||||
<div className="flex items-center gap-6 ml-4">
|
||||
<div className="text-right">
|
||||
<span className="text-[10px] text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] block font-black mb-1">Total Points</span>
|
||||
<span className="text-3xl font-black text-blue-600 dark:text-blue-400 tracking-tighter">{rubric.total_points}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-white/10 rounded-full text-gray-400 hover:text-white transition-colors"
|
||||
className="w-12 h-12 flex items-center justify-center hover:bg-red-50 dark:hover:bg-white/10 rounded-full text-slate-400 hover:text-red-500 transition-all active:scale-95 border border-transparent hover:border-red-100"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
<X className="w-8 h-8" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-8 space-y-12">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-lg font-semibold flex items-center gap-2 text-gray-200">
|
||||
Criteria
|
||||
<span className="text-xs font-normal text-gray-500 bg-white/5 px-2 py-0.5 rounded-full">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h3 className="text-xl font-black flex items-center gap-3 text-slate-900 dark:text-gray-200 uppercase tracking-tight">
|
||||
<div className="w-10 h-10 rounded-xl bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 flex items-center justify-center text-blue-600 dark:text-blue-400 shadow-sm">
|
||||
<Plus size={20} />
|
||||
</div>
|
||||
Evaluation Criteria
|
||||
<span className="text-[10px] font-black text-slate-400 dark:text-gray-500 bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 px-3 py-1 rounded-full uppercase tracking-widest ml-2">
|
||||
{rubric.criteria.length} items
|
||||
</span>
|
||||
</h3>
|
||||
<button
|
||||
onClick={handleAddCriterion}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-600/10 text-blue-400 border border-blue-500/30 rounded-xl hover:bg-blue-600 hover:text-white transition-all transform active:scale-95"
|
||||
className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] transition-all shadow-xl shadow-blue-500/20 active:scale-95"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add Criterion
|
||||
ADD NEW CRITERION
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-8 pb-10">
|
||||
{rubric.criteria.length === 0 ? (
|
||||
<div className="text-center py-12 border-2 border-dashed border-white/5 rounded-3xl bg-white/[0.01]">
|
||||
<p className="text-gray-500 italic">No criteria added yet. Add your first evaluation criterion.</p>
|
||||
<div className="text-center py-20 border-2 border-dashed border-slate-200 dark:border-white/5 rounded-[3rem] bg-slate-50/50 dark:bg-white/[0.01]">
|
||||
<p className="text-slate-400 dark:text-gray-500 italic font-medium">Define your first grading criterion to start building the rubric.</p>
|
||||
</div>
|
||||
) : (
|
||||
rubric.criteria.map((item, idx) => (
|
||||
<div key={item.id} className="group bg-white/[0.03] border border-white/10 rounded-3xl p-6 hover:border-blue-500/30 transition-all">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="mt-2 text-gray-600 group-hover:text-blue-500/50 transition-colors">
|
||||
<GripVertical className="w-5 h-5 cursor-grab active:cursor-grabbing" />
|
||||
<div key={item.id} className="group bg-slate-50/30 dark:bg-white/[0.03] border border-slate-200 dark:border-white/10 rounded-[2.5rem] p-10 hover:border-blue-500/30 transition-all shadow-sm hover:shadow-md">
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="mt-2 text-slate-300 dark:text-gray-600 group-hover:text-blue-500 transition-colors">
|
||||
<GripVertical className="w-6 h-6 cursor-grab active:cursor-grabbing" />
|
||||
</div>
|
||||
<div className="flex-1 space-y-4">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
@@ -269,29 +272,29 @@ export default function RubricEditor({ rubricId, courseId, onClose, onSaved }: R
|
||||
type="text"
|
||||
value={item.name}
|
||||
onChange={(e) => handleUpdateCriterion(item.id, { name: e.target.value })}
|
||||
className="bg-transparent text-lg font-bold text-gray-100 focus:outline-none focus:border-b border-blue-500/50 w-full"
|
||||
className="bg-transparent text-xl font-black text-slate-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500/20 rounded-lg px-2 w-full uppercase tracking-tight"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={item.description || ""}
|
||||
onChange={(e) => handleUpdateCriterion(item.id, { description: e.target.value })}
|
||||
placeholder="Description of what to evaluate..."
|
||||
className="bg-transparent text-sm text-gray-500 focus:outline-none w-full mt-1"
|
||||
placeholder="Focus area (e.g. Critical Thinking, Technical Accuracy...)"
|
||||
className="bg-transparent text-sm font-medium text-slate-500 dark:text-gray-500 focus:outline-none w-full mt-2 italic px-2"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex flex-col items-end">
|
||||
<label className="text-[10px] text-gray-500 uppercase tracking-widest font-bold mb-1">Max Points</label>
|
||||
<label className="text-[9px] text-slate-400 dark:text-gray-500 uppercase tracking-widest font-black mb-1 mr-1">Points</label>
|
||||
<input
|
||||
type="number"
|
||||
value={item.max_points}
|
||||
onChange={(e) => handleUpdateCriterion(item.id, { max_points: parseInt(e.target.value) || 0 })}
|
||||
className="bg-white/5 border border-white/10 rounded-lg px-2 py-1 w-16 text-center text-blue-400 font-bold focus:outline-none focus:border-blue-500"
|
||||
className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-3 py-2 w-20 text-center text-blue-600 dark:text-blue-400 font-black text-lg focus:outline-none focus:ring-2 focus:ring-blue-500/30 transition-all shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteCriterion(item.id)}
|
||||
className="p-2 text-red-500/50 hover:text-red-500 hover:bg-red-500/10 rounded-lg transition-all"
|
||||
className="p-3 bg-red-50 dark:bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white rounded-xl transition-all shadow-sm active:scale-95"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
@@ -299,45 +302,45 @@ export default function RubricEditor({ rubricId, courseId, onClose, onSaved }: R
|
||||
</div>
|
||||
|
||||
{/* Levels */}
|
||||
<div className="pl-4 border-l-2 border-white/5 space-y-4 pt-2">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="text-xs font-bold text-gray-500 uppercase tracking-widest">Performance Levels</h4>
|
||||
<div className="pl-8 border-l-4 border-slate-100 dark:border-white/5 space-y-6 pt-4 mt-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h4 className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em]">Achievement Levels</h4>
|
||||
<button
|
||||
onClick={() => handleAddLevel(item.id)}
|
||||
className="text-xs text-blue-400 hover:text-blue-300 flex items-center gap-1 font-semibold"
|
||||
className="text-[10px] font-black uppercase tracking-widest text-blue-600 hover:text-blue-500 flex items-center gap-2 px-3 py-1 bg-blue-50 dark:bg-blue-500/10 rounded-lg border border-blue-100 dark:border-blue-500/20 transition-all"
|
||||
>
|
||||
<Plus className="w-3 h-3" /> Add Level
|
||||
<Plus size={12} /> ADD LEVEL
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
|
||||
{item.levels.map(level => (
|
||||
<div key={level.id} className="bg-white/5 border border-white/10 rounded-2xl p-4 flex flex-col gap-2 relative group/level hover:bg-white/[0.08] transition-all">
|
||||
<div key={level.id} className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.5rem] p-6 flex flex-col gap-4 relative group/level hover:border-blue-500/30 transition-all shadow-sm">
|
||||
<button
|
||||
onClick={() => handleDeleteLevel(level.id, item.id)}
|
||||
className="absolute top-2 right-2 p-1 text-gray-600 hover:text-red-500 opacity-0 group-level-hover:opacity-100 transition-all"
|
||||
className="absolute top-4 right-4 p-2 bg-red-50 dark:bg-red-500/10 text-red-500 rounded-lg opacity-0 group-hover/level:opacity-100 transition-all active:scale-90"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
<input
|
||||
type="text"
|
||||
value={level.name}
|
||||
onChange={(e) => handleUpdateLevel(level.id, item.id, { name: e.target.value })}
|
||||
placeholder="Level Name (e.g. Excellent)"
|
||||
className="bg-transparent text-sm font-semibold text-gray-200 focus:outline-none"
|
||||
placeholder="Level (e.g. Master)"
|
||||
className="bg-transparent text-sm font-black text-slate-900 dark:text-gray-200 focus:outline-none uppercase tracking-tight"
|
||||
/>
|
||||
<textarea
|
||||
value={level.description || ""}
|
||||
onChange={(e) => handleUpdateLevel(level.id, item.id, { description: e.target.value })}
|
||||
placeholder="Criteria description..."
|
||||
className="bg-transparent text-xs text-gray-500 focus:outline-none resize-none h-12"
|
||||
placeholder="Grade description..."
|
||||
className="bg-transparent text-xs font-medium text-slate-500 dark:text-gray-500 focus:outline-none resize-none h-20 leading-relaxed italic"
|
||||
/>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-[10px] text-gray-600 uppercase font-bold">Points:</span>
|
||||
<div className="flex items-center justify-between mt-2 pt-4 border-t border-slate-50 dark:border-white/5">
|
||||
<span className="text-[9px] text-slate-400 dark:text-gray-600 uppercase font-black tracking-widest">Points Value</span>
|
||||
<input
|
||||
type="number"
|
||||
value={level.points}
|
||||
onChange={(e) => handleUpdateLevel(level.id, item.id, { points: parseInt(e.target.value) || 0 })}
|
||||
className="bg-white/5 border border-white/10 rounded px-1.5 w-12 text-xs text-center text-blue-400 focus:outline-none"
|
||||
className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-lg px-2 py-1 w-14 text-xs font-black text-center text-blue-600 dark:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500/30 shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -353,22 +356,22 @@ export default function RubricEditor({ rubricId, courseId, onClose, onSaved }: R
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-6 border-t border-white/10 bg-white/[0.02] flex justify-end gap-4">
|
||||
<div className="p-8 border-t border-slate-100 dark:border-white/10 bg-slate-50 dark:bg-white/[0.02] flex justify-end gap-5">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-6 py-2 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all font-medium"
|
||||
className="px-8 py-3 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] text-slate-500 hover:text-slate-900 dark:text-gray-400 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all"
|
||||
>
|
||||
Close
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (onSaved) onSaved();
|
||||
onClose();
|
||||
}}
|
||||
className="px-8 py-2 bg-blue-600 text-white rounded-xl font-bold hover:bg-blue-500 shadow-lg shadow-blue-500/20 active:scale-95 transition-all flex items-center gap-2"
|
||||
className="px-10 py-3 bg-blue-600 text-white rounded-2xl font-black text-[10px] uppercase tracking-[0.3em] hover:bg-blue-500 shadow-xl shadow-blue-500/20 active:scale-95 transition-all flex items-center gap-3"
|
||||
>
|
||||
<Check className="w-5 h-5" />
|
||||
Done
|
||||
Save & Finish
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -98,7 +98,7 @@ export default function RubricList({ courseId, onEdit }: RubricListProps) {
|
||||
placeholder="Search rubrics..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-2xl pl-11 pr-4 py-3 focus:outline-none focus:border-blue-500/50 transition-all text-gray-100"
|
||||
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl pl-11 pr-4 py-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30 transition-all text-slate-900 dark:text-gray-100 placeholder:text-slate-300 shadow-inner font-medium"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -109,14 +109,14 @@ export default function RubricList({ courseId, onEdit }: RubricListProps) {
|
||||
value={newRubricName}
|
||||
onChange={(e) => setNewRubricName(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
|
||||
className="flex-1 md:w-64 bg-white/5 border border-white/10 rounded-xl px-4 py-2 focus:outline-none focus:border-blue-500/50 transition-all"
|
||||
className="flex-1 md:w-64 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl px-5 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30 transition-all text-slate-900 dark:text-white placeholder:text-slate-300 shadow-inner font-medium"
|
||||
/>
|
||||
<button
|
||||
onClick={handleCreate}
|
||||
disabled={creating || !newRubricName}
|
||||
className="bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white font-bold px-6 py-2 rounded-xl transition-all shadow-lg shadow-blue-500/20 active:scale-95 flex items-center gap-2"
|
||||
className="bg-blue-600 hover:bg-blue-500 disabled:bg-slate-100 disabled:text-slate-300 text-white font-black text-xs uppercase tracking-[0.2em] px-8 py-3 rounded-2xl transition-all shadow-xl shadow-blue-500/20 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<Plus className="w-5 h-5" />
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
@@ -124,26 +124,26 @@ export default function RubricList({ courseId, onEdit }: RubricListProps) {
|
||||
|
||||
{/* Rubrics Grid */}
|
||||
{filteredRubrics.length === 0 ? (
|
||||
<div className="bg-white/5 border border-white/10 rounded-3xl p-16 text-center">
|
||||
<div className="w-16 h-16 bg-blue-500/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||
<FileText className="w-8 h-8 text-blue-400" />
|
||||
<div className="bg-slate-50 dark:bg-white/5 border border-dashed border-slate-200 dark:border-white/10 rounded-[3rem] p-24 text-center">
|
||||
<div className="w-20 h-20 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/5 rounded-2xl flex items-center justify-center mx-auto mb-8 shadow-sm">
|
||||
<FileText className="w-10 h-10 text-slate-300 dark:text-blue-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-200 mb-2">No rubrics found</h3>
|
||||
<p className="text-gray-500 max-w-md mx-auto">
|
||||
Create a rubric to start using advanced grading criteria in your course lessons.
|
||||
<h3 className="text-2xl font-black text-slate-900 dark:text-white mb-3 uppercase tracking-tight">No rubrics created</h3>
|
||||
<p className="text-slate-500 dark:text-gray-500 max-w-sm mx-auto font-medium">
|
||||
Standardize your evaluation process by creating detailed rubrics for your course assignments.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{filteredRubrics.map((rubric) => (
|
||||
<div
|
||||
key={rubric.id}
|
||||
className="group bg-white/5 border border-white/10 rounded-3xl p-6 hover:border-blue-500/50 hover:bg-white/[0.08] transition-all duration-300 flex flex-col justify-between"
|
||||
className="group bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-[2.5rem] p-10 hover:border-blue-500/30 hover:shadow-xl transition-all duration-300 flex flex-col justify-between shadow-sm"
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400">
|
||||
<FileText className="w-6 h-6" />
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div className="w-14 h-14 rounded-2xl bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-100 dark:border-indigo-500/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400 shadow-sm transition-transform group-hover:scale-110">
|
||||
<FileText className="w-8 h-8" />
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
@@ -155,32 +155,32 @@ export default function RubricList({ courseId, onEdit }: RubricListProps) {
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(rubric.id)}
|
||||
className="p-2 text-gray-500 hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-all"
|
||||
className="p-3 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-xl transition-all shadow-sm active:scale-90"
|
||||
title="Delete Rubric"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-gray-100 group-hover:text-blue-400 transition-colors mb-2">
|
||||
<h3 className="text-2xl font-black text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-2 uppercase tracking-tight">
|
||||
{rubric.name}
|
||||
</h3>
|
||||
<p className="text-gray-500 text-sm line-clamp-2 min-h-[2.5rem]">
|
||||
{rubric.description || "No description provided."}
|
||||
<p className="text-slate-500 dark:text-gray-500 text-sm line-clamp-2 min-h-[3rem] font-medium leading-relaxed">
|
||||
{rubric.description || "Establish consistent grading standards with custom criteria."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex items-center justify-between">
|
||||
<div className="mt-12 flex items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] text-gray-500 uppercase tracking-widest font-bold mb-1">Total Points</span>
|
||||
<span className="text-xl font-black text-white">{rubric.total_points}</span>
|
||||
<span className="text-[10px] text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] font-black mb-1">Total Points</span>
|
||||
<span className="text-3xl font-black text-slate-900 dark:text-white tracking-tighter">{rubric.total_points}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onEdit(rubric.id)}
|
||||
className="px-4 py-2 bg-white/5 border border-white/10 rounded-xl text-sm font-semibold hover:bg-blue-600 hover:text-white hover:border-blue-600 transition-all active:scale-95"
|
||||
className="px-6 py-3 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.25rem] text-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-white hover:bg-blue-600 hover:text-white hover:border-blue-600 transition-all active:scale-95 shadow-sm"
|
||||
>
|
||||
Manage Criteria
|
||||
EDIT CRITERIA
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -25,18 +25,19 @@ export default function AudioResponseBlock({
|
||||
<div className="space-y-8" id={id}>
|
||||
<div className="space-y-2">
|
||||
{editMode ? (
|
||||
<div className="space-y-2 p-6 glass border-white/5 bg-white/5 mb-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Activity Title (Optional)</label>
|
||||
<div className="space-y-4 p-8 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2rem] mb-6 shadow-inner relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-purple-500/40"></div>
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em]">Activity Title (Optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title || ""}
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
placeholder="e.g. Speaking Practice, Pronunciation Test..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm font-bold focus:border-blue-500/50 focus:outline-none"
|
||||
className="w-full bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-3 text-sm font-black uppercase tracking-tight focus:ring-4 focus:ring-purple-500/10 focus:border-purple-500 transition-all outline-none shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<h3 className="text-xl font-bold border-l-4 border-purple-500 pl-4 py-1 tracking-tight text-white">
|
||||
<h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase border-l-4 border-purple-600 pl-6 py-1">
|
||||
{title || "Audio Response"}
|
||||
</h3>
|
||||
)}
|
||||
@@ -44,39 +45,40 @@ export default function AudioResponseBlock({
|
||||
|
||||
{editMode ? (
|
||||
<div className="space-y-6">
|
||||
<div className="p-6 glass border-white/5 space-y-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest flex items-center gap-2">
|
||||
<Mic className="w-4 h-4" />
|
||||
Question Prompt
|
||||
<div className="p-8 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-[2.5rem] space-y-4 shadow-sm relative overflow-hidden group/prompt">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] flex items-center gap-3">
|
||||
<Mic className="w-4 h-4 text-purple-600" />
|
||||
Phonetic Inquiry (Prompt)
|
||||
</label>
|
||||
<textarea
|
||||
value={prompt}
|
||||
onChange={(e) => onChange({ prompt: e.target.value })}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl p-4 min-h-[100px] text-lg font-medium focus:outline-none focus:border-purple-500/50 transition-all"
|
||||
placeholder="What question should the student answer? (e.g. 'Describe your daily routine in English')"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl p-6 min-h-[120px] text-xl font-black uppercase tracking-tight text-slate-800 dark:text-white focus:outline-none focus:ring-4 focus:ring-purple-500/10 transition-all shadow-inner placeholder:opacity-20"
|
||||
placeholder="WHAT IS THE ENIGMA TO BE SPOKEN?..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-6 glass border-white/5 space-y-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest flex items-center gap-2">
|
||||
<Tag className="w-4 h-4" />
|
||||
Expected Keywords (Optional)
|
||||
<div className="p-8 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-[2.5rem] space-y-4 shadow-sm">
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] flex items-center gap-3">
|
||||
<Tag className="w-4 h-4 text-purple-600" />
|
||||
Lexical Anchors (Expected Keywords)
|
||||
</label>
|
||||
<textarea
|
||||
value={keywords.join("\n")}
|
||||
onChange={(e) => onChange({ keywords: e.target.value.split("\n").filter(k => k.trim() !== "") })}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl p-4 min-h-[100px] text-sm font-medium focus:outline-none focus:border-purple-500/50 transition-all"
|
||||
placeholder="breakfast morning routine work"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl p-6 min-h-[100px] text-sm font-bold text-slate-700 dark:text-gray-300 focus:outline-none focus:ring-4 focus:ring-purple-500/10 transition-all shadow-inner"
|
||||
placeholder="Keyword Alpha Keyword Beta..."
|
||||
/>
|
||||
<p className="text-[10px] text-gray-500 uppercase tracking-wider">
|
||||
One keyword per line. Used for automatic evaluation of speech content.
|
||||
<p className="text-[9px] text-slate-400 dark:text-gray-600 uppercase font-black italic pl-1 italic">
|
||||
Singular entry per line. Syntactic scan for automatic validation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 glass border-white/5 space-y-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest flex items-center gap-2">
|
||||
<Clock className="w-4 h-4" />
|
||||
Time Limit (Optional)
|
||||
<div className="p-8 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-[2.5rem] space-y-4 shadow-sm">
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] flex items-center gap-3">
|
||||
<Clock className="w-4 h-4 text-purple-600" />
|
||||
Temporal Ceiling (Seconds)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
@@ -85,46 +87,51 @@ export default function AudioResponseBlock({
|
||||
placeholder="60"
|
||||
min="10"
|
||||
max="300"
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm font-medium focus:border-purple-500/50 focus:outline-none"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl px-6 py-4 text-sm font-black text-slate-800 dark:text-white focus:ring-4 focus:ring-purple-500/10 transition-all outline-none"
|
||||
/>
|
||||
<p className="text-[10px] text-gray-500 uppercase tracking-wider">
|
||||
Maximum recording time in seconds (10-300). Leave empty for no limit.
|
||||
<p className="text-[9px] text-slate-400 dark:text-gray-600 uppercase font-black italic pl-1 italic">
|
||||
Maximum temporal window (10-300). Null for unconstrained stream.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-8 glass border-white/5 rounded-3xl space-y-8">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 bg-purple-500/20 rounded-xl">
|
||||
<Mic className="w-6 h-6 text-purple-400" />
|
||||
<div className="p-10 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-[3rem] space-y-10 shadow-sm relative overflow-hidden group/audioplay">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-purple-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 group-hover/audioplay:bg-purple-500/10 transition-colors"></div>
|
||||
|
||||
<div className="flex items-start gap-8 relative z-10">
|
||||
<div className="p-5 bg-purple-100 dark:bg-purple-500/10 rounded-2xl shadow-inner border border-purple-200 dark:border-purple-500/20">
|
||||
<Mic className="w-8 h-8 text-purple-700 dark:text-purple-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-xl font-bold text-gray-100 mb-2">{prompt || "Record your audio response:"}</p>
|
||||
<div className="flex-1 space-y-4">
|
||||
<p className="text-2xl font-black text-slate-800 dark:text-gray-100 tracking-tight uppercase italic leading-tight">{prompt || "Awaiting phonetic capture..."}</p>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-6">
|
||||
{keywords.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-3">
|
||||
<span className="text-xs text-gray-500 uppercase tracking-wider">Expected topics:</span>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{keywords.slice(0, 5).map((kw, i) => (
|
||||
<span key={i} className="px-2 py-1 bg-purple-500/10 border border-purple-500/20 rounded text-xs text-purple-300">
|
||||
<span key={i} className="px-3 py-1 bg-slate-50 dark:bg-purple-500/5 border border-slate-100 dark:border-purple-500/20 rounded-lg text-[9px] font-black uppercase text-purple-600 dark:text-purple-400 tracking-widest shadow-sm">
|
||||
{kw}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{timeLimit && (
|
||||
<p className="text-xs text-gray-500 mt-2 flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
Maximum {timeLimit} seconds
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 flex items-center gap-2">
|
||||
<Clock className="w-3 h-3 text-purple-500" />
|
||||
Temporal Window: {timeLimit}s
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-purple-500/5 border-2 border-dashed border-purple-500/20 rounded-2xl text-center">
|
||||
<p className="text-sm text-gray-400">
|
||||
🎤 Audio recording will be available in the Experience player
|
||||
<div className="p-10 bg-purple-50/50 dark:bg-purple-500/5 border-2 border-dashed border-purple-200 dark:border-purple-500/20 rounded-[2.5rem] text-center space-y-3 relative z-10 group-hover/audioplay:border-purple-400 transition-colors duration-500">
|
||||
<div className="w-16 h-1 w-1 bg-purple-200 dark:bg-purple-500/20 mx-auto rounded-full mb-4"></div>
|
||||
<p className="text-[10px] font-black text-purple-900 dark:text-purple-400 uppercase tracking-[0.3em]">
|
||||
Phonetic Engine Interface
|
||||
</p>
|
||||
<p className="text-xs text-gray-600 mt-2">
|
||||
Students will use their microphone to record their response
|
||||
<p className="text-[9px] text-slate-400 dark:text-gray-600 uppercase font-black italic">
|
||||
Capture node will manifest within the Experience stream
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -79,139 +79,146 @@ export default function DescriptionBlock({ id, title, content, editMode, courseI
|
||||
{/* Block Header */}
|
||||
<div className="space-y-2">
|
||||
{editMode ? (
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Activity Title (Optional)</label>
|
||||
<div className="space-y-3">
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em]">Activity Title (Optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title || ""}
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
placeholder="e.g. Introduction, Context..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm font-bold focus:border-blue-500/50 focus:outline-none"
|
||||
placeholder="e.g. Fundamental Concepts, Learning Objectives..."
|
||||
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl px-5 py-3 text-sm font-black uppercase tracking-tight focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all outline-none"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
title && <h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white">{title}</h3>
|
||||
title && <h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase border-l-4 border-blue-600 pl-6 py-1">{title}</h3>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editMode ? (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Instructional Content</label>
|
||||
<div className="h-4 w-px bg-white/10 mx-2" />
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em]">Instructional Canvas</label>
|
||||
<div className="h-4 w-px bg-slate-200 dark:bg-white/10 mx-2" />
|
||||
{/* Toolbar */}
|
||||
{!showPreview && (
|
||||
<div className="flex items-center gap-1">
|
||||
<button onClick={() => insertMarkdown("**", "**")} className="p-1.5 hover:bg-white/10 rounded-md transition-colors text-gray-400 hover:text-white" title="Bold"><Bold size={14} /></button>
|
||||
<button onClick={() => insertMarkdown("*", "*")} className="p-1.5 hover:bg-white/10 rounded-md transition-colors text-gray-400 hover:text-white" title="Italic"><Italic size={14} /></button>
|
||||
<button onClick={() => insertMarkdown("[", "](url)")} className="p-1.5 hover:bg-white/10 rounded-md transition-colors text-gray-400 hover:text-white" title="Link"><LinkIcon size={14} /></button>
|
||||
<div className="w-px h-3 bg-white/10 mx-1" />
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button onClick={() => insertMarkdown("**", "**")} className="p-2 hover:bg-slate-100 dark:hover:bg-white/10 rounded-xl transition-all text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white shadow-sm border border-transparent hover:border-slate-200" title="Bold"><Bold size={16} /></button>
|
||||
<button onClick={() => insertMarkdown("*", "*")} className="p-2 hover:bg-slate-100 dark:hover:bg-white/10 rounded-xl transition-all text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white shadow-sm border border-transparent hover:border-slate-200" title="Italic"><Italic size={16} /></button>
|
||||
<button onClick={() => insertMarkdown("[", "](url)")} className="p-2 hover:bg-slate-100 dark:hover:bg-white/10 rounded-xl transition-all text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white shadow-sm border border-transparent hover:border-slate-200" title="Link"><LinkIcon size={16} /></button>
|
||||
<div className="w-px h-4 bg-slate-200 dark:bg-white/10 mx-2" />
|
||||
<button
|
||||
onClick={() => { setPickerType("image"); setIsAssetPickerOpen(true); }}
|
||||
className="p-1.5 hover:bg-white/10 rounded-md transition-colors text-blue-400 hover:text-blue-300"
|
||||
className="p-2 hover:bg-blue-50 dark:hover:bg-blue-500/10 rounded-xl transition-all text-blue-600 dark:text-blue-400 hover:text-blue-700 shadow-sm border border-transparent hover:border-blue-200"
|
||||
title="Insert Image"
|
||||
>
|
||||
<ImageIcon size={14} />
|
||||
<ImageIcon size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setPickerType("file"); setIsAssetPickerOpen(true); }}
|
||||
className="p-1.5 hover:bg-white/10 rounded-md transition-colors text-purple-400 hover:text-purple-300"
|
||||
className="p-2 hover:bg-purple-50 dark:hover:bg-purple-500/10 rounded-xl transition-all text-purple-600 dark:text-purple-400 hover:text-purple-700 shadow-sm border border-transparent hover:border-purple-200"
|
||||
title="Insert File Link"
|
||||
>
|
||||
<FileText size={14} />
|
||||
<FileText size={16} />
|
||||
</button>
|
||||
<div className="w-px h-3 bg-white/10 mx-1" />
|
||||
<div className="w-px h-4 bg-slate-200 dark:bg-white/10 mx-2" />
|
||||
<button
|
||||
onClick={handleReviewText}
|
||||
disabled={isReviewing}
|
||||
className={`p-1.5 rounded-md transition-all flex items-center gap-1.5 text-xs font-bold ${isReviewing ? 'bg-indigo-500/20 text-indigo-300 animate-pulse' : 'hover:bg-indigo-500/20 text-indigo-400 hover:text-indigo-300'}`}
|
||||
className={`px-4 py-2 rounded-xl transition-all flex items-center gap-2 text-[10px] font-black uppercase tracking-widest border ${isReviewing ? 'bg-indigo-50 dark:bg-indigo-500/20 text-indigo-400 border-indigo-200 animate-pulse shadow-inner' : 'bg-indigo-50 dark:bg-indigo-500/5 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-600 hover:text-white border-indigo-100 hover:border-indigo-600 shadow-sm active:scale-95'}`}
|
||||
title="AI Suggest Improvements"
|
||||
>
|
||||
<Sparkles size={14} className={isReviewing ? 'animate-spin' : ''} />
|
||||
{isReviewing ? 'Analyzing...' : 'AI Suggest'}
|
||||
{isReviewing ? 'Synthesizing...' : 'AI Refine'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex bg-white/5 rounded-lg p-1 border border-white/5">
|
||||
<div className="flex bg-slate-100 dark:bg-white/5 rounded-2xl p-1.5 border border-slate-200 dark:border-white/5 shadow-inner">
|
||||
<button
|
||||
onClick={() => setShowPreview(false)}
|
||||
className={`px-3 py-1 flex items-center gap-2 text-[10px] uppercase font-black tracking-widest rounded-md transition-all ${!showPreview ? "bg-blue-500 text-white shadow-lg" : "text-gray-500 hover:text-white"}`}
|
||||
className={`px-5 py-2 flex items-center gap-2 text-[10px] uppercase font-black tracking-widest rounded-xl transition-all ${!showPreview ? "bg-white dark:bg-indigo-600 text-slate-900 dark:text-white shadow-md" : "text-slate-400 hover:text-slate-600"}`}
|
||||
>
|
||||
<PenLine size={12} /> Write
|
||||
<PenLine size={12} /> Composition
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowPreview(true)}
|
||||
className={`px-3 py-1 flex items-center gap-2 text-[10px] uppercase font-black tracking-widest rounded-md transition-all ${showPreview ? "bg-blue-500 text-white shadow-lg" : "text-gray-500 hover:text-white"}`}
|
||||
className={`px-5 py-2 flex items-center gap-2 text-[10px] uppercase font-black tracking-widest rounded-xl transition-all ${showPreview ? "bg-white dark:bg-indigo-600 text-slate-900 dark:text-white shadow-md" : "text-slate-400 hover:text-slate-600"}`}
|
||||
>
|
||||
<Eye size={12} /> Preview
|
||||
<Eye size={12} /> Rendering
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showPreview ? (
|
||||
<div className="min-h-[200px] p-8 rounded-2xl glass border-white/5 bg-white/5">
|
||||
<div className="prose prose-invert max-w-none prose-p:text-gray-300 prose-p:leading-relaxed prose-p:text-lg prose-headings:text-white prose-a:text-blue-400 prose-img:rounded-xl">
|
||||
<ReactMarkdown urlTransform={getImageUrl}>{content || "Nothing to preview..."}</ReactMarkdown>
|
||||
<div className="min-h-[250px] p-10 rounded-[2.5rem] bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
|
||||
<div className="prose dark:prose-invert max-w-none prose-p:text-slate-600 dark:prose-p:text-gray-300 prose-p:leading-relaxed prose-p:text-lg prose-headings:text-slate-900 dark:prose-headings:text-white prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-3xl prose-img:shadow-2xl relative z-10">
|
||||
<ReactMarkdown urlTransform={getImageUrl}>{content || "Draft empty. Initiate composition above..."}</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative">
|
||||
<div className="relative group/canvas">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={content}
|
||||
onChange={(e) => onChange({ content: e.target.value })}
|
||||
placeholder="Explain the activity (Markdown supported)..."
|
||||
className="w-full h-80 bg-white/5 border border-white/10 rounded-xl p-6 text-lg tracking-tight focus:border-blue-500/50 focus:outline-none transition-all resize-none shadow-inner custom-scrollbar"
|
||||
placeholder="Unfold your vision. Markdown architectural syntax supported..."
|
||||
className="w-full h-[400px] bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-[2rem] p-10 text-lg tracking-tight focus:ring-8 focus:ring-blue-500/5 focus:border-blue-500/50 focus:outline-none transition-all resize-none shadow-inner custom-scrollbar relative z-10 font-medium leading-relaxed"
|
||||
/>
|
||||
<div className="absolute bottom-4 right-4 text-[10px] text-gray-600 font-bold uppercase tracking-widest pointer-events-none">
|
||||
Markdown Mode
|
||||
<div className="absolute bottom-6 right-8 text-[10px] text-slate-300 dark:text-gray-600 font-black uppercase tracking-[0.3em] pointer-events-none z-20 group-hover/canvas:text-blue-400/50 transition-colors">
|
||||
Structural Markdown Mode
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{suggestion && (
|
||||
<div className="bg-indigo-500/10 border border-indigo-500/30 rounded-2xl p-6 space-y-4 animate-in fade-in slide-in-from-top-4 duration-500 shadow-xl shadow-indigo-500/5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Wand2 size={16} className="text-indigo-400" />
|
||||
<span className="text-xs font-black uppercase tracking-widest text-indigo-300">AI Teacher Suggestions</span>
|
||||
<div className="bg-white dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/30 rounded-[2.5rem] p-10 space-y-8 animate-in fade-in slide-in-from-top-6 duration-700 shadow-2xl relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2"></div>
|
||||
<div className="flex items-center justify-between relative z-10">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-indigo-600 text-white flex items-center justify-center shadow-lg shadow-indigo-500/30">
|
||||
<Wand2 size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase">Neural Refinement Suggestions</h4>
|
||||
<p className="text-[10px] text-slate-400 dark:text-gray-400 mt-1 uppercase tracking-[0.2em] font-black">AI-optimized pedagogical structure</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setSuggestion(null)}
|
||||
className="p-1.5 hover:bg-white/10 rounded-lg text-gray-400 transition-colors"
|
||||
className="w-10 h-10 flex items-center justify-center hover:bg-slate-100 dark:hover:bg-white/10 rounded-full text-slate-400 transition-colors"
|
||||
>
|
||||
<CloseIcon size={14} />
|
||||
<CloseIcon size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<span className="text-[10px] font-bold text-gray-500 uppercase tracking-widest pl-1">Improved Version</span>
|
||||
<div className="p-4 bg-black/40 rounded-xl border border-white/5 text-sm text-gray-300 leading-relaxed italic">
|
||||
{suggestion.suggestion}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10 relative z-10">
|
||||
<div className="space-y-4">
|
||||
<span className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest pl-1">Proposed Architecture</span>
|
||||
<div className="p-8 bg-slate-50 dark:bg-black/40 rounded-[2rem] border border-slate-200 dark:border-white/5 text-sm text-slate-600 dark:text-gray-300 leading-relaxed italic shadow-inner">
|
||||
"{suggestion.suggestion}"
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<span className="text-[10px] font-bold text-gray-500 uppercase tracking-widest pl-1">Key Changes</span>
|
||||
<div className="text-xs text-gray-400 leading-relaxed pl-1 whitespace-pre-line">
|
||||
<div className="space-y-6">
|
||||
<span className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest pl-1">Pedagogical Insights</span>
|
||||
<div className="text-sm text-slate-500 dark:text-gray-400 font-medium leading-relaxed pl-1 whitespace-pre-line border-l-2 border-indigo-100 pl-6 py-2">
|
||||
{suggestion.comments}
|
||||
</div>
|
||||
<div className="pt-4 flex gap-3">
|
||||
<div className="pt-6 flex gap-4">
|
||||
<button
|
||||
onClick={applySuggestion}
|
||||
className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold rounded-lg transition-all shadow-lg shadow-indigo-500/20 flex items-center gap-2 group active:scale-95"
|
||||
className="px-8 py-4 bg-indigo-600 hover:bg-indigo-500 text-white text-[10px] font-black uppercase tracking-[0.2em] rounded-2xl transition-all shadow-xl shadow-indigo-500/30 flex items-center gap-3 active:scale-95"
|
||||
>
|
||||
<Check size={14} className="group-hover:scale-110 transition-transform" />
|
||||
Apply Changes
|
||||
<Check size={16} />
|
||||
Update Syllabus
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSuggestion(null)}
|
||||
className="px-4 py-2 bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white text-xs font-bold rounded-lg border border-white/10 transition-all active:scale-95"
|
||||
className="px-8 py-4 bg-white dark:bg-white/5 hover:bg-slate-50 text-slate-400 dark:text-gray-400 hover:text-slate-900 text-[10px] font-black uppercase tracking-[0.2em] rounded-2xl border border-slate-200 dark:border-white/10 transition-all active:scale-95 shadow-sm"
|
||||
>
|
||||
Dismiss
|
||||
Discard
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -220,8 +227,8 @@ export default function DescriptionBlock({ id, title, content, editMode, courseI
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="prose prose-invert max-w-none prose-p:text-gray-300 prose-p:leading-relaxed prose-p:text-lg prose-headings:text-white prose-a:text-blue-400 prose-img:rounded-xl">
|
||||
<ReactMarkdown urlTransform={getImageUrl}>{content || "No description provided."}</ReactMarkdown>
|
||||
<div className="prose dark:prose-invert max-w-none prose-p:text-slate-600 dark:prose-p:text-gray-300 prose-p:leading-relaxed prose-p:text-lg prose-headings:text-slate-900 dark:prose-headings:text-white prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-3xl prose-img:shadow-xl">
|
||||
<ReactMarkdown urlTransform={getImageUrl}>{content || "Conceptual flow not established yet."}</ReactMarkdown>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -21,30 +21,32 @@ export default function DocumentBlock({ title, url, editMode, onChange }: Docume
|
||||
{/* Block Header */}
|
||||
<div className="space-y-2">
|
||||
{editMode ? (
|
||||
<div className="space-y-2 p-6 glass border-white/5 bg-white/5 mb-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Document Activity Title</label>
|
||||
<div className="space-y-4 p-8 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2rem] mb-6 shadow-inner relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-indigo-500/40"></div>
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em]">Document Activity Title</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title || ""}
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
placeholder="e.g. Course Syllabus, Reading Guide..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm font-bold focus:border-blue-500/50 focus:outline-none"
|
||||
className="w-full bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-3 text-sm font-black uppercase tracking-tight focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
title && <h3 className="text-xl font-bold border-l-4 border-indigo-500 pl-4 py-1 tracking-tight text-white">{title}</h3>
|
||||
title && <h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase border-l-4 border-indigo-600 pl-6 py-1">{title}</h3>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editMode && (
|
||||
<div className="p-6 glass border-blue-500/10 mb-8 bg-blue-500/5">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest mb-4 block">Upload Document (PDF, DOCX, PPTX)</label>
|
||||
<div className="p-10 bg-white dark:bg-white/5 border border-indigo-500/10 dark:border-indigo-500/20 mb-10 rounded-[2.5rem] shadow-xl shadow-indigo-500/5 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2"></div>
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest mb-6 block pl-1 relative z-10">Asset Pipeline (PDF, DOCX, PPTX)</label>
|
||||
<FileUpload
|
||||
currentUrl={url}
|
||||
onUploadComplete={(newUrl) => onChange({ url: newUrl })}
|
||||
/>
|
||||
<p className="text-[10px] text-gray-500 uppercase leading-relaxed mt-4 px-2">
|
||||
Supported formats: PDF (can be previewed), DOCX, PPTX (download only).
|
||||
<p className="text-[9px] text-slate-400 dark:text-gray-500 uppercase font-black italic mt-6 px-2 leading-relaxed relative z-10">
|
||||
Standards: PDF (Native Rendering), DOCX/PPTX (Direct Retrieval).
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -54,51 +56,54 @@ export default function DocumentBlock({ title, url, editMode, onChange }: Docume
|
||||
{url ? (
|
||||
<div className="space-y-4">
|
||||
{isPdf ? (
|
||||
<div className="glass rounded-2xl overflow-hidden border-white/5 bg-white/5 aspect-[4/3] w-full">
|
||||
<div className="bg-white dark:bg-white/5 rounded-[2.5rem] overflow-hidden border border-slate-100 dark:border-white/10 shadow-2xl relative">
|
||||
<div className="aspect-[4/3] w-full bg-slate-100 dark:bg-black/20">
|
||||
<iframe
|
||||
src={`${displayUrl}#toolbar=0`}
|
||||
className="w-full h-full border-none"
|
||||
title={title || "Document Preview"}
|
||||
/>
|
||||
<div className="p-4 border-t border-white/5 flex items-center justify-between bg-black/40">
|
||||
<span className="text-xs font-bold text-gray-400 uppercase tracking-widest flex items-center gap-2">
|
||||
<Eye size={14} className="text-indigo-400" /> PDF Preview
|
||||
</div>
|
||||
<div className="p-6 border-t border-slate-100 dark:border-white/10 flex items-center justify-between bg-slate-50 dark:bg-black/40">
|
||||
<span className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] flex items-center gap-3">
|
||||
<Eye size={16} className="text-indigo-600 dark:text-indigo-400" /> Neural Vision Enabled
|
||||
</span>
|
||||
<a
|
||||
href={displayUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 px-4 py-2 bg-indigo-500/20 hover:bg-indigo-500/40 text-indigo-400 rounded-lg text-xs font-black uppercase tracking-widest transition-all"
|
||||
className="flex items-center gap-3 px-6 py-3 bg-indigo-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:scale-[1.05] active:scale-95 transition-all shadow-lg shadow-indigo-500/30"
|
||||
>
|
||||
<Download size={14} /> Full Screen / Download
|
||||
<Download size={16} /> Asset Extraction
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="glass p-12 rounded-3xl border border-white/5 bg-white/5 flex flex-col items-center text-center gap-6">
|
||||
<div className="w-20 h-20 rounded-2xl bg-indigo-500/10 flex items-center justify-center text-indigo-400">
|
||||
<FileText size={40} />
|
||||
<div className="bg-white dark:bg-white/5 p-16 rounded-[3rem] border border-slate-100 dark:border-white/10 shadow-sm flex flex-col items-center text-center gap-8 relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-indigo-500/40 to-transparent"></div>
|
||||
<div className="w-24 h-24 rounded-[2rem] bg-indigo-50 dark:bg-indigo-500/10 flex items-center justify-center text-indigo-600 dark:text-indigo-400 shadow-inner">
|
||||
<FileText size={48} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg font-bold text-white mb-2">Non-PDF Document</p>
|
||||
<p className="text-sm text-gray-500 max-w-sm mx-auto uppercase tracking-widest font-black leading-relaxed">
|
||||
This file cannot be previewed directly. Please download it to read.
|
||||
<div className="space-y-3">
|
||||
<p className="text-2xl font-black text-slate-900 dark:text-white uppercase tracking-tight italic">Legacy Container</p>
|
||||
<p className="text-[10px] text-slate-400 dark:text-gray-500 max-w-xs mx-auto uppercase tracking-[0.2em] font-black leading-loose">
|
||||
Source material requires local decompression for full synaptic ingestion.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href={displayUrl}
|
||||
download
|
||||
className="flex items-center gap-3 px-8 py-4 bg-indigo-600 hover:bg-indigo-500 text-white rounded-2xl font-black uppercase tracking-widest transition-all shadow-xl shadow-indigo-500/20 active:scale-95"
|
||||
className="flex items-center gap-4 px-10 py-5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-[2rem] font-black text-[10px] uppercase tracking-[0.3em] transition-all shadow-2xl shadow-indigo-500/40 active:scale-95 group"
|
||||
>
|
||||
<Download size={20} /> Download File
|
||||
<Download size={20} className="group-hover:translate-y-1 transition-transform" /> Trigger Download
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="glass border-dashed border-white/10 p-12 rounded-3xl flex flex-col items-center gap-4 text-gray-500">
|
||||
<FileText size={48} className="opacity-20" />
|
||||
<p className="font-bold uppercase tracking-widest text-xs">No file selected</p>
|
||||
<div className="bg-slate-50 dark:bg-black/20 border-2 border-dashed border-slate-200 dark:border-white/10 p-20 rounded-[3rem] flex flex-col items-center gap-6 text-slate-300 dark:text-gray-700">
|
||||
<FileText size={64} className="opacity-10" />
|
||||
<p className="font-black uppercase tracking-[0.3em] text-[10px]">No Neural Data Linked</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -50,42 +50,45 @@ export default function FillInTheBlanksBlock({ id, title, content, editMode, onC
|
||||
<div className="space-y-8" id={id}>
|
||||
<div className="space-y-2">
|
||||
{editMode ? (
|
||||
<div className="space-y-2 p-6 glass border-white/5 bg-white/5 mb-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Activity Title (Optional)</label>
|
||||
<div className="space-y-4 p-8 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2rem] mb-6 shadow-inner relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-blue-500/40"></div>
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em]">Activity Title (Optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title || ""}
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
placeholder="e.g. Fill the gaps, Quote..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm font-bold focus:border-blue-500/50 focus:outline-none"
|
||||
className="w-full bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-3 text-sm font-black uppercase tracking-tight focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all outline-none shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white">
|
||||
<h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase border-l-4 border-blue-600 pl-6 py-1">
|
||||
{title || "Fill in the Blanks"}
|
||||
</h3>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editMode ? (
|
||||
<div className="space-y-4">
|
||||
<div className="p-6 glass border-white/5 space-y-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Text with blanks (use [[answer]])</label>
|
||||
<div className="space-y-8">
|
||||
<div className="p-10 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2.5rem] space-y-4 shadow-sm relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest pl-1">Semantic Matrix (use [[answer]])</label>
|
||||
<textarea
|
||||
value={content}
|
||||
onChange={(e) => onChange({ content: e.target.value })}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl p-4 min-h-[150px] text-lg font-medium focus:outline-none focus:border-blue-500/50 transition-all"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl p-6 min-h-[150px] text-lg font-black tracking-tight text-slate-800 dark:text-white focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all placeholder:text-slate-300 resize-none shadow-inner"
|
||||
placeholder="Example: The [[capital]] of France is [[Paris]]."
|
||||
/>
|
||||
<p className="text-[10px] text-gray-500 uppercase tracking-wider">Tip: Surround any word with double brackets to create a blank.</p>
|
||||
<p className="text-[9px] text-slate-400 dark:text-gray-500 uppercase font-black italic pl-1 leading-relaxed">Neural Protocol: Encapsulate target markers within double square brackets.</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-8 glass border-white/5 rounded-3xl space-y-8">
|
||||
<div className="text-lg leading-loose text-gray-100">
|
||||
<div className="p-10 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-[3rem] space-y-10 shadow-sm hover:shadow-xl transition-all duration-700 relative overflow-hidden group/fbitem">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 group-hover/fbitem:bg-indigo-500/10 transition-colors"></div>
|
||||
<div className="text-2xl font-black text-slate-800 dark:text-gray-100 uppercase tracking-tight leading-loose relative z-10">
|
||||
{parsed.parts.map((part, i) => (
|
||||
part.type === 'text' ? (
|
||||
<span key={i}>{part.value}</span>
|
||||
<span key={i} className="mx-0.5">{part.value}</span>
|
||||
) : (
|
||||
<input
|
||||
key={i}
|
||||
@@ -97,12 +100,12 @@ export default function FillInTheBlanksBlock({ id, title, content, editMode, onC
|
||||
setUserAnswers(newAnswers);
|
||||
}}
|
||||
disabled={submitted}
|
||||
className={`mx-1 px-2 py-0 border-b-2 bg-transparent transition-all focus:outline-none text-center rounded-t-sm ${submitted
|
||||
? (isCorrect(part.index!) ? "border-green-500 text-green-400 bg-green-500/10" : "border-red-500 text-red-100 bg-red-500/10")
|
||||
: "border-blue-500/30 focus:border-blue-500 text-blue-400 focus:bg-blue-500/5"
|
||||
className={`mx-2 px-4 py-1 border-b-4 bg-slate-50 dark:bg-black/20 transition-all focus:outline-none text-center rounded-t-xl font-black uppercase tracking-widest placeholder:text-slate-300 ${submitted
|
||||
? (isCorrect(part.index!) ? "border-green-500 text-green-700 dark:text-green-400 bg-green-50 dark:bg-green-500/10" : "border-red-500 text-red-700 dark:text-red-100 bg-red-50 dark:bg-red-500/10")
|
||||
: "border-blue-500/40 focus:border-blue-600 text-blue-600 dark:text-blue-400 focus:bg-blue-500/5"
|
||||
}`}
|
||||
style={{ width: `${Math.max((part.answer?.length || 5) * 12, 60)}px` }}
|
||||
placeholder="..."
|
||||
style={{ width: `${Math.max((part.answer?.length || 5) * 16, 120)}px` }}
|
||||
placeholder="?"
|
||||
/>
|
||||
)
|
||||
))}
|
||||
@@ -111,18 +114,18 @@ export default function FillInTheBlanksBlock({ id, title, content, editMode, onC
|
||||
{!submitted && parsed.answers.length > 0 && (
|
||||
<button
|
||||
onClick={() => setSubmitted(true)}
|
||||
className="btn-premium w-full py-4 font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20"
|
||||
className="w-full py-6 bg-blue-600 text-white font-black text-[10px] uppercase tracking-[0.3em] shadow-2xl shadow-blue-500/40 hover:scale-[1.02] active:scale-[0.98] transition-all rounded-[2rem] flex items-center justify-center gap-4 relative z-10"
|
||||
>
|
||||
Validate Answers
|
||||
Execute Linguistic Validation
|
||||
</button>
|
||||
)}
|
||||
|
||||
{submitted && (
|
||||
<button
|
||||
onClick={handleReset}
|
||||
className="w-full py-4 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-xl border-white/5"
|
||||
className="w-full py-6 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-blue-600 dark:text-blue-400 font-black text-[10px] uppercase tracking-[0.3em] hover:bg-slate-50 transition-all rounded-[2rem] active:scale-[0.98] shadow-sm relative z-10"
|
||||
>
|
||||
Try Again
|
||||
Reset Semantic Chain
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -75,26 +75,29 @@ export default function HotspotBlock({
|
||||
|
||||
if (!editMode) {
|
||||
return (
|
||||
<div className="space-y-4" id={id}>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-amber-500/20 text-amber-500">
|
||||
<Search size={20} />
|
||||
<div className="space-y-6" id={id}>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-3 rounded-2xl bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-500 shadow-inner">
|
||||
<Search size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-white transition-colors">{title || "Image Hunt"}</h3>
|
||||
<p className="text-xs text-gray-500 uppercase tracking-widest font-black">{description || "Find the hidden spots!"}</p>
|
||||
<h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase transition-colors">{title || "Visual Scrutiny"}</h3>
|
||||
<p className="text-[10px] text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] font-black">{description || "Identify the hidden visual nodes"}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative aspect-video rounded-2xl overflow-hidden border border-white/5 bg-black/40">
|
||||
<div className="relative aspect-video rounded-[3rem] overflow-hidden border border-slate-100 dark:border-white/5 bg-slate-50 dark:bg-black/40 shadow-xl group/hsview">
|
||||
{imageUrl ? (
|
||||
<Image src={getImageUrl(imageUrl)} alt={title || ""} fill unoptimized className="object-cover opacity-50" />
|
||||
<Image src={getImageUrl(imageUrl)} alt={title || ""} fill unoptimized className="object-cover opacity-60 grayscale group-hover/hsview:grayscale-0 transition-all duration-700" />
|
||||
) : (
|
||||
<div className="absolute inset-0 flex items-center justify-center text-gray-600 italic text-sm">No image provided.</div>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center text-slate-300 dark:text-gray-700 gap-4">
|
||||
<ImageIcon size={48} className="opacity-20" />
|
||||
<p className="text-[9px] font-black uppercase tracking-widest italic">Temporal image stream offline.</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute inset-0 flex items-center justify-center backdrop-blur-[2px]">
|
||||
<div className="text-center space-y-2">
|
||||
<Crosshair className="w-12 h-12 text-white/20 mx-auto" />
|
||||
<p className="text-xs font-bold text-white/40 uppercase tracking-widest">Interactive Game Preview (Switch to Student View to Play)</p>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center backdrop-blur-[4px] bg-slate-900/10 dark:bg-black/40 p-8 text-center group-hover/hsview:backdrop-blur-0 transition-all duration-700">
|
||||
<div className="space-y-4 max-w-sm">
|
||||
<Crosshair className="w-16 h-16 text-white/40 mx-auto animate-pulse" />
|
||||
<p className="text-[10px] font-black text-white uppercase tracking-[0.3em] leading-relaxed">Structural Game Synchronization Pending<br /><span className="text-white/40 italic">(Activate Simulation Mode to Initialize)</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -104,46 +107,50 @@ export default function HotspotBlock({
|
||||
|
||||
return (
|
||||
<div className="space-y-6" id={id}>
|
||||
<div className="p-6 glass border-white/5 bg-white/5 space-y-6 rounded-3xl">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500">Game Title</label>
|
||||
<div className="p-10 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 space-y-10 rounded-[3rem] shadow-sm relative overflow-hidden group/hseditor shadow-xl shadow-slate-200/50 dark:shadow-none">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-amber-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 group-hover/hseditor:bg-amber-500/10 transition-colors"></div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10 relative z-10">
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-3">
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 pl-1">Operational Protocol (Title)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title || ""}
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
placeholder="e.g. Parts of the Body..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2 text-sm font-bold focus:border-amber-500/50 focus:outline-none"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl px-6 py-4 text-sm font-black uppercase tracking-tight text-slate-800 dark:text-white focus:ring-4 focus:ring-amber-500/10 focus:border-amber-500 transition-all outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500">Student Instructions</label>
|
||||
<div className="space-y-3">
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 pl-1">Tactical Instructions</label>
|
||||
<input
|
||||
type="text"
|
||||
value={description || ""}
|
||||
onChange={(e) => onChange({ description: e.target.value })}
|
||||
placeholder="e.g. Find and click on the following items..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2 text-sm focus:border-amber-500/50 focus:outline-none"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl px-6 py-4 text-sm font-bold text-slate-600 dark:text-gray-300 focus:ring-4 focus:ring-amber-500/10 focus:border-amber-500 transition-all outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500">Game Image</label>
|
||||
<div className="space-y-3">
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 pl-1">Visual Baseline (Main Image)</label>
|
||||
{!imageUrl ? (
|
||||
<button
|
||||
onClick={() => setIsAssetPickerOpen(true)}
|
||||
className="w-full aspect-video rounded-2xl border-2 border-dashed border-white/10 hover:border-amber-500/50 hover:bg-amber-500/5 transition-all flex flex-col items-center justify-center gap-2 group"
|
||||
className="w-full aspect-video rounded-[2rem] border-2 border-dashed border-slate-200 dark:border-white/10 hover:border-amber-500/50 hover:bg-white dark:hover:bg-amber-500/5 transition-all flex flex-col items-center justify-center gap-4 group/imgup"
|
||||
>
|
||||
<ImageIcon className="text-gray-600 group-hover:text-amber-500 transition-colors" size={32} />
|
||||
<span className="text-xs font-bold text-gray-500 uppercase tracking-widest group-hover:text-amber-300">Choose Image</span>
|
||||
<div className="p-4 rounded-2xl bg-slate-50 dark:bg-white/5 group-hover/imgup:bg-amber-500/10 transition-colors">
|
||||
<ImageIcon className="text-slate-300 dark:text-gray-600 group-hover/imgup:text-amber-600 transition-colors" size={32} />
|
||||
</div>
|
||||
<span className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest group-hover/imgup:text-amber-700">Initialize Visual Stream</span>
|
||||
</button>
|
||||
) : (
|
||||
<div className="relative aspect-video rounded-2xl overflow-hidden group">
|
||||
<Image src={getImageUrl(imageUrl)} alt="Hotspot base" fill unoptimized className="object-cover" />
|
||||
<div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
|
||||
<button onClick={() => setIsAssetPickerOpen(true)} className="p-2 bg-white/10 hover:bg-white/20 rounded-lg text-white transition-all"><ImageIcon size={18} /></button>
|
||||
<button onClick={() => onChange({ imageUrl: undefined })} className="p-2 bg-red-500/20 hover:bg-red-500/40 rounded-lg text-red-400 transition-all"><Trash2 size={18} /></button>
|
||||
<div className="relative aspect-video rounded-[2rem] overflow-hidden border border-slate-100 dark:border-white/10 group/imgpreview shadow-inner">
|
||||
<Image src={getImageUrl(imageUrl)} alt="Hotspot base" fill unoptimized className="object-cover select-none" />
|
||||
<div className="absolute inset-0 bg-slate-900/60 opacity-0 group-hover/imgpreview:opacity-100 transition-all duration-500 flex items-center justify-center gap-4 backdrop-blur-sm">
|
||||
<button onClick={() => setIsAssetPickerOpen(true)} className="p-4 bg-white/10 hover:bg-white hover:text-slate-900 rounded-2xl text-white transition-all transform hover:scale-110"><ImageIcon size={20} /></button>
|
||||
<button onClick={() => onChange({ imageUrl: undefined })} className="p-4 bg-red-500/20 hover:bg-red-500 rounded-2xl text-white transition-all transform hover:scale-110"><Trash2 size={20} /></button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -151,24 +158,24 @@ export default function HotspotBlock({
|
||||
</div>
|
||||
|
||||
{imageUrl && (
|
||||
<div className="space-y-4 pt-4 border-t border-white/5">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500">Define Hotspots (Click on the image below)</label>
|
||||
<span className="text-[10px] font-bold text-amber-500 bg-amber-500/10 px-2 py-1 rounded uppercase tracking-widest">{hotspots.length} Defined</span>
|
||||
<div className="space-y-8 pt-10 border-t border-slate-50 dark:border-white/5">
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 italic">Structural Node Mapping (Click Image Area)</label>
|
||||
<span className="text-[9px] font-black text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10 px-4 py-2 rounded-xl border border-amber-100 dark:border-amber-500/20 shadow-inner uppercase tracking-widest">{hotspots.length} Nodes Synchronized</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
|
||||
<div className="lg:col-span-2">
|
||||
<div
|
||||
ref={containerRef}
|
||||
onClick={handleImageClick}
|
||||
className="relative aspect-video rounded-2xl overflow-hidden border-2 border-white/10 cursor-crosshair shadow-2xl"
|
||||
className="relative aspect-video rounded-[2.5rem] overflow-hidden border-2 border-slate-100 dark:border-white/10 cursor-crosshair bg-slate-50 dark:bg-black group/mpro shadow-2xl transition-all duration-500 hover:shadow-amber-500/10"
|
||||
>
|
||||
<Image src={getImageUrl(imageUrl)} alt="Define Hotspots" fill unoptimized className="object-cover select-none" />
|
||||
{hotspots.map((h) => (
|
||||
<Image src={getImageUrl(imageUrl)} alt="Define Hotspots" fill unoptimized className="object-cover select-none group-hover/mpro:opacity-80 transition-opacity" />
|
||||
{hotspots.map((h, hidx) => (
|
||||
<div
|
||||
key={h.id}
|
||||
className="absolute group/pin"
|
||||
className="absolute group/pin z-20"
|
||||
style={{
|
||||
left: `${h.x}%`,
|
||||
top: `${h.y}%`,
|
||||
@@ -176,19 +183,21 @@ export default function HotspotBlock({
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bg-amber-500/30 border-2 border-amber-400 rounded-full flex items-center justify-center relative transition-transform hover:scale-110"
|
||||
className="bg-amber-500/20 border-2 border-amber-500 dark:border-amber-400 rounded-full flex items-center justify-center relative transition-all duration-500 hover:scale-125 hover:bg-amber-500/40"
|
||||
style={{
|
||||
width: `${h.radius * 2}vw`,
|
||||
height: `${h.radius * 2}vw`,
|
||||
maxWidth: '100px',
|
||||
maxHeight: '100px'
|
||||
width: `${h.radius * 2.5}vw`,
|
||||
height: `${h.radius * 2.5}vw`,
|
||||
maxWidth: '120px',
|
||||
maxHeight: '120px',
|
||||
minWidth: '40px',
|
||||
minHeight: '40px'
|
||||
}}
|
||||
>
|
||||
<div className="bg-amber-500 rounded-full p-1 text-black shadow-lg">
|
||||
<MapPin size={12} strokeWidth={3} />
|
||||
<div className="bg-amber-600 dark:bg-amber-500 rounded-full p-2 text-white shadow-2xl ring-4 ring-amber-500/20">
|
||||
<Crosshair size={14} strokeWidth={3} className="group-hover/pin:rotate-90 transition-transform duration-500" />
|
||||
</div>
|
||||
<div className="absolute top-full mt-2 left-1/2 -translate-x-1/2 px-2 py-1 bg-black/80 rounded text-[10px] font-bold text-white whitespace-nowrap opacity-0 group-hover/pin:opacity-100 transition-opacity">
|
||||
{h.label}
|
||||
<div className="absolute top-full mt-3 left-1/2 -translate-x-1/2 px-4 py-2 bg-slate-900 dark:bg-white text-white dark:text-slate-900 rounded-xl text-[10px] font-black uppercase tracking-tight whitespace-nowrap opacity-0 group-hover/pin:opacity-100 transition-all transform translate-y-2 group-hover/pin:translate-y-0 shadow-2xl z-50">
|
||||
NODE #{hidx + 1}: {h.label}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -196,38 +205,48 @@ export default function HotspotBlock({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 max-h-[400px] overflow-y-auto custom-scrollbar pr-2">
|
||||
<div className="space-y-4 max-h-[500px] overflow-y-auto custom-scrollbar pr-3">
|
||||
{hotspots.length === 0 ? (
|
||||
<div className="h-full flex flex-col items-center justify-center text-center p-6 border-2 border-dashed border-white/5 rounded-2xl">
|
||||
<Plus className="text-gray-700 mb-2" size={24} />
|
||||
<p className="text-xs text-gray-600 font-bold uppercase tracking-widest">Click on the image to add hotspots</p>
|
||||
<div className="h-full flex flex-col items-center justify-center text-center p-12 bg-slate-50 dark:bg-black/20 border-2 border-dashed border-slate-200 dark:border-white/10 rounded-[2.5rem] space-y-4">
|
||||
<div className="p-4 bg-white dark:bg-white/5 rounded-2xl shadow-inner italic">
|
||||
<Plus className="text-slate-300 dark:text-gray-700" size={32} />
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-400 dark:text-gray-500 font-black uppercase tracking-widest">Execute visual contact on the map area to generate nodes.</p>
|
||||
</div>
|
||||
) : (
|
||||
hotspots.map((h, idx) => (
|
||||
<div key={h.id} className="p-4 bg-white/5 border border-white/10 rounded-xl space-y-3 animate-in fade-in slide-in-from-right-4 duration-300">
|
||||
<div key={h.id} className="p-6 bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-[1.5rem] space-y-5 animate-in fade-in slide-in-from-right-4 duration-500 group/hscard hover:border-amber-500/30 transition-all shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] font-black text-amber-500 uppercase tracking-widest">Hotspot #{idx + 1}</span>
|
||||
<button onClick={() => removeHotspot(idx)} className="p-1 hover:bg-red-500/20 text-red-500 rounded transition-colors"><Trash2 size={12} /></button>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-6 h-6 rounded-lg bg-amber-500 flex items-center justify-center text-[10px] font-black text-white shadow-lg">#{idx + 1}</span>
|
||||
<span className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] italic">Structural Node</span>
|
||||
</div>
|
||||
<button onClick={() => removeHotspot(idx)} className="p-2 bg-red-50 dark:bg-red-500/5 hover:bg-red-500 hover:text-white rounded-xl text-red-500 transition-all active:scale-90"><Trash2 size={14} /></button>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[9px] font-black uppercase text-slate-400 dark:text-gray-600 pl-1">Identification Label</label>
|
||||
<input
|
||||
type="text"
|
||||
value={h.label}
|
||||
onChange={(e) => updateHotspot(idx, { label: e.target.value })}
|
||||
placeholder="Item name..."
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg px-3 py-1.5 text-xs font-bold focus:border-amber-500/50 focus:outline-none"
|
||||
className="w-full bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-2 text-xs font-black uppercase tracking-tight text-slate-800 dark:text-white focus:ring-4 focus:ring-amber-500/10 outline-none transition-all shadow-inner"
|
||||
/>
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="text-[9px] font-black uppercase tracking-widest text-gray-600">Radius</label>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between pl-1">
|
||||
<label className="text-[9px] font-black uppercase text-slate-400 dark:text-gray-600">Influence Radius</label>
|
||||
<span className="text-[10px] font-black text-amber-600 dark:text-amber-400 font-mono">{h.radius}%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="2"
|
||||
max="15"
|
||||
value={h.radius}
|
||||
onChange={(e) => updateHotspot(idx, { radius: parseInt(e.target.value) })}
|
||||
className="flex-1 accent-amber-500 h-1 bg-white/10 rounded-lg appearance-none cursor-pointer"
|
||||
className="w-full h-1.5 bg-slate-200 dark:bg-white/10 rounded-lg appearance-none cursor-pointer accent-amber-500 transition-all"
|
||||
/>
|
||||
<span className="text-[10px] font-bold text-gray-400 w-6">{h.radius}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -43,27 +43,28 @@ export default function MatchingBlock({ id, title, pairs, editMode, onChange }:
|
||||
<div className="space-y-8" id={id}>
|
||||
<div className="space-y-2">
|
||||
{editMode ? (
|
||||
<div className="space-y-2 p-6 glass border-white/5 bg-white/5 mb-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Activity Title (Optional)</label>
|
||||
<div className="space-y-4 p-8 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2rem] mb-6 shadow-inner relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-blue-500/40"></div>
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em]">Activity Title (Optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title || ""}
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
placeholder="e.g. Match the concepts..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm font-bold focus:border-blue-500/50 focus:outline-none"
|
||||
className="w-full bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-3 text-sm font-black uppercase tracking-tight focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all outline-none shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white">
|
||||
<h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase border-l-4 border-blue-600 pl-6 py-1">
|
||||
{title || "Concept Matching"}
|
||||
</h3>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editMode ? (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-6">
|
||||
{pairs.map((pair, idx) => (
|
||||
<div key={idx} className="flex gap-4 items-center animate-in slide-in-from-left-4 duration-300">
|
||||
<div key={idx} className="flex gap-4 items-center bg-white dark:bg-white/5 p-4 rounded-[2rem] border border-slate-100 dark:border-white/10 shadow-sm animate-in slide-in-from-left-4 duration-300 group/pair">
|
||||
<input
|
||||
value={pair.left}
|
||||
onChange={(e) => {
|
||||
@@ -71,10 +72,10 @@ export default function MatchingBlock({ id, title, pairs, editMode, onChange }:
|
||||
newPairs[idx].left = e.target.value;
|
||||
onChange({ pairs: newPairs });
|
||||
}}
|
||||
className="flex-1 bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:border-blue-500/50 focus:outline-none"
|
||||
placeholder="Term A"
|
||||
className="flex-1 bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-xl px-5 py-3 text-sm font-bold text-slate-700 dark:text-gray-200 focus:ring-4 focus:ring-blue-500/10 transition-all outline-none shadow-inner"
|
||||
placeholder="Synaptic Origin"
|
||||
/>
|
||||
<span className="text-gray-500 font-bold">↔</span>
|
||||
<div className="w-10 h-10 rounded-full bg-blue-50 dark:bg-blue-500/10 flex items-center justify-center text-blue-600 font-black shadow-inner">↔</div>
|
||||
<input
|
||||
value={pair.right}
|
||||
onChange={(e) => {
|
||||
@@ -82,47 +83,50 @@ export default function MatchingBlock({ id, title, pairs, editMode, onChange }:
|
||||
newPairs[idx].right = e.target.value;
|
||||
onChange({ pairs: newPairs });
|
||||
}}
|
||||
className="flex-1 bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:border-blue-500/50 focus:outline-none"
|
||||
placeholder="Definition B"
|
||||
className="flex-1 bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-xl px-5 py-3 text-sm font-bold text-slate-700 dark:text-gray-200 focus:ring-4 focus:ring-blue-500/10 transition-all outline-none shadow-inner"
|
||||
placeholder="Semantic Destination"
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
const newPairs = pairs.filter((_, i) => i !== idx);
|
||||
onChange({ pairs: newPairs });
|
||||
}}
|
||||
className="p-2 text-gray-500 hover:text-red-400"
|
||||
className="p-3 bg-red-50 dark:bg-red-500/5 hover:bg-red-500 hover:text-white rounded-xl text-red-500 transition-all active:scale-90 opacity-0 group-hover/pair:opacity-100"
|
||||
>
|
||||
×
|
||||
<span className="text-xl">×</span>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
onClick={() => onChange({ pairs: [...pairs, { left: "", right: "" }] })}
|
||||
className="w-full py-4 border-dashed border-2 border-white/10 text-gray-400 hover:text-white hover:border-blue-500/30 transition-all font-bold text-xs uppercase tracking-widest rounded-xl"
|
||||
className="w-full py-6 bg-slate-50 dark:bg-black/20 border-2 border-dashed border-slate-200 dark:border-white/10 text-slate-400 dark:text-gray-600 hover:text-blue-600 dark:hover:text-blue-400 hover:border-blue-500/40 hover:bg-white dark:hover:bg-white/5 transition-all font-black text-[10px] uppercase tracking-[0.3em] rounded-[2rem] shadow-inner"
|
||||
>
|
||||
+ Add Pair
|
||||
+ Integrate New Synaptic Pair
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 p-8 glass border-white/5 rounded-3xl relative">
|
||||
<div className="space-y-4">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-4 block">Term</label>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 p-10 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-[3rem] shadow-sm relative overflow-hidden group/match">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-blue-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 group-hover/match:bg-blue-500/10 transition-colors"></div>
|
||||
|
||||
<div className="space-y-6 relative z-10">
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-6 block pl-1 italic">Synaptic Origin (Term)</label>
|
||||
{pairs.map((pair, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => !submitted && setSelectedLeft(i)}
|
||||
className={`w-full p-4 rounded-xl border text-left text-sm font-bold transition-all ${selectedLeft === i ? "border-blue-500 bg-blue-500/10 text-white shadow-lg" :
|
||||
matches[i] !== undefined ? "border-blue-500/20 bg-blue-500/5 text-blue-400" :
|
||||
"border-white/5 bg-white/5 text-gray-200 hover:border-white/20"
|
||||
className={`w-full p-6 h-20 rounded-[1.5rem] border-2 text-left text-sm font-black uppercase tracking-tight transition-all duration-500 flex items-center shadow-sm ${selectedLeft === i ? "border-blue-600 bg-blue-600 text-white shadow-2xl shadow-blue-500/40 -translate-y-1 scale-[1.02]" :
|
||||
matches[i] !== undefined ? "border-blue-500/20 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 ring-4 ring-blue-500/5 scale-[0.98] opacity-60" :
|
||||
"border-slate-100 dark:border-white/10 bg-slate-50 dark:bg-black/20 text-slate-700 dark:text-gray-300 hover:border-blue-400 hover:bg-white dark:hover:bg-white/5"
|
||||
}`}
|
||||
>
|
||||
{pair.left}
|
||||
<span className="truncate">{pair.left}</span>
|
||||
{matches[i] !== undefined && <span className="ml-auto text-xs opacity-40">✓</span>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-4 block">Definition</label>
|
||||
<div className="space-y-6 relative z-10">
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-6 block pl-1 italic">Semantic Target (Definition)</label>
|
||||
{shuffledRight.map((item, i) => {
|
||||
const matchedLeftIdx = Object.keys(matches).find(k => matches[parseInt(k)] === item.originalIdx);
|
||||
const isCorrect = submitted && matchedLeftIdx !== undefined && parseInt(matchedLeftIdx) === item.originalIdx;
|
||||
@@ -133,38 +137,38 @@ export default function MatchingBlock({ id, title, pairs, editMode, onChange }:
|
||||
key={i}
|
||||
disabled={selectedLeft === null || submitted}
|
||||
onClick={() => handleMatch(selectedLeft!, item.originalIdx)}
|
||||
className={`w-full p-4 rounded-xl border text-left text-sm font-bold transition-all ${selectedLeft !== null && matchedLeftIdx === undefined ? "hover:border-blue-500/50 hover:bg-white/5" : ""
|
||||
} ${isCorrect ? "border-green-500 bg-green-500/20 text-green-400" :
|
||||
isWrong ? "border-red-500 bg-red-500/20 text-red-100" :
|
||||
matchedLeftIdx !== undefined ? "border-blue-500/30 bg-blue-500/5 text-blue-400" :
|
||||
"border-white/5 bg-white/5 text-gray-200"
|
||||
className={`w-full p-6 min-h-20 rounded-[1.5rem] border-2 text-left text-[11px] font-bold uppercase tracking-wider leading-relaxed transition-all duration-500 shadow-sm ${selectedLeft !== null && matchedLeftIdx === undefined ? "hover:border-blue-500/50 hover:bg-white dark:hover:bg-white/5 hover:-translate-y-0.5" : ""
|
||||
} ${isCorrect ? "border-green-500 bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400 shadow-xl shadow-green-500/20" :
|
||||
isWrong ? "border-red-500 bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-100 shadow-xl shadow-red-500/20" :
|
||||
matchedLeftIdx !== undefined ? "border-blue-500/20 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 ring-4 ring-blue-500/5 scale-[0.98] opacity-60" :
|
||||
"border-slate-100 dark:border-white/10 bg-slate-50 dark:bg-black/20 text-slate-700 dark:text-gray-300"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span>{item.value}</span>
|
||||
{isCorrect && <span>✅</span>}
|
||||
{isWrong && <span>❌</span>}
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="flex-1">{item.value}</span>
|
||||
{isCorrect && <span className="text-xl rotate-12 transition-transform duration-700 group-hover/match:rotate-0">✅</span>}
|
||||
{isWrong && <span className="text-xl animate-pulse">❌</span>}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2 pt-8 border-t border-white/5">
|
||||
<div className="md:col-span-2 pt-10 border-t border-slate-50 dark:border-white/5 relative z-10">
|
||||
{!submitted && Object.keys(matches).length === pairs.length && (
|
||||
<button
|
||||
onClick={() => setSubmitted(true)}
|
||||
className="btn-premium w-full py-4 font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20"
|
||||
className="w-full py-6 bg-blue-600 text-white font-black text-[10px] uppercase tracking-[0.3em] shadow-2xl shadow-blue-500/40 hover:scale-[1.02] active:scale-[0.98] transition-all rounded-[2rem] flex items-center justify-center gap-4 animate-in fade-in zoom-in duration-500"
|
||||
>
|
||||
Validate Matching
|
||||
Reconcile Semantic Network
|
||||
</button>
|
||||
)}
|
||||
{submitted && (
|
||||
<button
|
||||
onClick={handleReset}
|
||||
className="w-full py-4 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-xl border-white/5"
|
||||
className="w-full py-6 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-blue-600 dark:text-blue-400 font-black text-[10px] uppercase tracking-[0.3em] hover:bg-slate-50 transition-all rounded-[2rem] active:scale-[0.98] shadow-sm"
|
||||
>
|
||||
Try Again
|
||||
Reset Synaptic Grid
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -64,53 +64,56 @@ export default function MediaBlock({ title, url, type, config, editMode, onChang
|
||||
{/* Block Header */}
|
||||
<div className="space-y-2">
|
||||
{editMode ? (
|
||||
<div className="space-y-2 p-6 glass border-white/5 bg-white/5 mb-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Activity Title (Optional)</label>
|
||||
<div className="space-y-4 p-8 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2rem] mb-6 shadow-inner relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-blue-500/40"></div>
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em]">Activity Title (Optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title || ""}
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
placeholder="e.g. Explainer Video, Audio Guide..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm font-bold focus:border-blue-500/50 focus:outline-none"
|
||||
placeholder="e.g. Masterclass Stream, Acoustic Analysis..."
|
||||
className="w-full bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-3 text-sm font-black uppercase tracking-tight focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all outline-none shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
title && <h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white">{title}</h3>
|
||||
title && <h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase border-l-4 border-blue-600 pl-6 py-1">{title}</h3>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editMode && (
|
||||
<div className="space-y-6 p-6 glass border-blue-500/10 mb-8 bg-blue-500/5">
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<div className="space-y-8 p-10 bg-white dark:bg-white/5 border border-blue-500/10 dark:border-blue-500/20 mb-10 rounded-[2.5rem] shadow-xl shadow-blue-500/5 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-blue-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2"></div>
|
||||
<div className="flex items-center gap-4 relative z-10">
|
||||
<button
|
||||
onClick={() => setSourceType("url")}
|
||||
className={`px-4 py-2 text-[10px] uppercase font-black tracking-widest rounded-lg transition-all ${sourceType === "url" ? "bg-blue-500 text-white shadow-lg" : "text-gray-500 hover:text-white"}`}
|
||||
className={`px-6 py-2 text-[10px] uppercase font-black tracking-[0.2em] rounded-xl transition-all border ${sourceType === "url" ? "bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-500/30" : "bg-slate-50 dark:bg-white/5 text-slate-400 dark:text-gray-500 border-slate-100 hover:border-slate-200"}`}
|
||||
>
|
||||
External URL
|
||||
External Stream
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSourceType("upload")}
|
||||
className={`px-4 py-2 text-[10px] uppercase font-black tracking-widest rounded-lg transition-all ${sourceType === "upload" ? "bg-blue-500 text-white shadow-lg" : "text-gray-500 hover:text-white"}`}
|
||||
className={`px-6 py-2 text-[10px] uppercase font-black tracking-[0.2em] rounded-xl transition-all border ${sourceType === "upload" ? "bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-500/30" : "bg-slate-50 dark:bg-white/5 text-slate-400 dark:text-gray-500 border-slate-100 hover:border-slate-200"}`}
|
||||
>
|
||||
Upload File
|
||||
Direct Asset
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
|
||||
{sourceType === "url" ? (
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Media URL</label>
|
||||
<div className="space-y-3">
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest pl-1">Media Source Locator</label>
|
||||
<input
|
||||
type="text"
|
||||
value={url.startsWith("/") ? "" : url}
|
||||
onChange={(e) => onChange({ url: e.target.value })}
|
||||
placeholder="YouTube, Vimeo or static link"
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm focus:border-blue-500/50 focus:outline-none"
|
||||
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-4 text-sm font-bold focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all outline-none shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">File Manager</label>
|
||||
<div className="space-y-3">
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest pl-1">Asset Pipeline</label>
|
||||
<FileUpload
|
||||
currentUrl={url.startsWith("/") ? url : undefined}
|
||||
onUploadComplete={(newUrl) => onChange({ url: newUrl })}
|
||||
@@ -118,46 +121,47 @@ export default function MediaBlock({ title, url, type, config, editMode, onChang
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Playback Limit (0 = Unlimited)</label>
|
||||
<div className="space-y-3">
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest pl-1">Play Capacity (0 = Inf)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={maxPlays}
|
||||
onChange={(e) => onChange({ config: { ...config, maxPlays: parseInt(e.target.value) || 0 } })}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm focus:border-blue-500/50 focus:outline-none h-11"
|
||||
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-4 text-sm font-bold focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all outline-none shadow-inner h-14"
|
||||
/>
|
||||
<p className="text-[10px] text-gray-500 uppercase leading-relaxed mt-2">Prevent content fatigue by limiting how many times a student can watch/listen.</p>
|
||||
<p className="text-[9px] text-slate-400 dark:text-gray-500 uppercase font-black italic pl-1 leading-relaxed">Throttle cognitive load by limiting session repetition.</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Additional Options</label>
|
||||
<div className="flex items-center gap-3 bg-white/5 border border-white/10 rounded-lg px-4 py-2 h-11">
|
||||
<div className="space-y-3">
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest pl-1">Modalities</label>
|
||||
<div className="flex items-center gap-4 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl px-6 h-14 shadow-inner">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={`show-transcript-${title}`} // Unique ID
|
||||
checked={config.show_transcript !== false} // Default to true
|
||||
onChange={(e) => onChange({ config: { ...config, show_transcript: e.target.checked } })}
|
||||
className="w-4 h-4 rounded border-gray-600 text-blue-600 focus:ring-blue-500 bg-gray-700"
|
||||
className="w-6 h-6 rounded-lg border-2 border-slate-200 dark:border-white/10 appearance-none checked:bg-blue-600 checked:border-blue-600 transition-all cursor-pointer shadow-sm"
|
||||
/>
|
||||
<label htmlFor={`show-transcript-${title}`} className="text-sm text-gray-300 font-medium select-none cursor-pointer">
|
||||
Show Interactive Transcript
|
||||
<label htmlFor={`show-transcript-${title}`} className="text-sm text-slate-600 dark:text-gray-300 font-black uppercase tracking-tight select-none cursor-pointer">
|
||||
Interactive Subtitles
|
||||
</label>
|
||||
</div>
|
||||
<p className="text-[10px] text-gray-500 uppercase leading-relaxed mt-2">Uncheck to hide transcription text (e.g. for listening tests).</p>
|
||||
<p className="text-[9px] text-slate-400 dark:text-gray-500 uppercase font-black italic pl-1 leading-relaxed">Enable for accessibility; disable for auditory tests.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Markers Editor */}
|
||||
<div className="space-y-4 pt-6 border-t border-white/10">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest block">Interactive Questions (Timestamps)</label>
|
||||
<div className="space-y-6 pt-10 border-t border-slate-100 dark:border-white/10 relative z-10">
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] block pl-1">Neural Interactivity Markers (Timestamps)</label>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-4">
|
||||
{(config.markers || []).map((marker, idx) => (
|
||||
<div key={idx} className="bg-white/5 p-4 rounded-lg border border-white/5 space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs font-mono bg-blue-500/20 text-blue-400 px-2 py-1 rounded">
|
||||
<div key={idx} className="bg-slate-50 dark:bg-black/40 p-8 rounded-[2rem] border border-slate-200 dark:border-white/5 space-y-6 shadow-inner group/marker">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="px-5 py-3 rounded-2xl bg-blue-600 text-white text-xs font-black italic shadow-lg shadow-blue-500/30">
|
||||
{Math.floor(marker.timestamp / 60)}:{String(marker.timestamp % 60).padStart(2, '0')}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
value={marker.question}
|
||||
onChange={(e) => {
|
||||
@@ -165,7 +169,8 @@ export default function MediaBlock({ title, url, type, config, editMode, onChang
|
||||
newMarkers[idx].question = e.target.value;
|
||||
onChange({ config: { ...config, markers: newMarkers } });
|
||||
}}
|
||||
className="text-sm bg-transparent border-b border-white/10 flex-1 focus:border-blue-500 outline-none"
|
||||
placeholder="Question for this timestamp..."
|
||||
className="flex-1 bg-transparent border-b border-slate-200 dark:border-white/10 focus:border-blue-500 outline-none text-sm font-bold text-slate-700 dark:text-white py-2"
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
@@ -187,17 +192,17 @@ export default function MediaBlock({ title, url, type, config, editMode, onChang
|
||||
newMarkers.splice(idx, 1);
|
||||
onChange({ config: { ...config, markers: newMarkers } });
|
||||
}}
|
||||
className="text-red-400 hover:text-red-300 p-1"
|
||||
className="text-slate-400 hover:text-red-500 p-2 transition-colors"
|
||||
>
|
||||
×
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-x"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Options Management */}
|
||||
<div className="pl-14 space-y-2">
|
||||
<label className="text-[10px] font-bold text-gray-500 uppercase">Options</label>
|
||||
<div className="pl-24 space-y-3">
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest">Response Vectors</label>
|
||||
{marker.options.map((opt, optIdx) => (
|
||||
<div key={optIdx} className="flex items-center gap-2">
|
||||
<div key={optIdx} className="flex items-center gap-3">
|
||||
<input
|
||||
type="radio"
|
||||
name={`correct-${idx}`}
|
||||
@@ -207,7 +212,7 @@ export default function MediaBlock({ title, url, type, config, editMode, onChang
|
||||
newMarkers[idx].correctIndex = optIdx;
|
||||
onChange({ config: { ...config, markers: newMarkers } });
|
||||
}}
|
||||
className="accent-green-500"
|
||||
className="w-5 h-5 accent-green-500 cursor-pointer"
|
||||
/>
|
||||
<input
|
||||
value={opt}
|
||||
@@ -216,7 +221,7 @@ export default function MediaBlock({ title, url, type, config, editMode, onChang
|
||||
newMarkers[idx].options[optIdx] = e.target.value;
|
||||
onChange({ config: { ...config, markers: newMarkers } });
|
||||
}}
|
||||
className={`text-xs bg-transparent border border-white/10 rounded px-2 py-1 flex-1 ${marker.correctIndex === optIdx ? 'text-green-400 border-green-500/30' : ''}`}
|
||||
className={`flex-1 bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-2 text-sm font-medium focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all outline-none shadow-sm ${marker.correctIndex === optIdx ? 'text-green-600 dark:text-green-400 border-green-500/30' : 'text-slate-700 dark:text-gray-300'}`}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
@@ -227,9 +232,9 @@ export default function MediaBlock({ title, url, type, config, editMode, onChang
|
||||
}
|
||||
onChange({ config: { ...config, markers: newMarkers } });
|
||||
}}
|
||||
className="text-gray-600 hover:text-red-400 px-2"
|
||||
className="text-slate-400 hover:text-red-500 p-2 transition-colors"
|
||||
>
|
||||
×
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-x"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
@@ -239,27 +244,27 @@ export default function MediaBlock({ title, url, type, config, editMode, onChang
|
||||
newMarkers[idx].options.push(`Option ${newMarkers[idx].options.length + 1}`);
|
||||
onChange({ config: { ...config, markers: newMarkers } });
|
||||
}}
|
||||
className="text-[10px] text-blue-400 hover:text-blue-300 uppercase font-bold tracking-widest mt-1"
|
||||
className="text-[10px] text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 uppercase font-black tracking-widest mt-2 px-4 py-2 rounded-xl bg-blue-500/10 hover:bg-blue-500/20 transition-colors"
|
||||
>
|
||||
+ Add Option
|
||||
+ Add Response Vector
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
<div className="grid grid-cols-4 gap-4 p-6 bg-slate-100 dark:bg-white/5 rounded-2xl border border-slate-200 dark:border-white/10 shadow-inner">
|
||||
<input
|
||||
code-type="number"
|
||||
type="number"
|
||||
placeholder="Sec"
|
||||
id="new-marker-time"
|
||||
className="col-span-1 bg-white/5 border border-white/10 rounded px-3 py-2 text-sm"
|
||||
className="col-span-1 bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-2 text-sm font-medium focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all outline-none shadow-sm"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Question?"
|
||||
id="new-marker-question"
|
||||
className="col-span-2 bg-white/5 border border-white/10 rounded px-3 py-2 text-sm"
|
||||
className="col-span-2 bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-2 text-sm font-medium focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all outline-none shadow-sm"
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
@@ -281,12 +286,12 @@ export default function MediaBlock({ title, url, type, config, editMode, onChang
|
||||
questionInput.value = "";
|
||||
}
|
||||
}}
|
||||
className="col-span-1 bg-blue-500 hover:bg-blue-600 text-white rounded text-xs font-bold uppercase"
|
||||
className="col-span-1 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-xs font-black uppercase tracking-widest shadow-lg shadow-blue-500/30 transition-all"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[10px] text-gray-500 uppercase leading-relaxed">
|
||||
<p className="text-[10px] text-slate-400 dark:text-gray-500 uppercase font-black italic leading-relaxed pl-1">
|
||||
Questions will pause the video at the specified second. Only simple Yes/No questions supported currently.
|
||||
</p>
|
||||
</div>
|
||||
@@ -305,10 +310,13 @@ export default function MediaBlock({ title, url, type, config, editMode, onChang
|
||||
/>
|
||||
|
||||
{!editMode && maxPlays > 0 && (
|
||||
<div className="mt-4 flex items-center justify-between px-4 py-2 glass bg-white/5 border-white/5 rounded-lg">
|
||||
<span className="text-xs text-gray-500 uppercase font-medium">Plays Remaining</span>
|
||||
<span className={`text-sm font-bold ${maxPlays - localPlays <= 1 ? 'text-orange-400' : 'text-blue-400'}`}>
|
||||
{Math.max(0, maxPlays - localPlays)} / {maxPlays}
|
||||
<div className="mt-6 flex items-center justify-between px-8 py-4 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-[2rem] shadow-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></div>
|
||||
<span className="text-[10px] text-slate-400 dark:text-gray-500 uppercase font-black tracking-widest">Cognitive Reserve Remaining</span>
|
||||
</div>
|
||||
<span className={`text-sm font-black italic ${maxPlays - localPlays <= 1 ? 'text-orange-500' : 'text-blue-600 dark:text-blue-400'}`}>
|
||||
{Math.max(0, maxPlays - localPlays)} / {maxPlays} Access Vectors
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -39,25 +39,26 @@ export default function MemoryBlock({ id, title, pairs = [], editMode, onChange
|
||||
|
||||
if (!editMode) {
|
||||
return (
|
||||
<div className="space-y-4" id={id}>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white shadow-lg shadow-indigo-500/20">
|
||||
<Brain size={24} />
|
||||
<div className="space-y-8" id={id}>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="w-16 h-16 rounded-[1.5rem] bg-indigo-600 dark:bg-indigo-500 flex items-center justify-center text-white shadow-2xl shadow-indigo-500/30 transform -rotate-3 hover:rotate-0 transition-transform duration-500">
|
||||
<Brain size={32} strokeWidth={2.5} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-black tracking-tight text-white uppercase tracking-[0.1em]">{title || "Memory Match"}</h3>
|
||||
<p className="text-[10px] font-black text-indigo-400 uppercase tracking-widest">Brain Training Exercise</p>
|
||||
<h3 className="text-3xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase leading-none">{title || "Synaptic Recall"}</h3>
|
||||
<p className="text-[10px] font-black text-indigo-600 dark:text-indigo-400 uppercase tracking-[0.3em] mt-2">Mnemonic Calibration Engine</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
{Array.from({ length: Math.min(pairs.length * 2, 8) }).map((_, i) => (
|
||||
<div key={i} className="h-24 rounded-2xl bg-white/5 border-2 border-dashed border-white/5 flex items-center justify-center">
|
||||
<HelpCircle className="text-white/5" size={32} />
|
||||
<div key={i} className="h-28 rounded-[2rem] bg-slate-50 dark:bg-white/5 border-2 border-dashed border-slate-200 dark:border-white/10 flex items-center justify-center relative group/mcard">
|
||||
<HelpCircle className="text-slate-200 dark:text-gray-800 group-hover/mcard:text-indigo-500/40 transition-colors" size={40} strokeWidth={1} />
|
||||
<div className="absolute inset-2 border border-indigo-500/5 rounded-[1.5rem]"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center py-4 bg-indigo-500/5 rounded-2xl border border-indigo-500/10">
|
||||
<p className="text-[10px] font-bold text-indigo-300 uppercase tracking-widest">Memory Game with {pairs.length} pairs defined</p>
|
||||
<div className="text-center py-6 bg-indigo-50 dark:bg-indigo-500/5 rounded-[2.5rem] border border-indigo-100 dark:border-indigo-500/10 shadow-inner">
|
||||
<p className="text-[10px] font-black text-indigo-700 dark:text-indigo-300 uppercase tracking-[0.4em] italic">{pairs.length} Bilateral Nodes Configured</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -65,69 +66,71 @@ export default function MemoryBlock({ id, title, pairs = [], editMode, onChange
|
||||
|
||||
return (
|
||||
<div className="space-y-6" id={id}>
|
||||
<div className="p-8 glass border-white/5 bg-white/5 space-y-8 rounded-3xl">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 pl-1">Game Description / Title</label>
|
||||
<div className="p-10 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 space-y-12 rounded-[3.5rem] shadow-xl shadow-slate-200/50 dark:shadow-none relative overflow-hidden group/memeditor">
|
||||
<div className="absolute top-0 left-0 w-80 h-80 bg-indigo-500/5 rounded-full blur-[100px] -translate-y-1/2 -translate-x-1/2 group-hover/memeditor:bg-indigo-500/10 transition-colors"></div>
|
||||
|
||||
<div className="space-y-4 relative z-10">
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-400 dark:text-gray-500 pl-2">System Designation (Title)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title || ""}
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
placeholder="e.g. Vocabulary Memory Match..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm font-bold focus:border-indigo-500/50 focus:outline-none transition-all"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-[2.5rem] px-8 py-5 text-lg font-black italic uppercase tracking-tight text-slate-800 dark:text-white focus:ring-8 focus:ring-indigo-500/5 focus:border-indigo-500 transition-all outline-none shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between pl-1">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500">Pairs to Match</label>
|
||||
<span className="text-[10px] font-bold text-indigo-400 bg-indigo-500/10 px-2 py-1 rounded-md uppercase tracking-widest">{pairs.length} Pairs</span>
|
||||
<div className="space-y-8 relative z-10">
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 italic">Bilateral Pair Configuration</label>
|
||||
<span className="text-[9px] font-black text-indigo-700 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-500/10 px-4 py-2 rounded-xl border border-indigo-100 dark:border-indigo-500/20 shadow-inner uppercase tracking-widest">{pairs.length} Pairs Synchronized</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-6">
|
||||
{pairs.map((pair, idx) => (
|
||||
<div key={pair.id || idx} className="grid grid-cols-1 sm:grid-cols-9 gap-4 p-4 bg-black/20 rounded-2xl border border-white/5 group animate-in slide-in-from-left-4 duration-300">
|
||||
<div className="sm:col-span-4 space-y-1">
|
||||
<span className="text-[9px] font-black uppercase tracking-tight text-gray-600 pl-1">Card A</span>
|
||||
<div key={pair.id || idx} className="grid grid-cols-1 sm:grid-cols-10 gap-6 p-8 bg-slate-50/50 dark:bg-white/5 rounded-[2.5rem] border border-slate-100 dark:border-white/10 group animate-in slide-in-from-left-4 duration-500 hover:scale-[1.01] hover:bg-white dark:hover:bg-white/10 transition-all shadow-sm">
|
||||
<div className="sm:col-span-4 space-y-3">
|
||||
<span className="text-[9px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-600 pl-1 italic">Synapse Alpha</span>
|
||||
<input
|
||||
value={pair.left}
|
||||
onChange={(e) => updatePair(idx, { left: e.target.value })}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-sm font-bold focus:border-indigo-500/50 focus:outline-none transition-all"
|
||||
placeholder="Term, Image URL, or Word..."
|
||||
className="w-full bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-4 text-sm font-black text-slate-800 dark:text-white focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-inner"
|
||||
placeholder="Term / ID A..."
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-1 flex items-center justify-center pt-4 sm:pt-0">
|
||||
<div className="w-8 h-8 rounded-full bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center">
|
||||
<div className="w-1 h-1 rounded-full bg-indigo-500" />
|
||||
<div className="sm:col-span-2 flex items-center justify-center pt-8 sm:pt-6">
|
||||
<div className="w-12 h-12 rounded-full bg-white dark:bg-black/40 border border-slate-100 dark:border-white/10 flex items-center justify-center shadow-lg transform group-hover:rotate-180 transition-transform duration-700">
|
||||
<div className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="sm:col-span-3 space-y-1">
|
||||
<span className="text-[9px] font-black uppercase tracking-tight text-gray-600 pl-1">Card B</span>
|
||||
<div className="sm:col-span-4 space-y-3 relative">
|
||||
<span className="text-[9px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-600 pl-1 italic">Synapse Beta</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<input
|
||||
value={pair.right}
|
||||
onChange={(e) => updatePair(idx, { right: e.target.value })}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-sm font-bold focus:border-indigo-500/50 focus:outline-none transition-all"
|
||||
placeholder="Matching Item..."
|
||||
className="w-full bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-4 text-sm font-black text-slate-800 dark:text-white focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-inner"
|
||||
placeholder="Term / ID B..."
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-1 flex items-end justify-end pb-1 pr-1">
|
||||
<button
|
||||
onClick={() => removePair(idx)}
|
||||
className="p-2 text-gray-500 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all"
|
||||
className="p-4 bg-red-50 dark:bg-red-500/5 hover:bg-red-500 hover:text-white rounded-2xl text-red-500 transition-all active:scale-90 opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={addPair}
|
||||
className="w-full py-6 border-dashed border-2 border-white/5 text-gray-500 hover:text-indigo-400 hover:border-indigo-500/30 hover:bg-indigo-500/5 transition-all font-black text-[10px] uppercase tracking-widest rounded-3xl flex flex-col items-center gap-2 group"
|
||||
className="w-full py-12 border-dashed border-4 border-slate-100 dark:border-white/10 text-slate-300 dark:text-gray-700 hover:text-indigo-600 dark:hover:text-indigo-400 hover:border-indigo-500/40 hover:bg-white dark:hover:bg-white/5 transition-all font-black text-[11px] uppercase tracking-[0.5em] rounded-[3rem] flex flex-col items-center gap-6 group/addbtn shadow-inner"
|
||||
>
|
||||
<div className="p-2 rounded-xl bg-white/5 group-hover:bg-indigo-500/20 transition-all">
|
||||
<Plus size={20} />
|
||||
<div className="p-5 rounded-[1.5rem] bg-slate-50 dark:bg-white/5 group-hover/addbtn:bg-indigo-600 group-hover/addbtn:text-white group-hover/addbtn:rotate-90 transition-all duration-500 shadow-xl">
|
||||
<Plus size={32} strokeWidth={3} />
|
||||
</div>
|
||||
<span>Add New Memory Pair</span>
|
||||
<span>Initialize New Synaptic Link</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { ChevronUp, ChevronDown, X, CheckCircle2, XCircle, Clock } from "lucide-react";
|
||||
|
||||
interface OrderingBlockProps {
|
||||
id: string;
|
||||
@@ -39,29 +40,30 @@ export default function OrderingBlock({ id, title, items, editMode, onChange }:
|
||||
<div className="space-y-8" id={id}>
|
||||
<div className="space-y-2">
|
||||
{editMode ? (
|
||||
<div className="space-y-2 p-6 glass border-white/5 bg-white/5 mb-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Activity Title (Optional)</label>
|
||||
<div className="space-y-4 p-8 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2rem] mb-6 shadow-inner relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-blue-500/40"></div>
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em]">Activity Title (Optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title || ""}
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
placeholder="e.g. Sequence of Events..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm font-bold focus:border-blue-500/50 focus:outline-none"
|
||||
className="w-full bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-3 text-sm font-black uppercase tracking-tight focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all outline-none shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white">
|
||||
{title || "Sequence Ordering"}
|
||||
<h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase border-l-4 border-blue-600 pl-6 py-1 flex items-center gap-3">
|
||||
<Clock className="w-6 h-6 text-blue-600" /> {title || "Sequence Ordering"}
|
||||
</h3>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editMode ? (
|
||||
<div className="space-y-4">
|
||||
<p className="text-[10px] text-gray-500 uppercase tracking-widest mb-2">Define items in their CORRECT order:</p>
|
||||
<div className="space-y-6">
|
||||
<p className="text-[10px] text-slate-400 dark:text-gray-500 uppercase font-black tracking-[0.2em] pl-1">Target Chronology (Define items in CORRECT order):</p>
|
||||
{items.map((item, idx) => (
|
||||
<div key={idx} className="flex gap-4 items-center animate-in slide-in-from-left-4 duration-300">
|
||||
<span className="text-blue-500 font-black w-6">{idx + 1}.</span>
|
||||
<div key={idx} className="flex gap-4 items-center bg-white dark:bg-white/5 p-4 rounded-[2rem] border border-slate-100 dark:border-white/10 shadow-sm animate-in slide-in-from-left-4 duration-300 group/ord">
|
||||
<span className="text-blue-600 font-black w-8 text-center italic">{idx + 1}.</span>
|
||||
<input
|
||||
value={item}
|
||||
onChange={(e) => {
|
||||
@@ -69,10 +71,10 @@ export default function OrderingBlock({ id, title, items, editMode, onChange }:
|
||||
newItems[idx] = e.target.value;
|
||||
onChange({ items: newItems });
|
||||
}}
|
||||
className="flex-1 bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:border-blue-500/50 focus:outline-none"
|
||||
placeholder={`Step ${idx + 1}`}
|
||||
className="flex-1 bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl px-6 py-3 text-sm font-bold text-slate-700 dark:text-gray-200 focus:ring-4 focus:ring-blue-500/10 transition-all outline-none shadow-inner"
|
||||
placeholder={`Event Marker ${idx + 1}`}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
disabled={idx === 0}
|
||||
onClick={() => {
|
||||
@@ -80,9 +82,9 @@ export default function OrderingBlock({ id, title, items, editMode, onChange }:
|
||||
[newItems[idx], newItems[idx - 1]] = [newItems[idx - 1], newItems[idx]];
|
||||
onChange({ items: newItems });
|
||||
}}
|
||||
className="p-2 text-gray-500 hover:text-white disabled:opacity-20"
|
||||
className="p-3 bg-slate-50 dark:bg-white/5 hover:bg-blue-600 hover:text-white rounded-xl text-slate-400 dark:text-gray-500 transition-all disabled:opacity-5 disabled:hover:bg-transparent"
|
||||
>
|
||||
↑
|
||||
<ChevronUp size={16} strokeWidth={3} />
|
||||
</button>
|
||||
<button
|
||||
disabled={idx === items.length - 1}
|
||||
@@ -91,9 +93,9 @@ export default function OrderingBlock({ id, title, items, editMode, onChange }:
|
||||
[newItems[idx], newItems[idx + 1]] = [newItems[idx + 1], newItems[idx]];
|
||||
onChange({ items: newItems });
|
||||
}}
|
||||
className="p-2 text-gray-500 hover:text-white disabled:opacity-20"
|
||||
className="p-3 bg-slate-50 dark:bg-white/5 hover:bg-blue-600 hover:text-white rounded-xl text-slate-400 dark:text-gray-500 transition-all disabled:opacity-5 disabled:hover:bg-transparent"
|
||||
>
|
||||
↓
|
||||
<ChevronDown size={16} strokeWidth={3} />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
@@ -101,25 +103,27 @@ export default function OrderingBlock({ id, title, items, editMode, onChange }:
|
||||
const newItems = items.filter((_, i) => i !== idx);
|
||||
onChange({ items: newItems });
|
||||
}}
|
||||
className="p-2 text-gray-500 hover:text-red-400"
|
||||
className="p-3 bg-red-50 dark:bg-red-500/5 hover:bg-red-500 hover:text-white rounded-xl text-red-500 transition-all opacity-0 group-hover/ord:opacity-100"
|
||||
>
|
||||
×
|
||||
<X size={18} strokeWidth={3} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
onClick={() => onChange({ items: [...items, ""] })}
|
||||
className="w-full py-4 border-dashed border-2 border-white/10 text-gray-400 hover:text-white hover:border-blue-500/30 transition-all font-bold text-xs uppercase tracking-widest rounded-xl"
|
||||
className="w-full py-6 bg-slate-50 dark:bg-black/20 border-2 border-dashed border-slate-200 dark:border-white/10 text-slate-400 dark:text-gray-600 hover:text-blue-600 dark:hover:text-blue-400 hover:border-blue-500/40 hover:bg-white dark:hover:bg-white/5 transition-all font-black text-[10px] uppercase tracking-[0.3em] rounded-[2rem] shadow-inner"
|
||||
>
|
||||
+ Add Step
|
||||
+ Append Temporal Marker
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-8 p-8 glass border-white/5 rounded-3xl">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div className="space-y-4">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-4 block">Available Items</label>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<div className="space-y-12 p-10 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-[3rem] shadow-sm relative overflow-hidden group/ordplay">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 group-hover/ordplay:bg-indigo-500/10 transition-colors"></div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 relative z-10">
|
||||
<div className="space-y-8">
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-8 block pl-1 italic">Synaptic Shards (Available Items)</label>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{shuffledItems.map((item, i) => {
|
||||
const isPicked = userOrder.includes(item.originalIdx);
|
||||
return (
|
||||
@@ -127,8 +131,8 @@ export default function OrderingBlock({ id, title, items, editMode, onChange }:
|
||||
key={i}
|
||||
disabled={isPicked || submitted}
|
||||
onClick={() => handlePick(item.originalIdx)}
|
||||
className={`px-6 py-3 rounded-full border text-sm font-bold transition-all ${isPicked ? "opacity-20 grayscale border-white/5 bg-white/5" :
|
||||
"border-white/10 bg-white/5 text-gray-200 hover:border-blue-500/50 hover:bg-blue-500/5"
|
||||
className={`px-8 py-4 rounded-full border-2 text-[11px] font-black uppercase tracking-widest transition-all duration-500 shadow-sm ${isPicked ? "opacity-10 grayscale border-slate-100 bg-slate-50 -translate-y-1" :
|
||||
"border-slate-100 dark:border-white/10 bg-slate-50 dark:bg-black/20 text-slate-700 dark:text-gray-300 hover:border-blue-600 hover:bg-blue-600 hover:text-white hover:shadow-2xl hover:shadow-blue-500/40 hover:-translate-y-1"
|
||||
}`}
|
||||
>
|
||||
{item.value}
|
||||
@@ -138,10 +142,14 @@ export default function OrderingBlock({ id, title, items, editMode, onChange }:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-8 block pl-1 italic">Reconstructed Timeline</label>
|
||||
<div className="space-y-4">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-4 block">Your Sequence</label>
|
||||
<div className="space-y-3">
|
||||
{userOrder.length === 0 && <p className="text-xs text-gray-600 italic py-4">Click items to build the sequence...</p>}
|
||||
{userOrder.length === 0 && (
|
||||
<div className="bg-slate-50 dark:bg-black/20 border-2 border-dashed border-slate-200 dark:border-white/10 p-12 rounded-[2.5rem] text-center">
|
||||
<p className="text-[9px] text-slate-400 dark:text-gray-600 uppercase font-black tracking-widest italic pt-2">Sequencing standby: Capture shards to proceed...</p>
|
||||
</div>
|
||||
)}
|
||||
{userOrder.map((idx, i) => {
|
||||
const isItemCorrect = submitted && idx === i;
|
||||
const isItemWrong = submitted && idx !== i;
|
||||
@@ -150,16 +158,16 @@ export default function OrderingBlock({ id, title, items, editMode, onChange }:
|
||||
<div
|
||||
key={i}
|
||||
onClick={() => !submitted && handlePick(idx)}
|
||||
className={`flex items-center gap-4 p-4 rounded-xl border text-sm font-bold transition-all cursor-pointer ${isItemCorrect ? "border-green-500 bg-green-500/20 text-green-400" :
|
||||
isItemWrong ? "border-red-500 bg-red-500/20 text-red-100" :
|
||||
"border-blue-500/30 bg-blue-500/5 text-blue-400 hover:bg-blue-500/10"
|
||||
className={`flex items-center gap-6 p-6 rounded-[1.5rem] border-2 text-[11px] font-black uppercase tracking-[0.1em] transition-all duration-500 cursor-pointer shadow-sm ${isItemCorrect ? "border-green-500 bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400 shadow-xl shadow-green-500/20" :
|
||||
isItemWrong ? "border-red-500 bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-100 shadow-xl shadow-red-500/20 translate-x-1" :
|
||||
"border-blue-500/20 bg-blue-50 dark:bg-blue-500/5 text-blue-600 dark:text-blue-400 hover:bg-blue-600 hover:text-white hover:border-blue-600 hover:shadow-2xl hover:shadow-blue-500/30"
|
||||
}`}
|
||||
>
|
||||
<span className="opacity-50 text-xs">{i + 1}.</span>
|
||||
<span className="opacity-40 text-xs italic">MARK {i + 1}</span>
|
||||
<span className="flex-1">{items[idx]}</span>
|
||||
{!submitted && <span className="text-xs opacity-50">×</span>}
|
||||
{isItemCorrect && <span>✅</span>}
|
||||
{isItemWrong && <span>❌</span>}
|
||||
{!submitted && <span className="text-[10px] opacity-30 hover:opacity-100 transition-opacity">SCRAPE</span>}
|
||||
{isItemCorrect && <CheckCircle2 className="w-6 h-6 text-green-500" />}
|
||||
{isItemWrong && <XCircle className="w-6 h-6 text-red-500 animate-pulse" />}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@@ -167,21 +175,21 @@ export default function OrderingBlock({ id, title, items, editMode, onChange }:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-8 border-t border-white/5">
|
||||
<div className="pt-10 border-t border-slate-50 dark:border-white/5 relative z-10">
|
||||
{!submitted && userOrder.length === items.length && (
|
||||
<button
|
||||
onClick={() => setSubmitted(true)}
|
||||
className="btn-premium w-full py-4 font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20"
|
||||
className="w-full py-6 bg-blue-600 text-white font-black text-[10px] uppercase tracking-[0.3em] shadow-2xl shadow-blue-500/40 hover:scale-[1.02] active:scale-[0.98] transition-all rounded-[2rem] flex items-center justify-center gap-4 animate-in fade-in zoom-in duration-500"
|
||||
>
|
||||
Validate Sequence
|
||||
Validate Temporal Cohesion
|
||||
</button>
|
||||
)}
|
||||
{submitted && (
|
||||
<button
|
||||
onClick={handleReset}
|
||||
className="w-full py-4 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-xl border-white/5"
|
||||
className="w-full py-6 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-blue-600 dark:text-blue-400 font-black text-[10px] uppercase tracking-[0.3em] hover:bg-slate-50 transition-all rounded-[2rem] active:scale-[0.98] shadow-sm"
|
||||
>
|
||||
Try Again
|
||||
Deconstruct Sequence
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Users, Send, CheckCircle2, ClipboardList, Info } from "lucide-react";
|
||||
|
||||
interface PeerReviewBlockProps {
|
||||
id: string;
|
||||
@@ -16,72 +17,84 @@ export default function PeerReviewBlock({ id, title, prompt, reviewCriteria, edi
|
||||
<div className="space-y-8" id={id}>
|
||||
<div className="space-y-2">
|
||||
{editMode ? (
|
||||
<div className="space-y-2 p-6 glass border-white/5 bg-white/5 mb-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Activity Title (Optional)</label>
|
||||
<div className="space-y-4 p-8 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2rem] mb-6 shadow-inner relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-purple-500/40"></div>
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em]">Activity Title (Optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title || ""}
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
placeholder="e.g. Final Project Submission..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm font-bold focus:border-blue-500/50 focus:outline-none"
|
||||
className="w-full bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-3 text-sm font-black uppercase tracking-tight focus:ring-4 focus:ring-purple-500/10 focus:border-purple-500 transition-all outline-none shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<h3 className="text-xl font-bold border-l-4 border-purple-500 pl-4 py-1 tracking-tight text-white flex items-center gap-2">
|
||||
<span>👥</span> {title || "Peer Assessment"}
|
||||
<h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase border-l-4 border-purple-600 pl-6 py-1 flex items-center gap-3">
|
||||
<Users className="w-6 h-6 text-purple-600" /> {title || "Peer Assessment"}
|
||||
</h3>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editMode ? (
|
||||
<div className="space-y-6">
|
||||
<div className="p-6 glass border-white/5 space-y-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Assignment Instructions</label>
|
||||
<div className="space-y-8">
|
||||
<div className="p-8 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-[2.5rem] space-y-4 shadow-sm relative overflow-hidden group/instr">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] pl-1">Assignment Directive (Instructions)</label>
|
||||
<textarea
|
||||
value={prompt}
|
||||
onChange={(e) => onChange({ prompt: e.target.value })}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl p-4 min-h-[100px] text-lg font-medium focus:outline-none focus:border-blue-500/50 transition-all"
|
||||
placeholder="Describe what the student needs to submit (e.g. 'Write a 500-word essay about...')"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl p-6 min-h-[120px] text-lg font-black uppercase tracking-tight text-slate-800 dark:text-white focus:outline-none focus:ring-4 focus:ring-blue-500/10 transition-all shadow-inner placeholder:opacity-20"
|
||||
placeholder="DESCRIBE THE CORE SUBMISSION PARAMETERS..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-6 glass border-white/5 space-y-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Review Criteria (Rubric)</label>
|
||||
<div className="p-8 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-[2.5rem] space-y-4 shadow-sm relative overflow-hidden group/rubric">
|
||||
<div className="absolute bottom-0 left-0 w-32 h-32 bg-purple-500/5 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2"></div>
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] pl-1">Evaluative Matrix (Rubric)</label>
|
||||
<textarea
|
||||
value={reviewCriteria || ""}
|
||||
onChange={(e) => onChange({ reviewCriteria: e.target.value })}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl p-4 min-h-[100px] text-sm font-medium focus:outline-none focus:border-blue-500/50 transition-all"
|
||||
placeholder="Guide the reviewer on how to evaluate the submission..."
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl p-6 min-h-[120px] text-sm font-bold text-slate-700 dark:text-gray-300 focus:outline-none focus:ring-4 focus:ring-purple-500/10 transition-all shadow-inner"
|
||||
placeholder="Guide the peer reviewers on evaluative heuristics..."
|
||||
/>
|
||||
<p className="text-[10px] text-gray-500 uppercase tracking-wider">Instructions for the student who will review this work.</p>
|
||||
<p className="text-[9px] text-slate-400 dark:text-gray-600 uppercase font-black italic pl-1 italic">Structural guidance for cross-student validation.</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-8 glass border-white/5 rounded-3xl space-y-8">
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-xs font-black uppercase tracking-widest text-gray-500">Instructions</h4>
|
||||
<p className="text-lg text-gray-200 leading-relaxed whitespace-pre-wrap">{prompt || "Submit your work below."}</p>
|
||||
<div className="p-10 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-[3rem] space-y-12 shadow-sm relative overflow-hidden group/peerplay">
|
||||
<div className="absolute top-0 right-0 w-96 h-96 bg-purple-500/5 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/2 group-hover/peerplay:bg-purple-500/10 transition-colors"></div>
|
||||
|
||||
<div className="space-y-6 relative z-10">
|
||||
<div className="flex items-center gap-2">
|
||||
<Info className="w-4 h-4 text-slate-300 dark:text-gray-600" />
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-300 dark:text-gray-600 italic">Instructional Directive</label>
|
||||
</div>
|
||||
<p className="text-2xl font-black text-slate-800 dark:text-gray-100 leading-tight uppercase italic tracking-tight">{prompt || "Awaiting submission parameters..."}</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-white/5 rounded-2xl border border-white/10">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center text-purple-400">
|
||||
📤
|
||||
<div className="p-10 bg-slate-50 dark:bg-white/5 border-2 border-dashed border-slate-200 dark:border-white/10 rounded-[2.5rem] relative z-10 hover:border-blue-500 transition-colors duration-500">
|
||||
<div className="flex items-start gap-8 mb-8">
|
||||
<div className="p-5 rounded-2xl bg-blue-100 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400 shadow-xl ring-4 ring-blue-500/10 animate-bounce">
|
||||
<Send className="w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-bold text-sm">Student Submission Area</h5>
|
||||
<p className="text-xs text-gray-500">Students will see a text area here to submit their work.</p>
|
||||
<div className="space-y-1">
|
||||
<h5 className="text-[11px] font-black uppercase tracking-[0.2em] text-slate-900 dark:text-white">Submission Terminal Interface</h5>
|
||||
<p className="text-[9px] text-slate-400 dark:text-gray-500 uppercase font-black tracking-widest italic pt-1">Active node for student document upload and textual stream.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-32 bg-black/20 rounded-xl border border-white/5 flex items-center justify-center text-gray-600 text-sm italic">
|
||||
[Submission Interface Preview]
|
||||
<div className="h-40 bg-white dark:bg-black/40 rounded-[2rem] border border-slate-100 dark:border-white/10 flex flex-col items-center justify-center text-slate-400 dark:text-gray-600 text-[10px] font-black uppercase tracking-[0.4em] italic shadow-inner">
|
||||
<div className="w-12 h-1 bg-slate-100 dark:bg-white/5 rounded-full mb-6"></div>
|
||||
[ Simulation: Subjunctive Flux ]
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{reviewCriteria && (
|
||||
<div className="space-y-2 border-t border-white/5 pt-6">
|
||||
<h4 className="text-xs font-black uppercase tracking-widest text-gray-500">Review Criteria</h4>
|
||||
<p className="text-sm text-gray-400 whitespace-pre-wrap">{reviewCriteria}</p>
|
||||
<div className="space-y-6 border-t border-slate-50 dark:border-white/5 pt-10 relative z-10">
|
||||
<div className="flex items-center gap-2">
|
||||
<ClipboardList className="w-4 h-4 text-slate-300 dark:text-gray-600" />
|
||||
<label className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-300 dark:text-gray-600 italic">Heuristic Evaluative Metrics (Rubric)</label>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-slate-600 dark:text-gray-400 whitespace-pre-wrap leading-relaxed">{reviewCriteria}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Check, CheckCircle2, Plus, Target } from "lucide-react";
|
||||
|
||||
interface QuizQuestion {
|
||||
id: string;
|
||||
@@ -75,19 +76,20 @@ export default function QuizBlock({ id, title, quizData, editMode, onChange }: Q
|
||||
{/* Block Header */}
|
||||
<div className="space-y-2">
|
||||
{editMode ? (
|
||||
<div className="space-y-2 p-6 glass border-white/5 bg-white/5 mb-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Activity Title (Optional)</label>
|
||||
<div className="space-y-4 p-8 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2rem] mb-6 shadow-inner relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-blue-500/40"></div>
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em]">Activity Title (Optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title || ""}
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
placeholder="e.g. Final Evaluation, Knowledge Check..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm font-bold focus:border-blue-500/50 focus:outline-none"
|
||||
placeholder="e.g. Mastery Challenge, Knowledge Synthesis..."
|
||||
className="w-full bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-3 text-sm font-black uppercase tracking-tight focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all outline-none shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white">
|
||||
{title || "Knowledge Check"}
|
||||
<h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase border-l-4 border-blue-600 pl-6 py-1">
|
||||
{title || "Knowledge Synthesis"}
|
||||
</h3>
|
||||
)}
|
||||
</div>
|
||||
@@ -95,26 +97,26 @@ export default function QuizBlock({ id, title, quizData, editMode, onChange }: Q
|
||||
{editMode ? (
|
||||
<div className="space-y-6">
|
||||
{questions.map((q, idx) => (
|
||||
<div key={q.id} className="p-8 glass border-white/5 space-y-6 rounded-3xl relative group/question animate-in slide-in-from-left-4 duration-500">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex bg-white/5 rounded-lg p-1 border border-white/5">
|
||||
<div key={q.id} className="p-10 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 space-y-8 rounded-[2.5rem] relative group/question animate-in slide-in-from-bottom-4 duration-500 shadow-sm hover:shadow-xl hover:border-blue-500/20 transition-all">
|
||||
<div className="flex items-center justify-between gap-6">
|
||||
<div className="flex bg-slate-100 dark:bg-white/5 rounded-2xl p-1.5 border border-slate-200 dark:border-white/5 shadow-inner">
|
||||
<button
|
||||
onClick={() => updateQuestion(idx, { type: 'multiple-choice', correct: [q.correct?.[0] || 0] })}
|
||||
className={`px-3 py-1.5 text-[9px] uppercase font-black tracking-widest rounded-md transition-all ${q.type === 'multiple-choice' ? "bg-blue-500 text-white shadow-lg" : "text-gray-500 hover:text-white"}`}
|
||||
className={`px-4 py-2 text-[9px] uppercase font-black tracking-widest rounded-xl transition-all ${q.type === 'multiple-choice' ? "bg-white dark:bg-blue-600 text-slate-900 dark:text-white shadow-md" : "text-slate-400 hover:text-slate-600"}`}
|
||||
>
|
||||
MCQ
|
||||
Choice
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateQuestion(idx, { type: 'multiple-select', correct: [q.correct?.[0] || 0] })}
|
||||
className={`px-3 py-1.5 text-[9px] uppercase font-black tracking-widest rounded-md transition-all ${q.type === 'multiple-select' ? "bg-blue-500 text-white shadow-lg" : "text-gray-500 hover:text-white"}`}
|
||||
className={`px-4 py-2 text-[9px] uppercase font-black tracking-widest rounded-xl transition-all ${q.type === 'multiple-select' ? "bg-white dark:bg-blue-600 text-slate-900 dark:text-white shadow-md" : "text-slate-400 hover:text-slate-600"}`}
|
||||
>
|
||||
MSQ
|
||||
Multi
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateQuestion(idx, { type: 'true-false', options: ["True", "False"], correct: [0] })}
|
||||
className={`px-3 py-1.5 text-[9px] uppercase font-black tracking-widest rounded-md transition-all ${q.type === 'true-false' ? "bg-blue-500 text-white shadow-lg" : "text-gray-500 hover:text-white"}`}
|
||||
className={`px-4 py-2 text-[9px] uppercase font-black tracking-widest rounded-xl transition-all ${q.type === 'true-false' ? "bg-white dark:bg-blue-600 text-slate-900 dark:text-white shadow-md" : "text-slate-400 hover:text-slate-600"}`}
|
||||
>
|
||||
T / F
|
||||
Binary
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
@@ -122,41 +124,53 @@ export default function QuizBlock({ id, title, quizData, editMode, onChange }: Q
|
||||
const newQuestions = questions.filter((_, i) => i !== idx);
|
||||
onChange({ quiz_data: { questions: newQuestions } });
|
||||
}}
|
||||
className="p-2 text-gray-500 hover:text-red-400 transition-colors"
|
||||
className="w-10 h-10 rounded-full bg-red-50 dark:bg-red-500/10 text-red-400 hover:bg-red-500 hover:text-white transition-all flex items-center justify-center border border-red-100 dark:border-transparent active:scale-90"
|
||||
>
|
||||
<span className="text-xl">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<input
|
||||
<div className="space-y-3">
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest pl-1">Inquiry Description</label>
|
||||
<textarea
|
||||
value={q.question}
|
||||
onChange={(e) => updateQuestion(idx, { question: e.target.value })}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl p-4 text-lg font-bold focus:outline-none focus:border-blue-500/50 transition-all placeholder:text-gray-600"
|
||||
placeholder="What is the question?"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl p-6 text-lg font-black tracking-tight focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all placeholder:text-slate-300 resize-none shadow-inner h-24"
|
||||
placeholder="What is the core problem being evaluated?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-4">
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest pl-1">Configuration Matrix</label>
|
||||
{q.type === 'true-false' ? (
|
||||
<div className="flex gap-4">
|
||||
{["True", "False"].map((opt, oIdx) => (
|
||||
<button
|
||||
key={oIdx}
|
||||
onClick={() => updateQuestion(idx, { correct: [oIdx] })}
|
||||
className={`flex-1 py-4 rounded-xl border-2 transition-all font-black text-xs uppercase tracking-widest ${q.correct?.includes(oIdx) ? "border-blue-500 bg-blue-500/10 text-white" : "border-white/5 bg-white/5 text-gray-500"}`}
|
||||
className={`flex-1 py-5 rounded-2xl border-2 transition-all font-black text-[10px] uppercase tracking-[0.2em] shadow-sm ${q.correct?.includes(oIdx) ? "border-blue-600 bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400 scale-[1.02] shadow-blue-500/10" : "border-slate-100 dark:border-white/5 bg-slate-50 dark:bg-white/5 text-slate-400 dark:text-gray-500 hover:border-slate-200"}`}
|
||||
>
|
||||
{opt}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
q.options?.map((opt, oIdx) => (
|
||||
<div key={oIdx} className="flex gap-3 items-center group/opt">
|
||||
<div className="space-y-3">
|
||||
{q.options?.map((opt, oIdx) => (
|
||||
<div key={oIdx} className="flex gap-4 items-center group/opt">
|
||||
<div className="relative flex items-center justify-center">
|
||||
<input
|
||||
type={q.type === 'multiple-select' ? "checkbox" : "radio"}
|
||||
checked={q.correct?.includes(oIdx)}
|
||||
onChange={() => toggleCorrectOption(idx, oIdx, q.type === 'multiple-select')}
|
||||
className="w-5 h-5 accent-blue-500 cursor-pointer"
|
||||
className="w-6 h-6 rounded-lg border-2 border-slate-200 dark:border-white/10 appearance-none checked:bg-blue-600 checked:border-blue-600 transition-all cursor-pointer shadow-sm"
|
||||
/>
|
||||
{q.correct?.includes(oIdx) && (
|
||||
<div className="absolute pointer-events-none text-white text-[10px]">
|
||||
<Check size={14} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
value={opt}
|
||||
onChange={(e) => {
|
||||
@@ -164,8 +178,8 @@ export default function QuizBlock({ id, title, quizData, editMode, onChange }: Q
|
||||
newOpts[oIdx] = e.target.value;
|
||||
updateQuestion(idx, { options: newOpts });
|
||||
}}
|
||||
className="flex-1 bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm font-medium focus:outline-none focus:border-blue-500/30 transition-all"
|
||||
placeholder={`Option ${oIdx + 1}`}
|
||||
className="flex-1 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-4 text-sm font-bold focus:ring-4 focus:ring-blue-500/5 focus:border-blue-500 transition-all outline-none shadow-inner"
|
||||
placeholder={`Option Vector ${String.fromCharCode(65 + oIdx)}`}
|
||||
/>
|
||||
{q.options.length > 2 && (
|
||||
<button
|
||||
@@ -174,21 +188,22 @@ export default function QuizBlock({ id, title, quizData, editMode, onChange }: Q
|
||||
const newCorrect = q.correct?.filter(i => i !== oIdx).map(i => i > oIdx ? i - 1 : i);
|
||||
updateQuestion(idx, { options: newOpts, correct: newCorrect?.length ? newCorrect : [0] });
|
||||
}}
|
||||
className="opacity-0 group-hover/opt:opacity-100 p-2 text-gray-500 hover:text-red-400 transition-all"
|
||||
className="w-10 h-10 rounded-xl bg-slate-50 dark:bg-white/5 text-slate-300 hover:text-red-500 transition-all border border-slate-200 dark:border-transparent flex items-center justify-center active:scale-90"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{q.type !== 'true-false' && (
|
||||
<button
|
||||
onClick={() => updateQuestion(idx, { options: [...q.options, `Option ${q.options.length + 1}`] })}
|
||||
className="text-[10px] font-black uppercase tracking-widest text-blue-500/50 hover:text-blue-500 transition-colors pl-8 mt-2"
|
||||
className="text-[10px] font-black uppercase tracking-[0.2em] text-blue-600 hover:text-blue-700 transition-all flex items-center gap-2 pl-10 mt-4 active:scale-95"
|
||||
>
|
||||
+ Add Option
|
||||
<Plus size={14} /> Add Theoretical Vector
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -196,16 +211,17 @@ export default function QuizBlock({ id, title, quizData, editMode, onChange }: Q
|
||||
))}
|
||||
<button
|
||||
onClick={addQuestion}
|
||||
className="w-full py-4 glass border-dashed border-2 border-white/10 text-gray-500 hover:text-white hover:border-blue-500/30 hover:bg-blue-500/5 transition-all font-bold text-xs uppercase tracking-widest rounded-2xl"
|
||||
className="w-full py-6 bg-white dark:bg-white/5 border-2 border-dashed border-slate-200 dark:border-white/10 text-slate-400 dark:text-gray-500 hover:text-blue-600 hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-500/5 transition-all font-black text-[10px] uppercase tracking-[0.3em] rounded-[2rem] active:scale-[0.98] shadow-sm"
|
||||
>
|
||||
+ Add Question
|
||||
+ Expand Assessment Vector
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-8">
|
||||
{questions.map((q) => (
|
||||
<div key={q.id} className="space-y-4 p-6 glass border-white/5 rounded-2xl">
|
||||
<h4 className="font-bold text-xl text-gray-100 leading-tight">{q.question}</h4>
|
||||
<div key={q.id} className="space-y-6 p-10 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/5 rounded-[2.5rem] shadow-sm hover:shadow-xl transition-all duration-700 group/qitem relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 group-hover/qitem:bg-indigo-500/10 transition-colors"></div>
|
||||
<h4 className="font-black text-2xl text-slate-900 dark:text-white leading-tight uppercase tracking-tight relative z-10">{q.question}</h4>
|
||||
<div className="grid gap-3">
|
||||
{q.options && q.options.length > 0 ? (
|
||||
q.options.map((opt, oIdx) => {
|
||||
@@ -215,27 +231,33 @@ export default function QuizBlock({ id, title, quizData, editMode, onChange }: Q
|
||||
const isWrongSelection = !isCorrect && isSelected;
|
||||
const missedCorrect = isCorrect && !isSelected;
|
||||
|
||||
let style = "glass border-white/10 hover:bg-white/5";
|
||||
if (submitted) {
|
||||
if (isActuallyCorrect) style = "bg-green-500/20 border-green-500 text-green-400";
|
||||
else if (isWrongSelection) style = "bg-red-500/20 border-red-500 text-red-100";
|
||||
else if (missedCorrect) style = "border-orange-500/50 text-orange-400 animate-pulse";
|
||||
else style = "opacity-50 grayscale border-white/5";
|
||||
} else if (isSelected) {
|
||||
style = "bg-blue-500/20 border-blue-500 text-white shadow-[0_0_20px_rgba(59,130,246,0.2)]";
|
||||
}
|
||||
const style = submitted
|
||||
? (isActuallyCorrect ? "bg-green-50 dark:bg-green-500/10 border-green-200 dark:border-green-500/30 text-green-700 dark:text-green-400 shadow-green-500/5 shadow-inner"
|
||||
: isWrongSelection ? "bg-red-50 dark:bg-red-500/10 border-red-200 dark:border-red-500/30 text-red-700 dark:text-red-400 shadow-red-500/5 shadow-inner"
|
||||
: missedCorrect ? "border-orange-500/50 bg-orange-50 dark:bg-orange-500/5 text-orange-700 dark:text-orange-400 border-dashed animate-pulse"
|
||||
: "opacity-40 grayscale border-slate-100 dark:border-white/5 bg-slate-50 dark:bg-white/5")
|
||||
: isSelected ? "bg-blue-50 dark:bg-blue-500/10 border-blue-600 text-blue-700 dark:text-blue-400 shadow-xl shadow-blue-500/10 ring-4 ring-blue-500/5"
|
||||
: "bg-white dark:bg-white/5 border-slate-100 dark:border-white/5 text-slate-500 dark:text-gray-400 hover:border-blue-500/50 hover:bg-slate-50 dark:hover:bg-blue-500/5 shadow-sm";
|
||||
|
||||
return (
|
||||
<button
|
||||
key={oIdx}
|
||||
onClick={() => handleAnswer(q.id, oIdx, q.type === 'multiple-select')}
|
||||
className={`p-5 rounded-xl border transition-all text-left text-sm font-bold ${style}`}
|
||||
className={`p-6 rounded-2xl border transition-all text-left text-sm font-black uppercase tracking-tight relative overflow-hidden group/optans ${style}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center justify-between relative z-10">
|
||||
<span>{opt}</span>
|
||||
{submitted && isActuallyCorrect && <span>✅</span>}
|
||||
{submitted && isWrongSelection && <span>❌</span>}
|
||||
{submitted && missedCorrect && <span className="text-[10px] uppercase font-black tracking-tighter">Correct Answer</span>}
|
||||
{submitted ? (
|
||||
<div className="flex items-center gap-2">
|
||||
{isActuallyCorrect && <span className="text-green-600 dark:text-green-400"><CheckCircle2 size={18} /></span>}
|
||||
{isWrongSelection && <span className="text-red-600 dark:text-red-400">❌</span>}
|
||||
{missedCorrect && <span className="text-[8px] uppercase font-black tracking-widest bg-orange-100 dark:bg-orange-500/20 text-orange-600 dark:text-orange-400 px-3 py-1 rounded-full">Recall target</span>}
|
||||
</div>
|
||||
) : (
|
||||
<div className={`w-6 h-6 rounded-lg border-2 transition-all flex items-center justify-center ${isSelected ? 'bg-blue-600 border-blue-600 shadow-lg shadow-blue-500/40 text-white' : 'border-slate-200 dark:border-white/10'}`}>
|
||||
{isSelected && <Check size={14} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
@@ -251,17 +273,18 @@ export default function QuizBlock({ id, title, quizData, editMode, onChange }: Q
|
||||
{!submitted && questions.length > 0 && (
|
||||
<button
|
||||
onClick={() => setSubmitted(true)}
|
||||
className="btn-premium w-full py-5 font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20"
|
||||
className="w-full py-6 bg-indigo-600 text-white font-black text-[10px] uppercase tracking-[0.3em] shadow-2xl shadow-indigo-500/40 hover:scale-[1.02] active:scale-[0.98] transition-all rounded-[2rem] flex items-center justify-center gap-4"
|
||||
>
|
||||
Validate Answers
|
||||
<Target size={18} />
|
||||
Validate Synaptic Map
|
||||
</button>
|
||||
)}
|
||||
{submitted && (
|
||||
<button
|
||||
onClick={() => { setSubmitted(false); setUserAnswers({}); }}
|
||||
className="w-full py-5 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-2xl"
|
||||
className="w-full py-6 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-indigo-600 dark:text-indigo-400 font-black text-[10px] uppercase tracking-[0.3em] hover:bg-slate-50 transition-all rounded-[2rem] active:scale-[0.98] shadow-sm"
|
||||
>
|
||||
Try Again
|
||||
Reset Neural Chain
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -26,67 +26,70 @@ export default function ShortAnswerBlock({ id, title, prompt, correctAnswers, ed
|
||||
<div className="space-y-8" id={id}>
|
||||
<div className="space-y-2">
|
||||
{editMode ? (
|
||||
<div className="space-y-2 p-6 glass border-white/5 bg-white/5 mb-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Activity Title (Optional)</label>
|
||||
<div className="space-y-4 p-8 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2rem] mb-6 shadow-inner relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-blue-500/40"></div>
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em]">Activity Title (Optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title || ""}
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
placeholder="e.g. Critical Thinking, Quick Response..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm font-bold focus:border-blue-500/50 focus:outline-none"
|
||||
className="w-full bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-3 text-sm font-black uppercase tracking-tight focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all outline-none shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<h3 className="text-xl font-bold border-l-4 border-blue-500 pl-4 py-1 tracking-tight text-white">
|
||||
<h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase border-l-4 border-blue-600 pl-6 py-1">
|
||||
{title || "Short Answer"}
|
||||
</h3>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editMode ? (
|
||||
<div className="space-y-6">
|
||||
<div className="p-6 glass border-white/5 space-y-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Question Prompt</label>
|
||||
<div className="space-y-8">
|
||||
<div className="p-10 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2.5rem] space-y-4 shadow-sm">
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest pl-1">Inquiry Vector (Question Prompt)</label>
|
||||
<textarea
|
||||
value={prompt}
|
||||
onChange={(e) => onChange({ prompt: e.target.value })}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl p-4 min-h-[100px] text-lg font-medium focus:outline-none focus:border-blue-500/50 transition-all"
|
||||
placeholder="Type the question for the student..."
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl p-6 min-h-[120px] text-lg font-black tracking-tight text-slate-800 dark:text-white focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all placeholder:text-slate-300 resize-none shadow-inner"
|
||||
placeholder="Type the synaptic trigger for the student..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-6 glass border-white/5 space-y-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Correct Answers (One per line)</label>
|
||||
<div className="p-10 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2.5rem] space-y-4 shadow-sm relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-green-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest pl-1">Target Response Matrix (One per line)</label>
|
||||
<textarea
|
||||
value={correctAnswers ? correctAnswers.join("\n") : ""}
|
||||
onChange={(e) => onChange({ correctAnswers: e.target.value.split("\n").filter(a => a.trim() !== "") })}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl p-4 min-h-[100px] text-sm font-medium focus:outline-none focus:border-blue-500/50 transition-all"
|
||||
placeholder="Answer 1 Answer 2 (Alternative)"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl p-6 min-h-[120px] text-sm font-bold text-green-700 dark:text-green-400 focus:ring-4 focus:ring-green-500/10 focus:border-green-500 transition-all outline-none shadow-inner"
|
||||
placeholder="Primary Solution Secondary Vector (Alternative)"
|
||||
/>
|
||||
<p className="text-[10px] text-gray-500 uppercase tracking-wider">Validation is case-insensitive. Provide multiple alternatives if necessary.</p>
|
||||
<p className="text-[9px] text-slate-400 dark:text-gray-500 uppercase font-black italic pl-1 leading-relaxed">Validation employs case-insensitive string matching across all vectors.</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-8 glass border-white/5 rounded-3xl space-y-8">
|
||||
<p className="text-xl font-bold text-gray-100">{prompt || "Please enter your answer below:"}</p>
|
||||
<div className="p-10 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-[3rem] space-y-10 shadow-sm hover:shadow-xl transition-all duration-700 relative overflow-hidden group/saitem">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-blue-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 group-hover/saitem:bg-blue-500/10 transition-colors"></div>
|
||||
<p className="text-2xl font-black text-slate-900 dark:text-white uppercase tracking-tight leading-tight relative z-10">{prompt || "Please formulate your response vector:"}</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-6 relative z-10">
|
||||
<input
|
||||
type="text"
|
||||
value={userAnswer}
|
||||
onChange={(e) => setUserAnswer(e.target.value)}
|
||||
disabled={submitted}
|
||||
className={`w-full bg-white/5 border-2 rounded-2xl px-6 py-4 text-lg transition-all focus:outline-none ${submitted
|
||||
? (isCorrect ? "border-green-500 bg-green-500/10 text-green-400" : "border-red-500 bg-red-500/10 text-red-100")
|
||||
: "border-white/10 focus:border-blue-500 text-white"
|
||||
className={`w-full bg-slate-50 dark:bg-black/40 border-2 rounded-[2rem] px-8 py-6 text-xl font-black tracking-tight transition-all focus:outline-none shadow-inner ${submitted
|
||||
? (isCorrect ? "border-green-500 text-green-700 dark:text-green-400 ring-4 ring-green-500/5" : "border-red-500 text-red-700 dark:text-red-100 ring-4 ring-red-500/5")
|
||||
: "border-slate-100 dark:border-white/10 focus:border-blue-600 text-slate-800 dark:text-white focus:ring-8 focus:ring-blue-500/5"
|
||||
}`}
|
||||
placeholder="Type your answer..."
|
||||
placeholder="Ingest solution..."
|
||||
/>
|
||||
|
||||
{submitted && !isCorrect && (
|
||||
<div className="p-4 bg-orange-500/10 border border-orange-500/20 rounded-xl">
|
||||
<p className="text-[10px] text-orange-400 uppercase font-black tracking-widest">Suggested Answer(s):</p>
|
||||
<p className="text-sm text-gray-400 mt-1">{correctAnswers && correctAnswers[0]}</p>
|
||||
<div className="p-6 bg-orange-50 dark:bg-orange-500/10 border border-orange-200 dark:border-orange-500/20 rounded-2xl animate-in slide-in-from-top-2 duration-500">
|
||||
<p className="text-[10px] text-orange-600 dark:text-orange-400 uppercase font-black tracking-[0.2em]">Validated Synaptic Marker:</p>
|
||||
<p className="text-lg font-black text-slate-700 dark:text-gray-300 mt-2 italic">"{correctAnswers && correctAnswers[0]}"</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -95,18 +98,18 @@ export default function ShortAnswerBlock({ id, title, prompt, correctAnswers, ed
|
||||
<button
|
||||
onClick={() => setSubmitted(true)}
|
||||
disabled={!userAnswer.trim()}
|
||||
className="btn-premium w-full py-4 font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20 disabled:opacity-50 disabled:grayscale"
|
||||
className="w-full py-6 bg-blue-600 text-white font-black text-[10px] uppercase tracking-[0.3em] shadow-2xl shadow-blue-500/40 hover:scale-[1.02] active:scale-[0.98] transition-all rounded-[2rem] flex items-center justify-center gap-4 disabled:opacity-20 disabled:hover:scale-100"
|
||||
>
|
||||
Submit Answer
|
||||
Execute Validation
|
||||
</button>
|
||||
)}
|
||||
|
||||
{submitted && (
|
||||
<button
|
||||
onClick={handleReset}
|
||||
className="w-full py-4 glass text-blue-400 font-black text-xs uppercase tracking-[0.2em] hover:bg-white/5 transition-all rounded-xl border-white/5"
|
||||
className="w-full py-6 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-blue-600 dark:text-blue-400 font-black text-[10px] uppercase tracking-[0.3em] hover:bg-slate-50 transition-all rounded-[2rem] active:scale-[0.98] shadow-sm"
|
||||
>
|
||||
Try Again
|
||||
Reset Response Vector
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -75,26 +75,27 @@ export default function VideoMarkerBlock({
|
||||
|
||||
if (!editMode) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xs font-black uppercase tracking-widest text-gray-400">
|
||||
{title || "Video con Marcadores"}
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 pl-1">
|
||||
{title || "Interactive Temporal Nodes"}
|
||||
</h3>
|
||||
<div className="glass-card p-6 border-indigo-500/20 bg-indigo-500/5">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-2 rounded-lg bg-indigo-500/10 text-indigo-400">
|
||||
<Clock size={20} />
|
||||
<div className="bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 p-8 rounded-[2.5rem] shadow-sm relative overflow-hidden group/vm">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 group-hover/vm:bg-indigo-500/10 transition-colors"></div>
|
||||
<div className="flex items-center gap-4 mb-8 relative z-10">
|
||||
<div className="p-3 rounded-2xl bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 shadow-inner">
|
||||
<Clock size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-white">Video Interactivo</p>
|
||||
<p className="text-xs text-gray-500">{markers.length} marcadores configurados</p>
|
||||
<p className="text-lg font-black text-slate-900 dark:text-white uppercase tracking-tight italic">Interactive Stream</p>
|
||||
<p className="text-[10px] text-slate-400 dark:text-gray-500 uppercase font-black tracking-widest">{markers.length} SYNC MARKERS DETECTED</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-3 relative z-10">
|
||||
{markers.map((marker, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2 text-xs text-gray-400">
|
||||
<span className="font-mono text-indigo-400">{formatTime(marker.timestamp)}</span>
|
||||
<span>→</span>
|
||||
<span className="truncate">{marker.question}</span>
|
||||
<div key={idx} className="flex items-center gap-4 text-[10px] text-slate-500 dark:text-gray-400 font-black uppercase tracking-wider bg-slate-50/50 dark:bg-white/5 p-3 rounded-xl border border-slate-100 dark:border-white/5">
|
||||
<span className="font-mono text-indigo-600 dark:text-indigo-400 bg-white dark:bg-black/40 px-2 py-1 rounded-lg border border-slate-100 dark:border-white/10 shadow-sm">{formatTime(marker.timestamp)}</span>
|
||||
<span className="opacity-20">/</span>
|
||||
<span className="truncate italic">{marker.question}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -106,138 +107,148 @@ export default function VideoMarkerBlock({
|
||||
return (
|
||||
<div className="space-y-6 animate-in fade-in duration-300">
|
||||
{/* Title Editor */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Título del Bloque</label>
|
||||
<div className="space-y-4 p-8 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2rem] mb-6 shadow-inner relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-indigo-500/40"></div>
|
||||
<label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em]">Activity Title (Optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
placeholder="Ej: Video Tutorial - Introducción"
|
||||
className="w-full bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-3 text-sm font-black uppercase tracking-tight focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none shadow-sm"
|
||||
placeholder="e.g. Masterclass Stream, Acoustic Analysis..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Video Preview with Timeline */}
|
||||
<div className="glass-card p-4 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-sm font-bold text-white flex items-center gap-2">
|
||||
<Play size={16} className="text-indigo-400" />
|
||||
Vista Previa del Video
|
||||
<div className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 p-6 rounded-[3rem] space-y-6 shadow-xl relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2"></div>
|
||||
<div className="flex items-center justify-between relative z-10 px-2">
|
||||
<h4 className="text-[10px] font-black text-slate-900 dark:text-white flex items-center gap-3 uppercase tracking-widest italic">
|
||||
<Play size={16} className="text-indigo-600 dark:text-indigo-400" />
|
||||
Temporal Scrutiny
|
||||
</h4>
|
||||
<span className="text-xs font-mono text-gray-500">{formatTime(currentTime)}</span>
|
||||
<span className="text-xs font-black font-mono text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-black/40 px-3 py-1 rounded-full border border-indigo-100 dark:border-white/10">{formatTime(currentTime)}</span>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg overflow-hidden">
|
||||
<div className="rounded-[2rem] overflow-hidden border border-slate-100 dark:border-white/10 shadow-2xl relative z-10">
|
||||
<MediaPlayer
|
||||
src={videoUrl}
|
||||
type="video"
|
||||
isGraded={isGraded}
|
||||
showInteractive={false} // Interactive markers are separate here
|
||||
showInteractive={false}
|
||||
onTimeUpdate={setCurrentTime}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={addMarker}
|
||||
className="w-full py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg font-bold flex items-center justify-center gap-2 transition-all"
|
||||
className="w-full py-5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-[2rem] font-black text-[10px] uppercase tracking-[0.3em] flex items-center justify-center gap-4 transition-all shadow-2xl shadow-indigo-500/40 active:scale-95 group relative z-10"
|
||||
>
|
||||
<Plus size={16} />
|
||||
Agregar Marcador en {formatTime(currentTime)}
|
||||
<Plus size={18} className="group-hover:rotate-90 transition-transform" />
|
||||
Inject Marker at {formatTime(currentTime)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Markers List */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-sm font-bold text-white flex items-center gap-2">
|
||||
<Clock size={16} className="text-amber-400" />
|
||||
Marcadores ({markers.length})
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<h4 className="text-[10px] font-black text-slate-400 dark:text-gray-500 flex items-center gap-3 uppercase tracking-[0.2em]">
|
||||
<Clock size={16} className="text-amber-500" />
|
||||
Interactive Sequence ({markers.length})
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
{markers.length === 0 && (
|
||||
<div className="glass-card p-8 text-center border-dashed">
|
||||
<AlertCircle className="w-12 h-12 text-gray-600 mx-auto mb-3" />
|
||||
<p className="text-sm text-gray-500">No hay marcadores configurados.</p>
|
||||
<p className="text-xs text-gray-600 mt-1">Reproduce el video y haz clic en "Agregar Marcador"</p>
|
||||
<div className="bg-slate-50 dark:bg-black/20 border-2 border-dashed border-slate-200 dark:border-white/10 p-16 rounded-[3rem] text-center space-y-4">
|
||||
<AlertCircle className="w-12 h-12 text-slate-300 dark:text-gray-700 mx-auto opacity-40" />
|
||||
<div className="space-y-1">
|
||||
<p className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest">No interactive nodes detected</p>
|
||||
<p className="text-[9px] text-slate-300 dark:text-gray-600 uppercase font-black italic">Initiate playback and execute "Inject Marker"</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{markers.map((marker, idx) => (
|
||||
<div key={idx} className="glass-card p-4 space-y-3 border-l-4 border-indigo-500">
|
||||
<div key={idx} className="bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-[2.5rem] shadow-sm overflow-hidden group/mkr transition-all duration-500 hover:shadow-xl hover:border-indigo-500/20">
|
||||
<div className="p-6 border-l-[6px] border-indigo-600 flex flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs font-mono font-bold text-indigo-400 bg-indigo-500/10 px-2 py-1 rounded">
|
||||
{formatTime(marker.timestamp)}
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-[10px] font-black text-indigo-700 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-500/10 px-4 py-2 rounded-xl border border-indigo-100 dark:border-indigo-500/20 shadow-inner italic">
|
||||
SYNC {formatTime(marker.timestamp)}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setEditingIndex(editingIndex === idx ? null : idx)}
|
||||
className="text-xs text-gray-500 hover:text-white transition-colors"
|
||||
className="text-[9px] font-black uppercase tracking-[0.2em] text-slate-400 hover:text-indigo-600 transition-colors"
|
||||
>
|
||||
{editingIndex === idx ? "Colapsar" : "Editar"}
|
||||
{editingIndex === idx ? "COLLAPSE" : "SCRUTINIZE"}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => deleteMarker(idx)}
|
||||
className="p-2 hover:bg-red-500/10 rounded-lg text-red-500 transition-all"
|
||||
className="p-3 bg-red-50 dark:bg-red-500/5 hover:bg-red-500 hover:text-white rounded-xl text-red-500 transition-all active:scale-90"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{editingIndex === idx ? (
|
||||
<div className="space-y-3 pt-2 border-t border-white/5">
|
||||
<div className="space-y-6 pt-6 border-t border-slate-50 dark:border-white/5 animate-in slide-in-from-top-2 duration-500">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Timestamp Editor */}
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-bold text-gray-600 uppercase tracking-widest">Timestamp (MM:SS)</label>
|
||||
<div className="space-y-3">
|
||||
<label className="text-[9px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest pl-1">Temporal Alignment (MM:SS)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formatTime(marker.timestamp)}
|
||||
onChange={(e) => updateMarker(idx, { timestamp: parseTime(e.target.value) })}
|
||||
className="w-full bg-black/20 border border-white/10 rounded px-3 py-1.5 text-sm font-mono text-white focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl px-5 py-3 text-sm font-black font-mono text-slate-800 dark:text-white focus:ring-4 focus:ring-indigo-500/10 transition-all outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Question Editor */}
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-bold text-gray-600 uppercase tracking-widest">Pregunta</label>
|
||||
<div className="space-y-3">
|
||||
<label className="text-[9px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest pl-1">Inquiry Scoped Prompt</label>
|
||||
<input
|
||||
type="text"
|
||||
value={marker.question}
|
||||
onChange={(e) => updateMarker(idx, { question: e.target.value })}
|
||||
className="w-full bg-black/20 border border-white/10 rounded px-3 py-2 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
placeholder="¿Qué concepto se explicó?"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl px-5 py-3 text-sm font-black text-slate-800 dark:text-white focus:ring-4 focus:ring-indigo-500/10 transition-all outline-none"
|
||||
placeholder="¿Critical concept?"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Options Editor */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-bold text-gray-600 uppercase tracking-widest">Opciones de Respuesta</label>
|
||||
<div className="space-y-4">
|
||||
<label className="text-[9px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest pl-1">Probability Vectors (Options)</label>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{marker.options.map((option, optIdx) => (
|
||||
<div key={optIdx} className="flex items-center gap-2">
|
||||
<div key={optIdx} className="flex items-center gap-3 bg-slate-50 dark:bg-black/20 p-3 rounded-[1.5rem] border border-slate-100 dark:border-white/10 group/opt">
|
||||
<input
|
||||
type="radio"
|
||||
name={`correct-${idx}`}
|
||||
checked={marker.correctIndex === optIdx}
|
||||
onChange={() => updateMarker(idx, { correctIndex: optIdx })}
|
||||
className="w-4 h-4 text-green-500"
|
||||
className="w-5 h-5 text-green-600 dark:text-green-500 bg-white dark:bg-black/40 border-slate-300 dark:border-white/10 focus:ring-green-500"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={option}
|
||||
onChange={(e) => updateOption(idx, optIdx, e.target.value)}
|
||||
className="flex-1 bg-black/20 border border-white/10 rounded px-3 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-green-500"
|
||||
placeholder={`Opción ${optIdx + 1}`}
|
||||
className="flex-1 bg-transparent border-none p-0 text-sm font-bold text-slate-700 dark:text-white focus:ring-0 outline-none"
|
||||
placeholder={`Vector ${optIdx + 1}`}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<p className="text-[10px] text-gray-600 italic">Selecciona el radio button de la respuesta correcta</p>
|
||||
</div>
|
||||
<p className="text-[9px] text-slate-400 dark:text-gray-600 uppercase font-black italic pl-1 italic">Identify the absolute truth vector via the terminal radio toggle.</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-gray-400 truncate">{marker.question}</p>
|
||||
<p className="text-xl font-black text-slate-800 dark:text-gray-200 tracking-tight uppercase italic">{marker.question}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user