feat: implement initial e-learning frontend UI, including course details, layout, navigation, and dashboard components.

This commit is contained in:
supalerk-ar66 2026-02-09 17:26:58 +07:00
parent a54251f11e
commit a8339ed0ab
8 changed files with 99 additions and 105 deletions

View file

@ -23,17 +23,17 @@ const getLocalizedText = (text: any) => {
</script>
<template>
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<div class="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden">
<q-expansion-item
expand-separator
:label="`หมวดหมู่ (${modelValue.length})`"
class="font-bold text-slate-900"
header-class="bg-white"
class="font-bold text-slate-900 dark:text-white"
header-class="bg-white dark:bg-slate-900"
text-color="slate-900"
:header-style="{ color: '#0f172a' }"
default-opened
>
<q-list class="bg-white border-t border-slate-200">
<q-list class="bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800">
<q-item
v-for="cat in (showAllCategories ? categories : categories.slice(0, 4))"
:key="cat.id"
@ -53,7 +53,7 @@ const getLocalizedText = (text: any) => {
/>
</q-item-section>
<q-item-section>
<q-item-label class="text-sm font-medium text-slate-900">{{ getLocalizedText(cat.name) }}</q-item-label>
<q-item-label class="text-sm font-medium text-slate-900 dark:text-slate-200">{{ getLocalizedText(cat.name) }}</q-item-label>
</q-item-section>
</q-item>
@ -63,7 +63,7 @@ const getLocalizedText = (text: any) => {
clickable
v-ripple
@click="showAllCategories = !showAllCategories"
class="text-blue-600 font-bold text-sm"
class="text-blue-600 dark:text-blue-400 font-bold text-sm"
>
<q-item-section>
<div class="flex items-center gap-1">