feat: Introduce PageLayout component to standardize page headers and overall structure across various application pages.
This commit is contained in:
@@ -80,30 +80,30 @@ export default function CourseFilesPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<CourseEditorLayout activeTab="files">
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Course Files & Assets</h1>
|
||||
<p className="text-gray-400 mt-1">Manage files specific to this course. These will be included in exports.</p>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="file"
|
||||
onChange={handleUpload}
|
||||
className="hidden"
|
||||
id="file-upload"
|
||||
disabled={isUploading}
|
||||
/>
|
||||
<label
|
||||
htmlFor="file-upload"
|
||||
className={`btn btn-primary gap-2 cursor-pointer ${isUploading ? 'loading' : ''}`}
|
||||
>
|
||||
{!isUploading && <Upload className="w-4 h-4" />}
|
||||
{isUploading ? `Uploading ${uploadProgress}%` : 'Upload File'}
|
||||
</label>
|
||||
</div>
|
||||
<CourseEditorLayout
|
||||
activeTab="files"
|
||||
pageTitle="Archivos y Recursos"
|
||||
pageDescription="Gestiona los archivos específicos de este curso. Estos se incluirán en las exportaciones."
|
||||
pageActions={
|
||||
<div className="relative">
|
||||
<input
|
||||
type="file"
|
||||
onChange={handleUpload}
|
||||
className="hidden"
|
||||
id="file-upload"
|
||||
disabled={isUploading}
|
||||
/>
|
||||
<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' : ''}`}
|
||||
>
|
||||
{!isUploading && <Upload className="w-4 h-4" />}
|
||||
{isUploading ? `Subiendo ${uploadProgress}%` : 'Subir Archivo'}
|
||||
</label>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
|
||||
<div className="glass rounded-xl overflow-hidden">
|
||||
<table className="w-full text-left">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useParams } from "next/navigation";
|
||||
import { cmsApi, GradingCategory } from "@/lib/api";
|
||||
import {
|
||||
Plus,
|
||||
@@ -9,7 +9,6 @@ import {
|
||||
Percent,
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
ArrowLeft,
|
||||
TrendingUp,
|
||||
Settings
|
||||
} from "lucide-react";
|
||||
@@ -23,7 +22,6 @@ function cn(...inputs: ClassValue[]) {
|
||||
|
||||
export default function GradingPolicyPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
const router = useRouter();
|
||||
const [categories, setCategories] = useState<GradingCategory[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [newName, setNewName] = useState("");
|
||||
@@ -80,145 +78,128 @@ export default function GradingPolicyPage() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-12">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="p-2 hover:bg-white/10 rounded-full transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-6 h-6" />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
|
||||
Grading Policy
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Configure assessment types and weight distribution</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
)}>
|
||||
{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>
|
||||
</div>
|
||||
<CourseEditorLayout
|
||||
activeTab="grading"
|
||||
pageTitle="Política de Notas"
|
||||
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"
|
||||
)}>
|
||||
{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>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="p-0">
|
||||
<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-gray-500 mb-6 flex items-center gap-2">
|
||||
<Settings className="w-4 h-4" /> Assessment Categories
|
||||
</h2>
|
||||
|
||||
<CourseEditorLayout activeTab="grading">
|
||||
<div className="p-8">
|
||||
<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-gray-500 mb-6 flex items-center gap-2">
|
||||
<Settings className="w-4 h-4" /> Assessment Categories
|
||||
</h2>
|
||||
|
||||
{categories.length === 0 ? (
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-12 text-center">
|
||||
<TrendingUp className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-400 italic">No grading categories defined yet.</p>
|
||||
</div>
|
||||
) : (
|
||||
categories.map((cat) => (
|
||||
<div
|
||||
key={cat.id}
|
||||
className="group bg-white/5 border border-white/10 p-6 rounded-2xl flex items-center justify-between hover:border-blue-500/50 hover:bg-white/[0.07] transition-all duration-300"
|
||||
>
|
||||
<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-400 font-bold group-hover:scale-110 transition-transform">
|
||||
{cat.weight}%
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-100">{cat.name}</h3>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-xs text-gray-500 bg-white/5 px-2 py-0.5 rounded-full capitalize">
|
||||
Weight: {cat.weight}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDelete(cat.id)}
|
||||
className="p-3 bg-red-500/10 text-red-400 rounded-xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-gray-900 dark:text-white transition-all duration-300"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
{categories.length === 0 ? (
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-12 text-center">
|
||||
<TrendingUp className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-400 italic">No grading categories defined yet.</p>
|
||||
</div>
|
||||
|
||||
{/* Add New Category Form */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-8 rounded-3xl border border-white/10 sticky top-8">
|
||||
<h2 className="text-xl font-bold mb-6 flex items-center gap-2">
|
||||
<Plus className="w-5 h-5 text-blue-400" /> New Format
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Assessment Type</label>
|
||||
<select
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 mt-1.5 focus:outline-none focus:border-blue-500 transition-all text-gray-100 appearance-none"
|
||||
>
|
||||
<option value="" className="bg-white dark:bg-gray-900 text-gray-500">Select a type...</option>
|
||||
<option value="Continuous Assessment" className="bg-white dark:bg-gray-900">Continuous Assessment (Min 4)</option>
|
||||
<option value="Midterm" className="bg-white dark:bg-gray-900">Midterm</option>
|
||||
<option value="Final Test" className="bg-white dark:bg-gray-900">Final Test</option>
|
||||
<option value="Exam" className="bg-white dark:bg-gray-900">Exam</option>
|
||||
</select>
|
||||
) : (
|
||||
categories.map((cat) => (
|
||||
<div
|
||||
key={cat.id}
|
||||
className="group bg-white/5 border border-white/10 p-6 rounded-2xl flex items-center justify-between hover:border-blue-500/50 hover:bg-white/[0.07] transition-all duration-300"
|
||||
>
|
||||
<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-400 font-bold group-hover:scale-110 transition-transform">
|
||||
{cat.weight}%
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Weight (%)</label>
|
||||
<div className="relative mt-1.5">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="20"
|
||||
value={newWeight || ""}
|
||||
onChange={(e) => setNewWeight(parseInt(e.target.value) || 0)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-all text-gray-100 pl-10"
|
||||
/>
|
||||
<Percent className="w-4 h-4 text-gray-500 absolute left-4 top-1/2 -translate-y-1/2" />
|
||||
<h3 className="text-lg font-semibold text-gray-100">{cat.name}</h3>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-xs text-gray-500 bg-white/5 px-2 py-0.5 rounded-full capitalize">
|
||||
Weight: {cat.weight}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDelete(cat.id)}
|
||||
className="p-3 bg-red-500/10 text-red-400 rounded-xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-gray-900 dark:text-white transition-all duration-300"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={submitting || !newName || newWeight <= 0}
|
||||
className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-gray-900 dark: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"
|
||||
>
|
||||
{submitting ? "Adding..." : (
|
||||
<>
|
||||
<Plus className="w-5 h-5" />
|
||||
Add Category
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{/* Add New Category Form */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-8 rounded-3xl border border-white/10 sticky top-8">
|
||||
<h2 className="text-xl font-bold mb-6 flex items-center gap-2">
|
||||
<Plus className="w-5 h-5 text-blue-400" /> New Format
|
||||
</h2>
|
||||
|
||||
{!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-500 shrink-0 mt-0.5" />
|
||||
<p className="text-sm 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>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Assessment Type</label>
|
||||
<select
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 mt-1.5 focus:outline-none focus:border-blue-500 transition-all text-gray-100 appearance-none"
|
||||
>
|
||||
<option value="" className="bg-white dark:bg-gray-900 text-gray-500">Select a type...</option>
|
||||
<option value="Continuous Assessment" className="bg-white dark:bg-gray-900">Continuous Assessment (Min 4)</option>
|
||||
<option value="Midterm" className="bg-white dark:bg-gray-900">Midterm</option>
|
||||
<option value="Final Test" className="bg-white dark:bg-gray-900">Final Test</option>
|
||||
<option value="Exam" className="bg-white dark:bg-gray-900">Exam</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Weight (%)</label>
|
||||
<div className="relative mt-1.5">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="20"
|
||||
value={newWeight || ""}
|
||||
onChange={(e) => setNewWeight(parseInt(e.target.value) || 0)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-all text-gray-100 pl-10"
|
||||
/>
|
||||
<Percent className="w-4 h-4 text-gray-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-gray-700 disabled:text-gray-500 text-gray-900 dark: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"
|
||||
>
|
||||
{submitting ? "Adding..." : (
|
||||
<>
|
||||
<Plus className="w-5 h-5" />
|
||||
Add Category
|
||||
</>
|
||||
)}
|
||||
</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-500 shrink-0 mt-0.5" />
|
||||
<p className="text-sm 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>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -222,30 +222,13 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
if (error) return <div className="py-20 text-center text-red-400">{error}</div>;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-transparent text-gray-900 dark:text-gray-100 p-8 transition-colors duration-300">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-12">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => router.push('/')}
|
||||
className="p-2 hover:bg-black/5 dark:hover:bg-white/10 rounded-full transition-colors text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<ArrowLeft className="w-6 h-6" />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent">
|
||||
Course Editor
|
||||
</h1>
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<p className="text-gray-600 dark:text-gray-400">Design your course structure and lesson content for {course?.title}</p>
|
||||
<span className={`text-xs uppercase font-bold px-2 py-0.5 rounded ${course?.pacing_mode === 'instructor_led' ? 'bg-purple-500/10 dark:bg-purple-500/20 text-purple-600 dark:text-purple-400' : 'bg-green-500/10 dark:bg-green-500/20 text-green-600 dark:text-green-400'}`}>
|
||||
{course?.pacing_mode?.replace('_', ' ') || 'Self Paced'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<>
|
||||
<CourseEditorLayout
|
||||
activeTab="outline"
|
||||
pageTitle="Editor de Curso"
|
||||
pageDescription={`Diseña la estructura de tu curso y el contenido de las lecciones.`}
|
||||
pageActions={
|
||||
<>
|
||||
<button
|
||||
onClick={async () => {
|
||||
try {
|
||||
@@ -257,191 +240,189 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
alert("Failed to start preview.");
|
||||
}
|
||||
}}
|
||||
className="flex items-center gap-2 px-6 py-3 glass hover:bg-white/20 transition-all rounded-xl text-sm font-bold shadow-lg active:scale-95"
|
||||
className="flex items-center gap-2 px-6 py-2.5 bg-white dark:bg-white/5 hover:bg-black/5 dark:hover:bg-white/10 border border-black/10 dark:border-white/10 rounded-xl text-sm font-bold transition-all active:scale-95"
|
||||
>
|
||||
<PlayCircle size={18} /> Preview
|
||||
<PlayCircle size={18} /> Previsualizar
|
||||
</button>
|
||||
<button
|
||||
onClick={handlePublish}
|
||||
disabled={saving}
|
||||
className={`flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-500 rounded-xl font-bold transition-all shadow-lg shadow-blue-500/20 active:scale-95 ${saving ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
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' : ''}`}
|
||||
>
|
||||
{saving ? (
|
||||
<div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" />
|
||||
) : (
|
||||
<Send size={18} />
|
||||
)}
|
||||
{saving ? 'Publishing...' : 'Publish Course'}
|
||||
{saving ? 'Publicando...' : 'Publicar Curso'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="outline">
|
||||
<div className="p-8 space-y-6">
|
||||
{modules.map((module: FullModule, mIndex: number) => (
|
||||
<div key={module.id} className="glass rounded-xl overflow-hidden border-white/5">
|
||||
<div className="bg-white/5 px-6 py-4 flex justify-between items-center border-b border-white/5">
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<div className="flex flex-col">
|
||||
<button
|
||||
onClick={() => handleReorderModule(mIndex, 'up')}
|
||||
disabled={mIndex === 0}
|
||||
className="text-gray-500 hover:text-blue-400 disabled:opacity-0 transition-colors"
|
||||
>
|
||||
<ChevronUp className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleReorderModule(mIndex, 'down')}
|
||||
disabled={mIndex === modules.length - 1}
|
||||
className="text-gray-500 hover:text-blue-400 disabled:opacity-0 transition-colors"
|
||||
>
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<GripVertical className="text-gray-600 w-5 h-5 cursor-grab active:cursor-grabbing" />
|
||||
|
||||
{editingId === module.id ? (
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<input
|
||||
autoFocus
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(module.id, 'module')}
|
||||
className="bg-black/5 dark:bg-black/40 border border-blue-500/50 rounded px-3 py-1 flex-1 text-gray-900 dark:text-gray-900 dark:text-white focus:outline-none"
|
||||
/>
|
||||
<button onClick={() => handleSaveTitle(module.id, 'module')} className="text-green-400 hover:text-green-300">
|
||||
<Save className="w-5 h-5" />
|
||||
</button>
|
||||
<button onClick={() => setEditingId(null)} className="text-gray-400 hover:text-red-400">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-3 group flex-1">
|
||||
<span
|
||||
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
|
||||
className="font-semibold text-lg text-blue-600 dark:text-blue-400 cursor-pointer hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
|
||||
>
|
||||
{module.title || `Module ${module.position}`}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
|
||||
className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{modules.map((module: FullModule, mIndex: number) => (
|
||||
<div key={module.id} className="glass rounded-xl overflow-hidden border-white/5">
|
||||
<div className="bg-white/5 px-6 py-4 flex justify-between items-center border-b border-white/5">
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<div className="flex flex-col">
|
||||
<button
|
||||
onClick={() => handleDeleteModule(module.id)}
|
||||
className="text-gray-500 hover:text-red-400 transition-colors"
|
||||
onClick={() => handleReorderModule(mIndex, 'up')}
|
||||
disabled={mIndex === 0}
|
||||
className="text-gray-500 hover:text-blue-400 disabled:opacity-0 transition-colors"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
<ChevronUp className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleReorderModule(mIndex, 'down')}
|
||||
disabled={mIndex === modules.length - 1}
|
||||
className="text-gray-500 hover:text-blue-400 disabled:opacity-0 transition-colors"
|
||||
>
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 space-y-3">
|
||||
{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">
|
||||
<button
|
||||
onClick={() => handleReorderLesson(module.id, lIndex, 'up')}
|
||||
disabled={lIndex === 0}
|
||||
className="text-gray-500 hover:text-blue-400 disabled:opacity-0"
|
||||
>
|
||||
<ChevronUp className="w-3 h-3" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleReorderLesson(module.id, lIndex, 'down')}
|
||||
disabled={lIndex === module.lessons.length - 1}
|
||||
className="text-gray-500 hover:text-blue-400 disabled:opacity-0"
|
||||
>
|
||||
<ChevronDown className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
<GripVertical className="text-gray-600 w-5 h-5 cursor-grab active:cursor-grabbing" />
|
||||
|
||||
<div className="flex-1">
|
||||
{editingId === lesson.id ? (
|
||||
<div className="flex items-center gap-2 glass border-blue-500/30 p-2 rounded-lg bg-black/5 dark:bg-black/20">
|
||||
<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-gray-900 dark:text-gray-900 dark:text-white focus:outline-none"
|
||||
/>
|
||||
<button onClick={() => handleSaveTitle(lesson.id, 'lesson')} className="text-green-600 dark:text-green-400">
|
||||
<Save className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={() => setEditingId(null)} className="text-gray-500 dark:text-gray-400">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-between glass border-black/5 dark:border-white/5 p-4 rounded-xl hover:bg-black/5 dark:hover:bg-white/10 hover:border-blue-500/30 transition-all cursor-pointer group/lesson">
|
||||
<Link href={`/courses/${params.id}/lessons/${lesson.id}`} className="flex-1 flex items-center gap-4">
|
||||
<div className="p-2 bg-blue-500/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>
|
||||
<div className="flex flex-col">
|
||||
<span
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
|
||||
className="font-medium text-gray-900 dark:text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
||||
>
|
||||
{lesson.title}
|
||||
</span>
|
||||
<div className="flex items-center gap-3 text-xs text-gray-500 uppercase mt-0.5 font-bold">
|
||||
<span>{lesson.content_type}</span>
|
||||
{lesson.due_date && (
|
||||
<div className="flex items-center gap-1 text-orange-600 dark:text-orange-400">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{new Date(lesson.due_date).toLocaleDateString()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
|
||||
className="opacity-0 group-hover/lesson:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
|
||||
>
|
||||
<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-gray-500 hover:text-red-400 transition-opacity"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{editingId === module.id ? (
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<input
|
||||
autoFocus
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(module.id, 'module')}
|
||||
className="bg-black/5 dark:bg-black/40 border border-blue-500/50 rounded px-3 py-1 flex-1 text-gray-900 dark:text-gray-900 dark:text-white focus:outline-none"
|
||||
/>
|
||||
<button onClick={() => handleSaveTitle(module.id, 'module')} className="text-green-400 hover:text-green-300">
|
||||
<Save className="w-5 h-5" />
|
||||
</button>
|
||||
<button onClick={() => setEditingId(null)} className="text-gray-400 hover:text-red-400">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
) : (
|
||||
<div className="flex items-center gap-3 group flex-1">
|
||||
<span
|
||||
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
|
||||
className="font-semibold text-lg text-blue-600 dark:text-blue-400 cursor-pointer hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
|
||||
>
|
||||
{module.title || `Module ${module.position}`}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
|
||||
className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => handleAddLesson(module.id)}
|
||||
className="w-full py-3 border border-dashed border-black/10 dark:border-white/10 rounded-xl text-sm text-gray-500 hover:text-gray-900 dark:hover:text-gray-900 dark:text-white hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition-all mt-3 flex items-center justify-center gap-2"
|
||||
onClick={() => handleDeleteModule(module.id)}
|
||||
className="text-gray-500 hover:text-red-400 transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" /> New Lesson
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="p-6 space-y-3">
|
||||
{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">
|
||||
<button
|
||||
onClick={() => handleReorderLesson(module.id, lIndex, 'up')}
|
||||
disabled={lIndex === 0}
|
||||
className="text-gray-500 hover:text-blue-400 disabled:opacity-0"
|
||||
>
|
||||
<ChevronUp className="w-3 h-3" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleReorderLesson(module.id, lIndex, 'down')}
|
||||
disabled={lIndex === module.lessons.length - 1}
|
||||
className="text-gray-500 hover:text-blue-400 disabled:opacity-0"
|
||||
>
|
||||
<ChevronDown className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleAddModule}
|
||||
className="w-full py-6 border-2 border-dashed border-black/10 dark:border-white/10 rounded-2xl font-medium text-gray-500 hover:text-gray-900 dark:hover:text-gray-900 dark:text-white hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition-all flex items-center justify-center gap-3 text-lg"
|
||||
>
|
||||
<Plus className="w-6 h-6" /> Add New Module
|
||||
</button>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
{editingId === lesson.id ? (
|
||||
<div className="flex items-center gap-2 glass border-blue-500/30 p-2 rounded-lg bg-black/5 dark:bg-black/20">
|
||||
<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-gray-900 dark:text-gray-900 dark:text-white focus:outline-none"
|
||||
/>
|
||||
<button onClick={() => handleSaveTitle(lesson.id, 'lesson')} className="text-green-600 dark:text-green-400">
|
||||
<Save className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={() => setEditingId(null)} className="text-gray-500 dark:text-gray-400">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-between glass border-black/5 dark:border-white/5 p-4 rounded-xl hover:bg-black/5 dark:hover:bg-white/10 hover:border-blue-500/30 transition-all cursor-pointer group/lesson">
|
||||
<Link href={`/courses/${params.id}/lessons/${lesson.id}`} className="flex-1 flex items-center gap-4">
|
||||
<div className="p-2 bg-blue-500/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>
|
||||
<div className="flex flex-col">
|
||||
<span
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
|
||||
className="font-medium text-gray-900 dark:text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
||||
>
|
||||
{lesson.title}
|
||||
</span>
|
||||
<div className="flex items-center gap-3 text-xs text-gray-500 uppercase mt-0.5 font-bold">
|
||||
<span>{lesson.content_type}</span>
|
||||
{lesson.due_date && (
|
||||
<div className="flex items-center gap-1 text-orange-600 dark:text-orange-400">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{new Date(lesson.due_date).toLocaleDateString()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
|
||||
className="opacity-0 group-hover/lesson:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
|
||||
>
|
||||
<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-gray-500 hover:text-red-400 transition-opacity"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={() => handleAddLesson(module.id)}
|
||||
className="w-full py-3 border border-dashed border-black/10 dark:border-white/10 rounded-xl text-sm text-gray-500 hover:text-gray-900 dark:hover:text-gray-900 dark:text-white hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition-all mt-3 flex items-center justify-center gap-2"
|
||||
>
|
||||
<Plus className="w-4 h-4" /> New Lesson
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={handleAddModule}
|
||||
className="w-full py-6 border-2 border-dashed border-black/10 dark:border-white/10 rounded-2xl font-medium text-gray-500 hover:text-gray-900 dark:hover:text-gray-900 dark:text-white hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition-all flex items-center justify-center gap-3 text-lg"
|
||||
>
|
||||
<Plus className="w-6 h-6" /> Add New Module
|
||||
</button>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
{/* Organization Selector Modal */}
|
||||
<OrganizationSelector
|
||||
isOpen={isOrgModalOpen}
|
||||
@@ -451,6 +432,6 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
actionLabel="Publish Course"
|
||||
onConfirm={(orgId) => publishCourse(orgId)}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,60 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useParams } from "next/navigation";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
import RubricList from "@/components/Rubrics/RubricList";
|
||||
import RubricEditor from "@/components/Rubrics/RubricEditor";
|
||||
import { ArrowLeft, FileText, Info } from "lucide-react";
|
||||
import { FileText, Info } from "lucide-react";
|
||||
|
||||
export default function RubricsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
const router = useRouter();
|
||||
const [editingRubricId, setEditingRubricId] = useState<string | null>(null);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-12">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="p-2 hover:bg-white/10 rounded-full transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-6 h-6" />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
|
||||
Rubrics Management
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Create and manage evaluation rubrics for your course</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<Info className="w-4 h-4" />
|
||||
<span>Rubrics can be assigned to multiple lessons across the course.</span>
|
||||
</div>
|
||||
<CourseEditorLayout
|
||||
activeTab="rubrics"
|
||||
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">
|
||||
<Info className="w-4 h-4" />
|
||||
<span>Las rúbricas pueden asignarse a múltiples lecciones.</span>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="rubrics">
|
||||
<div className="p-8">
|
||||
{editingRubricId ? (
|
||||
<RubricEditor
|
||||
rubricId={editingRubricId}
|
||||
courseId={id}
|
||||
onClose={() => setEditingRubricId(null)}
|
||||
/>
|
||||
) : (
|
||||
<RubricList
|
||||
courseId={id}
|
||||
onEdit={(rubricId) => setEditingRubricId(rubricId)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
}
|
||||
>
|
||||
<div className="p-0">
|
||||
{editingRubricId ? (
|
||||
<RubricEditor
|
||||
rubricId={editingRubricId}
|
||||
courseId={id}
|
||||
onClose={() => setEditingRubricId(null)}
|
||||
/>
|
||||
) : (
|
||||
<RubricList
|
||||
courseId={id}
|
||||
onEdit={(rubricId) => setEditingRubricId(rubricId)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useParams } from "next/navigation";
|
||||
import { lmsApi, cmsApi, Course, Meeting } from "@/lib/api";
|
||||
import {
|
||||
Video,
|
||||
@@ -9,7 +9,6 @@ import {
|
||||
Calendar as CalendarIcon,
|
||||
Clock,
|
||||
Trash2,
|
||||
ArrowLeft,
|
||||
Loader2,
|
||||
Globe,
|
||||
Link as LinkIcon,
|
||||
@@ -19,7 +18,6 @@ import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
export default function LiveSessionsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
const router = useRouter();
|
||||
const [meetings, setMeetings] = useState<Meeting[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
@@ -81,103 +79,93 @@ export default function LiveSessionsPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={() => router.back()} className="p-2 hover:bg-white/10 rounded-full transition-colors">
|
||||
<ArrowLeft className="w-6 h-6" />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-green-400 bg-clip-text text-transparent">
|
||||
Live Learning Sessions
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Schedule and manage virtual meetings and live sessions</p>
|
||||
</div>
|
||||
</div>
|
||||
<>
|
||||
<CourseEditorLayout
|
||||
activeTab="sessions"
|
||||
pageTitle="Sesiones en Vivo"
|
||||
pageDescription="Programa y gestiona reuniones virtuales y sesiones en vivo."
|
||||
pageActions={
|
||||
<button
|
||||
onClick={() => setIsCreateModalOpen(true)}
|
||||
className="btn-premium px-6 py-3 flex items-center gap-2"
|
||||
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"
|
||||
>
|
||||
<Plus size={18} />
|
||||
Schedule Session
|
||||
<Plus size={16} />
|
||||
Programar Sesión
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<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>
|
||||
) : (
|
||||
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">
|
||||
<button
|
||||
onClick={() => handleDeleteMeeting(meeting.id)}
|
||||
className="p-2 hover:bg-red-500/20 text-red-400 rounded-lg transition-colors"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="sessions">
|
||||
<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>
|
||||
) : (
|
||||
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">
|
||||
<button
|
||||
onClick={() => handleDeleteMeeting(meeting.id)}
|
||||
className="p-2 hover:bg-red-500/20 text-red-400 rounded-lg transition-colors"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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} />
|
||||
{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>
|
||||
<div className="flex items-center gap-3 text-sm text-gray-400">
|
||||
<Clock size={16} className="text-blue-500" />
|
||||
<span className="font-medium">
|
||||
{new Date(meeting.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
<span className="mx-2 opacity-30">|</span>
|
||||
{meeting.duration_minutes} minutes
|
||||
</span>
|
||||
</div>
|
||||
{meeting.description && (
|
||||
<p className="text-xs text-gray-500 line-clamp-2 mt-2 leading-relaxed italic">
|
||||
"{meeting.description}"
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<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"
|
||||
onClick={() => {
|
||||
const url = meeting.join_url || `https://meet.jit.si/${meeting.meeting_id}`;
|
||||
window.open(url, '_blank');
|
||||
}}
|
||||
>
|
||||
<LinkIcon size={14} />
|
||||
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>
|
||||
<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} />
|
||||
{meeting.provider} Session
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</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>
|
||||
<div className="flex items-center gap-3 text-sm text-gray-400">
|
||||
<Clock size={16} className="text-blue-500" />
|
||||
<span className="font-medium">
|
||||
{new Date(meeting.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
<span className="mx-2 opacity-30">|</span>
|
||||
{meeting.duration_minutes} minutes
|
||||
</span>
|
||||
</div>
|
||||
{meeting.description && (
|
||||
<p className="text-xs text-gray-500 line-clamp-2 mt-2 leading-relaxed italic">
|
||||
"{meeting.description}"
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<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"
|
||||
onClick={() => {
|
||||
const url = meeting.join_url || `https://meet.jit.si/${meeting.meeting_id}`;
|
||||
window.open(url, '_blank');
|
||||
}}
|
||||
>
|
||||
<LinkIcon size={14} />
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
|
||||
{/* Create Meeting Modal */}
|
||||
{isCreateModalOpen && (
|
||||
@@ -246,6 +234,6 @@ export default function LiveSessionsPage() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user