40 lines
2.9 KiB
TypeScript
40 lines
2.9 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { BookOpenCheck, Loader2, PlayCircle } from 'lucide-react';
|
|
import { Course } from '../types';
|
|
import { getMyLearningCourses } from '../services/db';
|
|
|
|
export const MyLearning: React.FC<{ onPlay: (course: Course) => void }> = ({ onPlay }) => {
|
|
const [courses, setCourses] = useState<Course[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
getMyLearningCourses().then(setCourses).catch(() => setCourses([])).finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
return (
|
|
<main className="min-h-screen max-w-[1440px] mx-auto pt-28 pb-20 px-6 md:px-12">
|
|
<div className="mb-10">
|
|
<div className="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-orange-400 mb-3"><BookOpenCheck className="w-4 h-4" /> Minha área</div>
|
|
<h1 className="text-3xl md:text-4xl font-bold text-white">Continue aprendendo</h1>
|
|
<p className="mt-2 text-gray-400">Retome suas aulas exatamente de onde parou.</p>
|
|
</div>
|
|
{loading ? <div className="h-64 flex justify-center items-center"><Loader2 className="w-8 h-8 animate-spin text-orange-400" /></div> : courses.length === 0 ? (
|
|
<div className="rounded-2xl border border-white/10 bg-zinc-950/80 py-16 px-6 text-center">
|
|
<BookOpenCheck className="w-10 h-10 text-orange-400 mx-auto mb-4" />
|
|
<h2 className="font-bold text-white text-lg">Você ainda não iniciou nenhum curso</h2>
|
|
<p className="mt-2 text-sm text-gray-400">Escolha uma aula na página de cursos para começar.</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
|
|
{courses.map((course) => (
|
|
<button key={course.id} onClick={() => onPlay(course)} className="group overflow-hidden rounded-2xl border border-white/10 bg-zinc-950/80 text-left hover:border-orange-500/50 transition-colors">
|
|
<div className="aspect-video relative bg-zinc-900"><img src={course.thumbnail} alt="" className="h-full w-full object-cover opacity-75 group-hover:opacity-100 transition-opacity" /><div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" /><span className="absolute left-4 bottom-4 inline-flex items-center gap-2 rounded-full bg-orange-500 px-3 py-2 text-xs font-bold text-white"><PlayCircle className="w-4 h-4" /> Continuar</span></div>
|
|
<div className="p-5"><p className="text-xs text-orange-400 font-semibold uppercase tracking-wider">{course.category}</p><h2 className="mt-2 font-bold text-white">{course.title}</h2><div className="mt-4 h-1.5 overflow-hidden rounded-full bg-white/10"><div className="h-full rounded-full bg-orange-500" style={{ width: `${course.progress || 0}%` }} /></div><p className="mt-2 text-xs text-gray-400">{course.progress || 0}% concluído</p></div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</main>
|
|
);
|
|
};
|