feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.
This commit is contained in:
supalerk-ar66
parent
aceeb80d9a
commit
ad11c6b7c5
44 changed files with 720 additions and 578 deletions
|
|
@ -1,8 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file index.vue
|
||||
* @description Page displaying all available courses in a public catalog format.
|
||||
* Matches the requested modern layout.
|
||||
* @description หน้าแสดงคอร์สเรียนทั้งหมดในรูปแบบแคตตาล็อกสาธารณะ
|
||||
* ดีไซน์ปรับให้ทันสมัยเพื่อดึงดูดผู้ใช้งานใหม่
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
|
|
@ -126,7 +126,7 @@ const viewMode = ref<'grid' | 'list'>('grid')
|
|||
<template>
|
||||
<div class="bg-[#F8F9FA] dark:bg-[#020617] min-h-screen pt-32 pb-20 px-4 md:px-8 transition-colors duration-300">
|
||||
<div class="max-w-[1240px] mx-auto">
|
||||
<!-- Catalog View -->
|
||||
<!-- มุมมองแคตตาล็อกแสดงคอร์ส (Catalog View) -->
|
||||
<div class="bg-white dark:bg-slate-900 rounded-[2rem] p-6 md:p-8 shadow-[0_2px_15px_rgb(0,0,0,0.02)] border border-slate-100 dark:border-slate-800 min-h-[500px] mb-12">
|
||||
|
||||
<!-- ส่วนหัวและการค้นหา -->
|
||||
|
|
@ -144,7 +144,7 @@ const viewMode = ref<'grid' | 'list'>('grid')
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters Category -->
|
||||
<!-- ตัวกรองหมวดหมู่ (Filters Category) -->
|
||||
<div class="flex flex-col xl:flex-row xl:items-center justify-between gap-4 mb-10 w-full relative">
|
||||
<div class="flex flex-wrap items-center gap-3 w-full xl:w-auto">
|
||||
<button
|
||||
|
|
@ -165,16 +165,16 @@ const viewMode = ref<'grid' | 'list'>('grid')
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loader -->
|
||||
<!-- ตัวแสดงการโหลด (Loader) -->
|
||||
<div v-if="isLoading" class="flex justify-center py-24">
|
||||
<q-spinner size="3rem" color="primary" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredCourses.length > 0">
|
||||
<!-- GRID VIEW -->
|
||||
<!-- มุมมองแบบกริด (GRID VIEW) -->
|
||||
<div v-if="viewMode === 'grid'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
<NuxtLink v-for="course in filteredCourses" :key="course.id" :to="`/course/${course.id}`" class="flex flex-col rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 overflow-hidden shadow-[0_2px_10px_rgb(0,0,0,0.03)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-all duration-300 group cursor-pointer">
|
||||
<!-- Thumbnail -->
|
||||
<!-- รูปหน้าปก (Thumbnail) -->
|
||||
<div class="relative w-full aspect-[16/10] bg-slate-100 dark:bg-slate-800 overflow-hidden">
|
||||
<img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
<div v-if="course.category_name" class="absolute top-3 left-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1 rounded-full shadow-sm" style="border-radius: 9999px; padding: 4px 12px;">
|
||||
|
|
@ -182,7 +182,7 @@ const viewMode = ref<'grid' | 'list'>('grid')
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<!-- เนื้อหาคอร์ส (Body) -->
|
||||
<div class="p-5 flex flex-col flex-1">
|
||||
<h3 class="font-bold text-slate-900 dark:text-white text-[15px] leading-snug line-clamp-2 mb-2 group-hover:text-blue-600 transition-colors">{{ getLocalizedText(course.title) }}</h3>
|
||||
|
||||
|
|
@ -200,7 +200,7 @@ const viewMode = ref<'grid' | 'list'>('grid')
|
|||
<div class="font-[900] text-[18px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
|
||||
{{ course.formatted_price }}
|
||||
</div>
|
||||
<!-- Eye icon circle button -->
|
||||
<!-- ปุ่มกดรูปตาเพื่อดูรายละเอียด (Eye icon circle button) -->
|
||||
<button class="w-[38px] h-[38px] rounded-full bg-slate-50 dark:bg-slate-800 text-slate-400 dark:text-slate-500 flex items-center justify-center hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-slate-700 border border-slate-100 dark:border-slate-700 transition-colors shadow-sm outline-none">
|
||||
<q-icon name="visibility" size="18px" />
|
||||
</button>
|
||||
|
|
@ -209,7 +209,7 @@ const viewMode = ref<'grid' | 'list'>('grid')
|
|||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- LIST VIEW -->
|
||||
<!-- มุมมองแบบรายการ (LIST VIEW) -->
|
||||
<div v-else class="flex flex-col gap-5">
|
||||
<NuxtLink v-for="course in filteredCourses" :key="course.id" :to="`/course/${course.id}`" class="flex flex-col sm:flex-row rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 p-3 sm:p-4 gap-4 sm:gap-6 shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all duration-300 group cursor-pointer">
|
||||
<div class="relative w-full sm:w-[260px] aspect-[16/10] sm:aspect-auto sm:h-[160px] rounded-[1rem] bg-slate-100 dark:bg-slate-800 overflow-hidden shrink-0">
|
||||
|
|
@ -243,7 +243,7 @@ const viewMode = ref<'grid' | 'list'>('grid')
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<!-- กรณีไม่พบข้อมูลคอร์ส (Empty State) -->
|
||||
<div v-else class="flex flex-col items-center justify-center py-20 bg-white dark:bg-slate-900/40 rounded-3xl border border-dashed border-slate-200 dark:border-slate-800">
|
||||
<q-icon name="search_off" size="64px" class="text-slate-300 dark:text-slate-600 mb-4" />
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ searchQuery ? 'ไม่พบคอร์สที่คุณค้นหา' : 'ไม่มีคอร์สในหมวดหมู่นี้' }}</h3>
|
||||
|
|
@ -258,7 +258,7 @@ const viewMode = ref<'grid' | 'list'>('grid')
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Disable default scrollbar for filter container */
|
||||
/* ปิดการแสดงแถบเลื่อนบนคอนเทนเนอร์ของตัวกรอง (Disable default scrollbar for filter container) */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue