feat: Introduce dashboard, my courses, and browse pages for learner course discovery and management.

This commit is contained in:
supalerk-ar66 2026-01-28 16:59:44 +07:00
parent a24f8c4982
commit 240cafb571
4 changed files with 18 additions and 15 deletions

View file

@ -63,10 +63,12 @@ const displayDescription = computed(() => getLocalizedText(props.description))
<!-- Thumbnail -->
<div class="thumbnail-wrapper relative h-44 overflow-hidden rounded-t-[1.5rem]">
<img
:src="image || 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=400&q=80'"
v-if="image"
:src="image"
:alt="displayTitle"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
>
<div v-else class="w-full h-full bg-gradient-to-br from-slate-200 to-slate-300 dark:from-slate-700 dark:to-slate-800 group-hover:scale-110 transition-transform duration-700"></div>
<div v-if="completed" class="absolute inset-0 bg-emerald-600/60 backdrop-blur-[2px] flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white bg-emerald-500 w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform scale-0 group-hover:scale-100 transition-transform duration-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="20 20 24 24" stroke="currentColor">
@ -100,7 +102,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
<!-- Rating & Lessons -->
<div v-if="rating || lessons" class="flex items-center gap-4 text-[11px] font-bold mb-6 uppercase tracking-wider text-slate-500 dark:text-slate-400">
<span v-if="rating" class="flex items-center gap-1"><span class="text-amber-400 text-sm"></span> {{ rating }}</span>
<span v-if="lessons" class="flex items-center gap-1"><span class="text-blue-400">📚</span> {{ lessons }} {{ $t('course.lessonsUnit') }}</span>
<span v-if="lessons" class="flex items-center gap-1">{{ lessons }} {{ $t('course.lessonsUnit') }}</span>
</div>
<!-- Progress Bar -->