chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: Initialize project with core Nuxt configuration, Quasar layouts, global Tailwind CSS, and essential components.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-19 13:12:14 +07:00
parent 1b9119e606
commit 76b64a30ae
10 changed files with 311 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

55
Frontend-Learner/pages/dashboard/index.vue
View file

@ -91,17 +91,7 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
<template>
<div class="bg-[#F8F9FA] min-h-screen font-inter pb-20">
<!-- 1. Greeting Section -->
<section class="bg-white pt-8 pb-10 px-4 md:px-12">
<div class="max-w-7xl mx-auto">
<h1 class="text-3xl md:text-4xl font-bold text-[#2D2D2D] mb-4 flex items-center gap-3">
สวัสดี {{ currentUser?.firstName || 'User' }} <span class="text-3xl">😊</span>
</h1>
<p class="text-gray-500 text-base md:text-lg font-light max-w-3xl">
เข้าถึง +490 หลักสูตรออนไลน์สำหรับสมาชิกรายปี เพื่อบรรลุเป้าหมายด้านอาชีพและพัฒนาการเรียนรู้สำหรับคุณ ✨
</p>
</div>
</section>
<div class="max-w-7xl mx-auto px-4 md:px-12 space-y-16 mt-10">
@ -109,8 +99,8 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
<section v-if="enrolledCourses.length > 0">
<div class="flex justify-between items-end mb-6">
<h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D]">เรียนต่อกับคอร์สของคุณ</h2>
<NuxtLink to="/dashboard/my-courses" class="text-purple-600 hover:text-purple-700 font-medium text-sm flex items-center gap-1">
การเรียนของฉัน <q-icon name="arrow_forward" size="16px" />
<NuxtLink to="/dashboard/my-courses" class="text-blue-600 hover:text-blue-700 font-medium text-sm flex items-center gap-1">
คอร์สเรียนของฉัน <q-icon name="arrow_forward" size="16px" />
</NuxtLink>
</div>
@ -120,20 +110,19 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
<img :src="heroCourse.thumbnail_url" class="w-full h-full object-cover brightness-75 group-hover:brightness-90 transition-all duration-500" />
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent p-8 flex flex-col justify-end">
<div class="bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded w-fit mb-3">COURSE</div>
<div class="bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded w-fit mb-3">COURSE</div>
<h3 class="text-white text-2xl font-bold mb-4 line-clamp-2 leading-snug">{{ getLocalizedText(heroCourse.title) }}</h3>
<!-- Progress -->
<div class="w-full">
<div class="flex justify-between text-gray-300 text-xs mb-2">
<span>{{ heroCourse.completed_lessons }}/{{ heroCourse.total_lessons }} บทเรียน</span>
<div class="flex justify-end text-gray-300 text-xs mb-2">
<span>{{ heroCourse.progress }}%</span>
</div>
<div class="h-1.5 w-full bg-white/20 rounded-full overflow-hidden">
<div class="h-full bg-purple-500 rounded-full" :style="{ width: `${heroCourse.progress}%` }"></div>
<div class="h-full bg-blue-500 rounded-full" :style="{ width: `${heroCourse.progress}%` }"></div>
</div>
<div class="mt-4 flex justify-end">
<span class="text-white font-bold text-sm hover:underline">เรียนต่อ</span>
<span class="text-white font-bold text-sm hover:underline">{{ heroCourse.progress === 100 ? 'เรียนอีกครั้ง' : 'เรียนต่อ' }}</span>
</div>
</div>
</div>
@ -150,11 +139,10 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
<div class="mt-auto">
<div class="h-1.5 w-full bg-gray-100 rounded-full overflow-hidden mb-2">
<div class="h-full bg-purple-600 rounded-full" :style="{ width: `${course.progress}%` }"></div>
<div class="h-full bg-blue-600 rounded-full" :style="{ width: `${course.progress}%` }"></div>
</div>
<div class="flex justify-between items-center text-xs">
<span class="text-gray-500">{{ course.completed_lessons }}/{{ course.total_lessons }} บทเรียน</span>
<span class="text-purple-600 font-bold cursor-pointer hover:underline" @click="navigateTo(`/classroom/learning?course_id=${course.id}`)">เรียนต่อ</span>
<div class="flex justify-end items-center text-xs">
<span class="text-blue-600 font-bold cursor-pointer hover:underline" @click="navigateTo(`/classroom/learning?course_id=${course.id}`)">{{ course.progress === 100 ? 'เรียนอีกครั้ง' : 'เรียนต่อ' }}</span>
</div>
</div>
</div>
@ -174,7 +162,8 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
<p class="text-gray-500 text-sm">คุณสามารถเลือกเรียนคอร์สเรียนที่คุณเป็นเจ้าของ</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Content when courses exist -->
<div v-if="libraryCourses.length > 0" class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Course Cards -->
<CourseCard
v-for="course in libraryCourses"
@ -191,13 +180,31 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
flat
rounded
no-caps
class="text-purple-600 hover:bg-purple-50 px-6 py-2 font-bold group-hover:scale-105 transition-transform"
class="text-blue-600 hover:bg-blue-50 px-6 py-2 font-bold group-hover:scale-105 transition-transform"
to="/dashboard/my-courses"
>
ดูทั้งหมด <q-icon name="arrow_forward" size="18px" class="ml-2" />
</q-btn>
</div>
</div>
<!-- Empty State when no courses -->
<div v-else class="bg-white rounded-3xl border border-dashed border-gray-200 p-12 flex flex-col items-center justify-center text-center min-h-[300px]">
<div class="bg-blue-50 p-6 rounded-full mb-6">
<q-icon name="school" size="48px" class="text-blue-200" />
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">ยังไม่มีคอร์สเรียนในคลัง</h3>
<p class="text-gray-500 mb-8 max-w-md">เริ่มเรียนรู้สิ่งใหม่ๆ วันนี้ เลือกดูคอร์สเรียนที่น่าสนใจเพื่อพัฒนาทักษะของคุณ</p>
<q-btn
unelevated
rounded
no-caps
class="bg-blue-600 text-white px-8 py-3 font-bold hover:bg-blue-700 shadow-lg shadow-blue-500/20 transition-all hover:scale-105"
to="/browse/discovery"
>
ดูคอร์สเรียนทั้งหมด
</q-btn>
</div>
</section>