feat: scaffold Nuxt 3 application with initial core pages, components, and comprehensive 'My Courses' view.

This commit is contained in:
supalerk-ar66 2026-01-26 10:06:22 +07:00
parent af7890cc8f
commit 0c0121eac7
7 changed files with 308 additions and 238 deletions

View file

@ -122,21 +122,45 @@ const displayDescription = computed(() => getLocalizedText(props.description))
</div>
<!-- Actions -->
<button v-if="showViewDetails" class="btn-premium-primary w-full mt-auto dark:!text-white" @click="emit('viewDetails')">
{{ $t('menu.viewDetails') }}
</button>
<q-btn
v-if="showViewDetails"
unelevated
rounded
class="w-full mt-auto font-black"
style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white;"
:label="$t('menu.viewDetails')"
@click="emit('viewDetails')"
/>
<NuxtLink v-if="showContinue" :to="`/classroom/learning?course_id=${id}`" class="btn-premium-primary w-full mt-auto shadow-lg shadow-blue-600/20">
{{ $t('course.continueLearning') }}
</NuxtLink>
<q-btn
v-if="showContinue"
:to="`/classroom/learning?course_id=${id}`"
unelevated
rounded
class="w-full mt-auto font-black shadow-lg shadow-blue-600/20"
style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white;"
:label="$t('course.continueLearning')"
/>
<div v-if="completed && (showCertificate || showStudyAgain)" class="flex flex-col gap-2 mt-auto">
<NuxtLink v-if="showStudyAgain" :to="`/classroom/learning?course_id=${id}`" class="btn-premium-primary w-full dark:!text-white">
{{ $t('course.studyAgain') }}
</NuxtLink>
<button v-if="showCertificate" class="btn-premium-success w-full shadow-lg shadow-emerald-600/20" @click="emit('viewCertificate')">
{{ $t('course.downloadCertificate') }}
</button>
<q-btn
v-if="showStudyAgain"
:to="`/classroom/learning?course_id=${id}`"
unelevated
rounded
class="w-full font-black"
style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white;"
:label="$t('course.studyAgain')"
/>
<q-btn
v-if="showCertificate"
unelevated
rounded
class="w-full font-black shadow-lg shadow-emerald-600/20"
style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white;"
:label="$t('course.downloadCertificate')"
@click="emit('viewCertificate')"
/>
</div>
</div>
</div>