163 lines
6.2 KiB
Vue
163 lines
6.2 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file CourseCard.vue
|
|
* @description Standardized Course Card Component.
|
|
* Usage: <CourseCard :id="1" title="..." ... />
|
|
*/
|
|
|
|
interface CourseCardProps {
|
|
id?: number
|
|
title: string | { th: string; en: string }
|
|
category?: string
|
|
level?: string
|
|
price?: string
|
|
description?: string | { th: string; en: string }
|
|
rating?: string
|
|
lessons?: string
|
|
duration?: string
|
|
progress?: number
|
|
completed?: boolean
|
|
image?: string
|
|
loading?: boolean
|
|
|
|
// Action Flags
|
|
showViewDetails?: boolean
|
|
showContinue?: boolean
|
|
showCertificate?: boolean
|
|
showStudyAgain?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<CourseCardProps>(), {
|
|
showViewDetails: true,
|
|
category: 'General',
|
|
image: ''
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
viewDetails: []
|
|
continue: []
|
|
viewCertificate: []
|
|
}>()
|
|
|
|
const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
|
|
if (!text) return ''
|
|
if (typeof text === 'string') return text
|
|
return text.th || text.en || ''
|
|
}
|
|
|
|
const displayTitle = computed(() => getLocalizedText(props.title))
|
|
const displayDescription = computed(() => getLocalizedText(props.description))
|
|
</script>
|
|
|
|
<template>
|
|
<div class="group relative flex flex-col !bg-white dark:!bg-[#0f172a] rounded-3xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-xl dark:shadow-none hover:-translate-y-1 transition-all duration-300 h-full">
|
|
|
|
<!-- Thumbnail Section -->
|
|
<div class="relative w-full aspect-video overflow-hidden">
|
|
<img
|
|
v-if="image"
|
|
:src="image"
|
|
:alt="displayTitle"
|
|
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
|
>
|
|
<div v-else class="w-full h-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center">
|
|
<q-icon name="image" size="48px" class="text-slate-300 dark:text-slate-600" />
|
|
</div>
|
|
|
|
<!-- Overlays -->
|
|
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
|
|
|
|
|
|
|
<!-- Completed Badge -->
|
|
<div v-if="completed" class="absolute inset-0 bg-emerald-900/40 backdrop-blur-[2px] flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
<span class="bg-emerald-500 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform scale-75 group-hover:scale-100 transition-transform">
|
|
<q-icon name="check" size="24px" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Section -->
|
|
<div class="p-6 flex flex-col flex-grow">
|
|
<!-- Meta Info (Lessons/Duration) -->
|
|
<div class="flex items-center gap-3 text-xs font-bold text-slate-500 dark:text-slate-400 mb-3 uppercase tracking-wider">
|
|
<span v-if="lessons" class="flex items-center gap-1">
|
|
<q-icon name="menu_book" size="14px" /> {{ lessons }} {{ $t('course.lessonsUnit') }}
|
|
</span>
|
|
<span v-if="duration" class="flex items-center gap-1">
|
|
<q-icon name="schedule" size="14px" /> {{ duration }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Title -->
|
|
<h3 class="text-lg font-black text-slate-900 dark:text-white mb-2 line-clamp-2 leading-tight group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
|
|
{{ displayTitle }}
|
|
</h3>
|
|
|
|
<!-- Description -->
|
|
<p v-if="displayDescription" class="text-sm text-slate-500 dark:text-slate-400 line-clamp-2 mb-6">
|
|
{{ displayDescription }}
|
|
</p>
|
|
|
|
<div class="mt-auto pt-4">
|
|
<!-- Progress Bar -->
|
|
<div v-if="progress !== undefined && !completed" class="mb-4">
|
|
<div class="flex justify-between text-[10px] font-bold uppercase mb-1">
|
|
<span class="text-slate-500 dark:text-slate-400">{{ $t('course.progress') }}</span>
|
|
<span class="text-blue-600 dark:text-blue-400">{{ progress }}%</span>
|
|
</div>
|
|
<div class="h-1.5 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
|
|
<div class="h-full bg-blue-600 rounded-full transition-all duration-500" :style="{ width: `${progress}%` }"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<!-- View Details (Secondary Action) -->
|
|
<q-btn
|
|
v-if="showViewDetails && !completed && !progress"
|
|
flat
|
|
rounded
|
|
class="w-full font-bold !text-blue-600 !bg-blue-50 hover:!bg-blue-100 dark:!bg-blue-900/40 dark:!text-blue-300 dark:hover:!bg-blue-900/60"
|
|
:label="$t('menu.viewDetails')"
|
|
:to="`/course/${id}`"
|
|
/>
|
|
|
|
<!-- Continue Learning (Primary Action) -->
|
|
<q-btn
|
|
v-if="showContinue || (progress && !completed) || (progress === 0 && !completed)"
|
|
unelevated
|
|
rounded
|
|
class="w-full font-bold !bg-blue-600 !text-white hover:!bg-blue-700 shadow-md shadow-blue-500/20 transition-all hover:scale-[1.02]"
|
|
:label="(!progress || progress === 0) ? $t('course.startLearning') : $t('course.continueLearning')"
|
|
:to="`/classroom/learning?course_id=${id}`"
|
|
/>
|
|
|
|
<div v-if="completed" class="space-y-2">
|
|
<!-- Study Again -->
|
|
<q-btn
|
|
v-if="showStudyAgain"
|
|
unelevated
|
|
rounded
|
|
class="w-full font-bold !bg-blue-50 !text-blue-700 hover:!bg-blue-100 dark:!bg-blue-900/20 dark:!text-blue-400 dark:hover:!bg-blue-900/30 border border-blue-100 dark:border-blue-800/50"
|
|
:label="$t('course.studyAgain')"
|
|
:to="`/classroom/learning?course_id=${id}`"
|
|
/>
|
|
|
|
<!-- Download Certificate -->
|
|
<q-btn
|
|
v-if="showCertificate"
|
|
unelevated
|
|
rounded
|
|
class="w-full font-bold !bg-emerald-50 !text-emerald-700 hover:!bg-emerald-100 dark:!bg-emerald-900/20 dark:!text-emerald-400 dark:hover:!bg-emerald-900/30 border border-emerald-100 dark:border-emerald-800/50"
|
|
:label="$t('course.downloadCertificate')"
|
|
@click="emit('viewCertificate')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Scoped overrides if needed */
|
|
</style>
|