+
+ {/* ── MOBILE OVERLAY ── */}
+ {sidebarOpen && (
+
setSidebarOpen(false)}
+ aria-hidden="true"
+ />
+ )}
+
+ {/* ── SIDEBAR — slide-in drawer on mobile, always visible on md+ ── */}
+
+
+ {/* ── MAIN CONTENT ── */}
+
+
+ {/* Top Header */}
+
+
+ {/* Page Content — extra bottom padding on mobile for the bottom nav */}
+
+ {children}
+
+
+
+ {/* ── BOTTOM NAVIGATION BAR — only on mobile ── */}
+
+
+ );
+}
+
diff --git a/src/app/instructor/page.tsx b/src/app/instructor/page.tsx
new file mode 100644
index 0000000..0fdd13e
--- /dev/null
+++ b/src/app/instructor/page.tsx
@@ -0,0 +1,219 @@
+import React from "react";
+import {
+ FiTrendingUp,
+ FiUsers,
+ FiBookOpen,
+ FiDollarSign,
+ FiArrowUpRight,
+ FiArrowDownRight,
+ FiClock,
+ FiStar
+} from "react-icons/fi";
+
+const stats = [
+ {
+ name: "Ganancias Totales",
+ value: "$12,450.00",
+ change: "+12.5%",
+ trend: "up",
+ icon: FiDollarSign,
+ color: "from-emerald-500 to-emerald-600",
+ bgColor: "bg-emerald-50 dark:bg-emerald-500/10",
+ iconColor: "text-emerald-600 dark:text-emerald-500"
+ },
+ {
+ name: "Cursos Activos",
+ value: "8",
+ change: "+2",
+ trend: "up",
+ icon: FiBookOpen,
+ color: "from-indigo-500 to-indigo-600",
+ bgColor: "bg-indigo-50 dark:bg-indigo-500/10",
+ iconColor: "text-indigo-600 dark:text-indigo-500"
+ },
+ {
+ name: "Total Estudiantes",
+ value: "1,204",
+ change: "+18.2%",
+ trend: "up",
+ icon: FiUsers,
+ color: "from-blue-500 to-blue-600",
+ bgColor: "bg-blue-50 dark:bg-blue-500/10",
+ iconColor: "text-blue-600 dark:text-blue-500"
+ },
+ {
+ name: "Calificación Promedio",
+ value: "4.8",
+ change: "-0.1",
+ trend: "down",
+ icon: FiStar,
+ color: "from-amber-500 to-amber-600",
+ bgColor: "bg-amber-50 dark:bg-amber-500/10",
+ iconColor: "text-amber-600 dark:text-amber-500"
+ }
+];
+
+const recentCourses = [
+ {
+ id: 1,
+ title: "Desarrollo Web Fullstack con Next.js",
+ students: 342,
+ revenue: "$4,250",
+ status: "Activo",
+ rating: 4.9
+ },
+ {
+ id: 2,
+ title: "Masterclass de UI/UX Design",
+ students: 215,
+ revenue: "$2,890",
+ status: "Activo",
+ rating: 4.7
+ },
+ {
+ id: 3,
+ title: "Python para Data Science",
+ students: 189,
+ revenue: "$1,950",
+ status: "Borrador",
+ rating: 0
+ },
+];
+
+export default function InstructorDashboard() {
+ return (
+
+
+ {/* Welcome Banner */}
+
+
+
+
+
+
¡Hola de nuevo, Instructor! 👋
+
+ Tus cursos están teniendo un excelente rendimiento este mes. Has ganado $1,240.00 en los últimos 7 días.
+
+
+
+
+
+
+
+
+ {/* Stats Grid */}
+
+ {stats.map((stat, index) => (
+
+
+
+
+
+
+ {stat.trend === 'up' ? : }
+ {stat.change}
+
+
+
+
{stat.name}
+
{stat.value}
+
+
+ ))}
+
+
+ {/* Charts & Lists Section */}
+
+ {/* Recent Courses */}
+
+
+
Cursos de Mayor Rendimiento
+
+
+
+
+
+
+
+ | Nombre del Curso |
+ Estudiantes |
+ Ganancias |
+ Estado |
+
+
+
+ {recentCourses.map((course, idx) => (
+
+
+
+
+
+
+
+ {course.title}
+
+
+ {course.rating > 0 ? course.rating : 'N/A'}
+
+
+ |
+ {course.students} |
+ {course.revenue} |
+
+
+ {course.status}
+
+ |
+
+ ))}
+
+
+
+
+
+ {/* Quick Activity */}
+
+
Actividad Reciente
+
+
+ {[1, 2, 3, 4].map((i) => (
+
+ {i !== 4 &&
}
+
+
+
+
+
Nueva Venta Realizada
+
Alguien compró "Desarrollo Web Fullstack con Next.js"
+
+ Hace {i * 2} horas
+
+
+
+ ))}
+
+
+
+
+
+ );
+}
diff --git a/src/app/instructor/settings/page.tsx b/src/app/instructor/settings/page.tsx
new file mode 100644
index 0000000..3bf2652
--- /dev/null
+++ b/src/app/instructor/settings/page.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { FiUser, FiBell, FiLock, FiCreditCard } from "react-icons/fi";
+
+export default function SettingsPage() {
+ return (
+
+
+
Ajustes
+
Configura tu perfil de instructor y preferencias.
+
+
+
+
+
+
+
+
+
+
+
+
Información del Perfil
+
+
+
+ IN
+
+
+
+
Recomendado: 500x500px, JPG o PNG.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/buyer/CourseCard.tsx b/src/components/buyer/CourseCard.tsx
index 98c0b4c..9296ee5 100644
--- a/src/components/buyer/CourseCard.tsx
+++ b/src/components/buyer/CourseCard.tsx
@@ -45,7 +45,7 @@ export const CourseCard: React.FC
= ({ course }) => {
-
+
{course.badge && (
@@ -123,11 +123,11 @@ export const CourseCard: React.FC = ({ course }) => {
- ({course.reviewsCount.toLocaleString()})
+ ({course.reviewsCount.toString()})
•
- {course.studentsCount.toLocaleString()} alumnos
+ {course.studentsCount.toString()} alumnos