feat: Add foundational UI components, pages, and theme management for the e-learning application.
This commit is contained in:
parent
baf389643b
commit
5fe454df95
12 changed files with 359 additions and 338 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue