feat: Add foundational UI components, pages, and theme management for the e-learning application.

This commit is contained in:
supalerk-ar66 2026-01-27 14:02:07 +07:00
parent baf389643b
commit 5fe454df95
12 changed files with 359 additions and 338 deletions

View file

@ -283,15 +283,15 @@ onMounted(() => {
</p>
<!-- Course Syllabus -->
<div class="bg-white rounded-3xl p-8 shadow-sm border border-slate-100">
<h3 class="text-xl font-bold mb-6 text-slate-900 dark:text-black flex items-center gap-2">
<div class="bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-sm border border-slate-100 dark:border-slate-700">
<h3 class="text-xl font-bold mb-6 text-slate-900 dark:text-white flex items-center gap-2">
<span class="w-1 h-6 bg-blue-500 rounded-full"></span>
{{ $t('course.courseContent') }}
</h3>
<div class="space-y-4">
<div v-for="(chapter, index) in selectedCourse.chapters" :key="chapter.id" class="border border-slate-200 rounded-xl overflow-hidden">
<div class="bg-slate-50 p-4 flex justify-between items-center cursor-pointer">
<div class="font-bold text-slate-800">
<div v-for="(chapter, index) in selectedCourse.chapters" :key="chapter.id" class="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
<div class="bg-slate-50 dark:bg-slate-700/50 p-4 flex justify-between items-center cursor-pointer">
<div class="font-bold text-slate-800 dark:text-slate-100">
<span class="opacity-50 mr-2">Chapter {{ Number(index) + 1 }}</span>
{{ getLocalizedText(chapter.title) }}
</div>
@ -300,13 +300,13 @@ onMounted(() => {
</span>
</div>
<!-- Lessons -->
<div class="divide-y divide-slate-100 bg-white">
<div v-for="(lesson, lIndex) in chapter.lessons" :key="lesson.id" class="p-4 flex justify-between items-center hover:bg-slate-50 transition-colors">
<div class="divide-y divide-slate-100 dark:divide-slate-700 bg-white dark:bg-slate-800">
<div v-for="(lesson, lIndex) in chapter.lessons" :key="lesson.id" class="p-4 flex justify-between items-center hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
<div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-[10px] font-bold text-slate-500">
<div class="w-6 h-6 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-[10px] font-bold text-slate-500 dark:text-slate-400">
{{ Number(lIndex) + 1 }}
</div>
<span class="text-slate-700 dark:text-black font-medium text-sm">{{ getLocalizedText(lesson.title) }}</span>
<span class="text-slate-700 dark:text-slate-200 font-medium text-sm">{{ getLocalizedText(lesson.title) }}</span>
</div>
<span class="text-xs text-slate-400">{{ lesson.duration_minutes || 0 }}:00</span>
</div>