feat: Introduce PageLayout component to standardize page headers and overall structure across various application pages.
This commit is contained in:
@@ -80,13 +80,11 @@ 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>
|
||||
<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"
|
||||
@@ -97,13 +95,15 @@ export default function CourseFilesPage() {
|
||||
/>
|
||||
<label
|
||||
htmlFor="file-upload"
|
||||
className={`btn btn-primary gap-2 cursor-pointer ${isUploading ? 'loading' : ''}`}
|
||||
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 ? `Uploading ${uploadProgress}%` : 'Upload File'}
|
||||
{isUploading ? `Subiendo ${uploadProgress}%` : 'Subir Archivo'}
|
||||
</label>
|
||||
</div>
|
||||
</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,25 +78,11 @@ 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>
|
||||
|
||||
<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"
|
||||
@@ -108,10 +92,9 @@ export default function GradingPolicyPage() {
|
||||
<span className="font-bold text-lg">{totalWeight}%</span>
|
||||
<span className="text-sm opacity-70">Total Weight</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="grading">
|
||||
<div className="p-8">
|
||||
}
|
||||
>
|
||||
<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">
|
||||
@@ -218,7 +201,5 @@ export default function GradingPolicyPage() {
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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,27 +240,26 @@ 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">
|
||||
</>
|
||||
}
|
||||
>
|
||||
<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">
|
||||
@@ -441,7 +423,6 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
</button>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
{/* 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,45 +1,29 @@
|
||||
"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>
|
||||
|
||||
<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>Rubrics can be assigned to multiple lessons across the course.</span>
|
||||
<span>Las rúbricas pueden asignarse a múltiples lecciones.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="rubrics">
|
||||
<div className="p-8">
|
||||
}
|
||||
>
|
||||
<div className="p-0">
|
||||
{editingRubricId ? (
|
||||
<RubricEditor
|
||||
rubricId={editingRubricId}
|
||||
@@ -54,7 +38,5 @@ export default function RubricsPage() {
|
||||
)}
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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,30 +79,21 @@ 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>
|
||||
|
||||
<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">
|
||||
@@ -177,7 +166,6 @@ export default function LiveSessionsPage() {
|
||||
)}
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
|
||||
{/* Create Meeting Modal */}
|
||||
{isCreateModalOpen && (
|
||||
@@ -246,6 +234,6 @@ export default function LiveSessionsPage() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,12 +3,12 @@
|
||||
import React, { useEffect, useState, useCallback } from "react";
|
||||
import {
|
||||
Search, Image as ImageIcon, FileText, Film, File as FileIcon,
|
||||
Loader2, Upload, Trash2, ExternalLink, Filter, Plus, ChevronLeft
|
||||
Loader2, Upload, Trash2, ExternalLink, Filter, Plus
|
||||
} from "lucide-react";
|
||||
import { cmsApi, Asset, AssetFilters, getImageUrl } from "@/lib/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { useTranslation } from "@/context/I18nContext";
|
||||
import Link from "next/link";
|
||||
import PageLayout from "@/components/PageLayout";
|
||||
|
||||
export default function AssetLibraryPage() {
|
||||
const { t } = useTranslation();
|
||||
@@ -86,25 +86,13 @@ export default function AssetLibraryPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white pt-24 pb-12 px-6 transition-colors duration-300">
|
||||
<div className="max-w-7xl mx-auto space-y-8">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
||||
<div className="space-y-1">
|
||||
<Link href="/" className="flex items-center gap-2 text-gray-500 hover:text-blue-400 transition-colors text-xs uppercase font-bold tracking-widest mb-2">
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
Back to Dashboard
|
||||
</Link>
|
||||
<h1 className="text-4xl font-black tracking-tight flex items-center gap-4">
|
||||
Global <span className="gradient-text">Asset Library</span>
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-500 text-sm font-medium">Manage and reuse your organization's media files across all courses.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<label className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-bold transition-all cursor-pointer shadow-lg shadow-blue-600/20 active:scale-95">
|
||||
<Upload className="w-5 h-5" />
|
||||
Upload Files
|
||||
<PageLayout
|
||||
title="Biblioteca de Recursos"
|
||||
description="Gestiona y reutiliza archivos de medios en todos tus cursos."
|
||||
actions={
|
||||
<label 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 transition-all cursor-pointer shadow-md shadow-blue-600/20 active:scale-95">
|
||||
<Upload className="w-4 h-4" />
|
||||
Subir Archivos
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
@@ -113,10 +101,9 @@ export default function AssetLibraryPage() {
|
||||
disabled={isUploading}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upload Progress Bar */}
|
||||
}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{isUploading && (
|
||||
<div className="w-full bg-black/5 dark:bg-white/5 rounded-2xl border border-black/10 dark:border-white/10 p-4 animate-in fade-in slide-in-from-top-4">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
@@ -251,6 +238,6 @@ export default function AssetLibraryPage() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
+16
-21
@@ -8,6 +8,7 @@ import { useTranslation } from "@/context/I18nContext";
|
||||
import { Plus, BookOpen, Download, Upload, Sparkles, Wand2, Trash2 } from "lucide-react";
|
||||
import OrganizationSelector from "@/components/OrganizationSelector";
|
||||
import Modal from "@/components/Modal";
|
||||
import PageLayout from "@/components/PageLayout";
|
||||
|
||||
export default function StudioDashboard() {
|
||||
const { t } = useTranslation();
|
||||
@@ -158,38 +159,33 @@ export default function StudioDashboard() {
|
||||
};
|
||||
|
||||
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-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-center mb-12">
|
||||
<div>
|
||||
<h1 className="text-4xl font-black bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent tracking-tight">
|
||||
{t('nav.courses')}
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-2">{t('dashboard.title')}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="flex items-center gap-2 px-6 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 font-bold transition-all cursor-pointer active:scale-95 text-slate-900 dark:text-white">
|
||||
<Upload size={18} />
|
||||
<PageLayout
|
||||
title={t('nav.courses')}
|
||||
description={t('dashboard.title') || 'Panel de Control'}
|
||||
actions={
|
||||
<>
|
||||
<label className="flex items-center gap-2 px-5 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 font-bold text-sm transition-all cursor-pointer active:scale-95 text-slate-900 dark:text-white">
|
||||
<Upload size={16} />
|
||||
Importar
|
||||
<input type="file" accept=".json" onChange={handleImport} className="hidden" />
|
||||
</label>
|
||||
<button
|
||||
onClick={() => setIsAIModalOpen(true)}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 rounded-xl font-bold shadow-lg shadow-indigo-500/20 transition-all active:scale-95 group"
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white rounded-xl font-bold text-sm shadow-lg shadow-indigo-500/20 transition-all active:scale-95 group"
|
||||
>
|
||||
<Sparkles size={18} className="text-amber-300 group-hover:rotate-12 transition-transform" />
|
||||
<Sparkles size={16} className="text-amber-300 group-hover:rotate-12 transition-transform" />
|
||||
AI Wizard
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCreateCourse}
|
||||
className="flex items-center gap-2 px-6 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 font-bold transition-all active:scale-95 text-slate-900 dark:text-white"
|
||||
className="flex items-center gap-2 px-5 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 font-bold text-sm transition-all active:scale-95 text-slate-900 dark:text-white"
|
||||
>
|
||||
<Plus size={20} />
|
||||
<Plus size={18} />
|
||||
Manual
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
>
|
||||
|
||||
{loading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
@@ -238,7 +234,6 @@ export default function StudioDashboard() {
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* New Course Title Modal */}
|
||||
<Modal
|
||||
@@ -345,6 +340,6 @@ export default function StudioDashboard() {
|
||||
actionLabel="Create Course"
|
||||
onConfirm={(orgId) => createCourse(orgId)}
|
||||
/>
|
||||
</div >
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
Trash2
|
||||
} from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import PageLayout from "@/components/PageLayout";
|
||||
|
||||
export default function ProfilePage() {
|
||||
const { t, setLanguage: setContextLanguage } = useTranslation();
|
||||
@@ -89,12 +90,11 @@ export default function ProfilePage() {
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto py-12 px-6">
|
||||
<div className="mb-12">
|
||||
<h1 className="text-4xl font-black tracking-tight text-slate-900 dark:text-white mb-2 transition-colors">User Profile</h1>
|
||||
<p className="text-slate-500 dark:text-gray-400 transition-colors">Manage your identity and preferences across the platform.</p>
|
||||
</div>
|
||||
|
||||
<PageLayout
|
||||
title="Perfil de Usuario"
|
||||
description="Gestiona tu identidad y preferencias en la plataforma."
|
||||
maxWidth="narrow"
|
||||
>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Left Column: Profile Card */}
|
||||
<div className="lg:col-span-1 space-y-6">
|
||||
@@ -285,6 +285,6 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import BrandingSettings from "@/components/BrandingSettings";
|
||||
import PageLayout from "@/components/PageLayout";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect } from "react";
|
||||
@@ -16,16 +17,15 @@ export default function SettingsPage() {
|
||||
}, [user, loading, router]);
|
||||
|
||||
if (loading) return null;
|
||||
|
||||
if (!user || user.role !== "admin") return null;
|
||||
|
||||
return (
|
||||
<div className="pt-24 px-8 pb-12 min-h-screen bg-transparent transition-colors duration-300">
|
||||
<div className="max-w-4xl mx-auto mb-8">
|
||||
<h1 className="text-3xl font-black text-gray-900 dark:text-white tracking-tight">Organization Settings</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-2">Manage your white-label branding and platform identity.</p>
|
||||
</div>
|
||||
<PageLayout
|
||||
title="Configuración de Organización"
|
||||
description="Gestiona el branding y la identidad de tu plataforma."
|
||||
maxWidth="narrow"
|
||||
>
|
||||
<BrandingSettings />
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import {
|
||||
Layout, CheckCircle2, BarChart2, Settings, Folder,
|
||||
GraduationCap, Megaphone, Users, Award, Video,
|
||||
BookOpen, ShieldCheck, Radio, TrendingUp
|
||||
BookOpen, ShieldCheck, Radio, TrendingUp, ChevronLeft
|
||||
} from "lucide-react";
|
||||
import { cmsApi, Course } from "@/lib/api";
|
||||
|
||||
type TabKey =
|
||||
| "outline"
|
||||
@@ -27,6 +28,12 @@ type TabKey =
|
||||
interface CourseEditorLayoutProps {
|
||||
children: React.ReactNode;
|
||||
activeTab: TabKey;
|
||||
/** Título de la sección específica (ej: "Grading Policy"). Si se omite, usa el nombre del curso. */
|
||||
pageTitle?: string;
|
||||
/** Descripción de la sección específica. */
|
||||
pageDescription?: string;
|
||||
/** Acciones extra que van a la derecha del header (Preview, Publish, etc.) */
|
||||
pageActions?: React.ReactNode;
|
||||
}
|
||||
|
||||
interface Tab {
|
||||
@@ -43,8 +50,21 @@ interface Group {
|
||||
tabs: Tab[];
|
||||
}
|
||||
|
||||
export default function CourseEditorLayout({ children, activeTab }: CourseEditorLayoutProps) {
|
||||
const { id } = useParams() as { id: string };
|
||||
export default function CourseEditorLayout({
|
||||
children,
|
||||
activeTab,
|
||||
pageTitle,
|
||||
pageDescription,
|
||||
pageActions,
|
||||
}: CourseEditorLayoutProps) {
|
||||
const params = useParams() as { id: string };
|
||||
const id = params.id;
|
||||
const router = useRouter();
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
cmsApi.getCourse(id).then(setCourse).catch(console.error);
|
||||
}, [id]);
|
||||
|
||||
const groups: Group[] = [
|
||||
{
|
||||
@@ -101,18 +121,58 @@ export default function CourseEditorLayout({ children, activeTab }: CourseEditor
|
||||
const activeGroup = groups.find((g) => g.tabs.some((t) => t.key === activeTab));
|
||||
const subTabs = activeGroup?.tabs ?? [];
|
||||
|
||||
// Determine header text
|
||||
const displayTitle = pageTitle || "Course Editor";
|
||||
const displayDescription = pageDescription
|
||||
|| (course ? `${course.title}` : "Cargando curso...");
|
||||
|
||||
return (
|
||||
<div className="space-y-0">
|
||||
{/* PRIMARY GROUP NAV */}
|
||||
<div className="min-h-screen bg-transparent">
|
||||
<div className="max-w-7xl mx-auto px-6 pt-8 pb-12">
|
||||
|
||||
{/* ── PAGE HEADER ── */}
|
||||
<div className="flex items-center justify-between gap-4 mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => router.push("/")}
|
||||
className="p-1.5 hover:bg-black/5 dark:hover:bg-white/10 rounded-full transition-colors text-slate-500 hover:text-slate-800 dark:hover:text-gray-200"
|
||||
aria-label="Volver al inicio"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-black text-gray-900 dark:text-white tracking-tight leading-tight">
|
||||
{displayTitle}
|
||||
</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-gray-400 mt-0.5">
|
||||
{displayDescription}
|
||||
{course?.pacing_mode && (
|
||||
<span className={`ml-2 text-xs font-bold px-1.5 py-0.5 rounded ${course.pacing_mode === "instructor_led"
|
||||
? "bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-400"
|
||||
: "bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-400"
|
||||
}`}>
|
||||
{course.pacing_mode.replace("_", " ").toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{pageActions && (
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
{pageActions}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── TAB NAVIGATION ── */}
|
||||
<nav
|
||||
className="bg-white dark:bg-black/20 border border-black/8 dark:border-white/8 rounded-t-xl overflow-hidden"
|
||||
className="bg-white dark:bg-black/20 border border-black/8 dark:border-white/8 rounded-xl overflow-hidden mb-6"
|
||||
aria-label="Grupos del editor de cursos"
|
||||
>
|
||||
<ul className="flex border-b border-black/8 dark:border-white/8">
|
||||
{groups.map((group) => {
|
||||
const Icon = group.icon;
|
||||
const isGroupActive = group.key === activeGroup?.key;
|
||||
// When clicking a group, go to its first tab
|
||||
const groupHref = group.tabs[0].href;
|
||||
return (
|
||||
<li key={group.key} className="flex-shrink-0">
|
||||
@@ -133,7 +193,10 @@ export default function CourseEditorLayout({ children, activeTab }: CourseEditor
|
||||
|
||||
{/* SECONDARY SUB-TAB NAV */}
|
||||
{subTabs.length > 1 && (
|
||||
<ul className="flex bg-slate-50 dark:bg-white/[0.03] border-b border-black/5 dark:border-white/5 px-2 gap-1" aria-label="Sub-secciones">
|
||||
<ul
|
||||
className="flex bg-slate-50 dark:bg-white/[0.03] px-2 gap-1"
|
||||
aria-label="Sub-secciones"
|
||||
>
|
||||
{subTabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
const isActive = tab.key === activeTab;
|
||||
@@ -157,10 +220,11 @@ export default function CourseEditorLayout({ children, activeTab }: CourseEditor
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Content */}
|
||||
<div className="pt-6 space-y-6">
|
||||
{/* ── PAGE CONTENT ── */}
|
||||
<div className="space-y-6">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { ChevronLeft } from "lucide-react";
|
||||
|
||||
interface PageLayoutProps {
|
||||
/** Título principal de la página */
|
||||
title: string;
|
||||
/** Descripción/subtítulo opcional */
|
||||
description?: string;
|
||||
/** Acciones que van a la derecha del título (botones, etc.) */
|
||||
actions?: React.ReactNode;
|
||||
/** Componente de navegación secundaria (ej: pestañas del editor) */
|
||||
navigation?: React.ReactNode;
|
||||
/** Link de "volver atrás" — mostrar solo cuando sea necesario */
|
||||
backHref?: string;
|
||||
backLabel?: string;
|
||||
/** Contenido principal de la página */
|
||||
children: React.ReactNode;
|
||||
/** Ancho máximo del contenedor: 'default' (max-w-7xl) o 'narrow' (max-w-5xl) */
|
||||
maxWidth?: "default" | "narrow" | "wide";
|
||||
}
|
||||
|
||||
const MAX_WIDTH_CLASS = {
|
||||
default: "max-w-7xl",
|
||||
narrow: "max-w-5xl",
|
||||
wide: "max-w-screen-2xl",
|
||||
};
|
||||
|
||||
/**
|
||||
* Componente de layout estándar para todas las páginas del Studio.
|
||||
* Garantiza: mismo padding superior, misma jerarquía tipográfica, mismo max-width.
|
||||
*/
|
||||
export default function PageLayout({
|
||||
title,
|
||||
description,
|
||||
actions,
|
||||
navigation,
|
||||
backHref,
|
||||
backLabel = "Volver",
|
||||
children,
|
||||
maxWidth = "default",
|
||||
}: PageLayoutProps) {
|
||||
const containerClass = MAX_WIDTH_CLASS[maxWidth];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-transparent">
|
||||
<div className={`${containerClass} mx-auto px-6 pt-10 pb-12`}>
|
||||
|
||||
{/* Back link */}
|
||||
{backHref && (
|
||||
<Link
|
||||
href={backHref}
|
||||
className="inline-flex items-center gap-1.5 text-sm font-medium text-slate-500 hover:text-slate-800 dark:text-gray-400 dark:hover:text-gray-100 transition-colors mb-5"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
{backLabel}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{/* Page header */}
|
||||
<div className="flex items-start justify-between gap-4 mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-black text-gray-900 dark:text-white tracking-tight leading-tight">
|
||||
{title}
|
||||
</h1>
|
||||
{description && (
|
||||
<p className="mt-1.5 text-sm text-slate-500 dark:text-gray-400">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{actions && (
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
{actions}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Optional secondary navigation (tabs, breadcrumbs, etc.) */}
|
||||
{navigation && (
|
||||
<div className="mb-6">
|
||||
{navigation}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main content */}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user