elearning/Frontend-Learner/pages/dashboard/announcements.vue

<script setup lang="ts">
/**
 * @file announcements.vue
 * @description Page displaying system and course-related announcements.
 * Uses the default layout and requires authentication.
 */

// Define page metadata: usage of 'default' layout and 'auth' middleware
definePageMeta({
  layout: 'default',
  middleware: 'auth'
})

// Set page title for SEO
useHead({
  title: 'ประกาศ - e-Learning'
})
</script>

<template>
  <div class="page-container">
    <!-- Page Header -->
    <h1 class="text-3xl font-black mb-10 text-slate-900 dark:text-white">ประกาศ</h1>

    <!-- 
      Main Layout: 12-column Grid 
      - Left Column (span-8): Main announcements content
      - Right Column (span-4): Categories/Filter sidebar
    -->
    <div class="grid-12">
      
      <!-- ==========================================
           MAIN CONTENT AREA (Left)
      ========================================== -->
      <div class="col-span-8">
        
        <!-- Feature 1: Critical System Announcement -->
        <div class="card mb-6">
          <div class="flex items-center gap-2 mb-2">
            <span class="status-pill status-warning">สำคัญ</span>
            <span class="text-sm text-slate-600 dark:text-slate-400">24 ธ.ค. 2024</span>
          </div>
          <h2 class="text-xl font-bold mb-4 text-slate-900 dark:text-white">แจ้งปิดปรับปรุงระบบ</h2>
          <p class="mb-4">เราจะทำการปิดปรับปรุงระบบในวันที่ 25 ธ.ค. เวลา 02:00 - 04:00 น. ขออภัยในความไม่สะดวก</p>
          <!-- Attachment Block -->
          <div class="flex items-center gap-2 p-3 rounded" style="background: var(--neutral-50); border: 1px solid var(--border-color); width: fit-content;">
            <span>📎</span> <span class="text-sm font-bold">ตารางการปิดปรับปรุง.pdf</span>
          </div>
        </div>

        <!-- Announcement: UX/UI Course Update -->
        <div class="card mb-4" style="border-left: 4px solid var(--primary);">
          <div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
            <div>
              <span class="status-pill status-neutral mb-2">เบื้องต้นการออกแบบ UX/UI</span>
              <h3 class="font-bold text-slate-900 dark:text-white">เริ่มเปิดหลักสูตรเดือนมกราคมแล้ว!</h3>
            </div>
            <span class="text-sm text-slate-600 dark:text-slate-400">23 ธ.ค. 2024</span>
          </div>
          <p class="text-slate-700 dark:text-slate-300 mb-2">นักเรียนที่ลงทะเบียนไว้ สามารถเริ่มเข้าเรียนบทนำได้ตั้งแต่วันนี้เป็นต้นไป...</p>
          <NuxtLink to="/browse/discovery" class="text-sm" style="color: var(--primary);">ดูรายละเอียดคอร์ส</NuxtLink>
        </div>

        <!-- Announcement: Accessibility (WCAG) Material -->
        <div class="card mb-4" style="border-left: 4px solid var(--success);">
          <div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
            <div>
              <span class="status-pill status-neutral mb-2">การเข้าถึงเว็บ (WCAG)</span>
              <h3 class="font-bold text-slate-900 dark:text-white">ดาวน์โหลดเอกสารประกอบการเรียนได้แล้ว</h3>
            </div>
            <span class="text-sm text-slate-600 dark:text-slate-400">22 ธ.ค. 2024</span>
          </div>
          <p class="text-slate-700 dark:text-slate-300 mb-2">เราได้เพิ่มไฟล์ PDF สรุปเกณฑ์ WCAG 2.2 ในส่วนของเอกสารประกอบการเรียนแล้ว...</p>
          <!-- Small Attachment -->
          <div class="flex items-center gap-2 p-2 rounded mt-2" style="background: var(--neutral-50); border: 1px dotted var(--border-color); width: fit-content;">
            <span>📄</span> <span class="text-xs">WCAG_2.2_Summary.pdf</span>
          </div>
        </div>

        <!-- Announcement: React Course Update -->
        <div class="card mb-4" style="border-left: 4px solid var(--warning);">
          <div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
            <div>
              <span class="status-pill status-neutral mb-2">รูปแบบ React ขั้นสูง</span>
              <h3 class="font-bold text-slate-900 dark:text-white">อัปเดตบทเรียนใหม่: React Server Components</h3>
            </div>
            <span class="text-sm text-slate-600 dark:text-slate-400">21 ธ.ค. 2024</span>
          </div>
          <p class="text-slate-700 dark:text-slate-300 mb-2">เพิ่มเนื้อหาการใช้งาน RSC และการจัดการ State ใน Next.js 14...</p>
          <NuxtLink to="/classroom/learning" class="btn btn-secondary text-sm" style="width: fit-content;">เข้าสู่บทเรียน</NuxtLink>
        </div>

        <!-- Announcement: General New Course -->
        <div class="card mb-4">
          <div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
            <h3 class="font-bold text-slate-900 dark:text-white">คอร์สใหม่: Advanced Python</h3>
            <span class="text-sm text-slate-600 dark:text-slate-400">20 ธ.ค. 2024</span>
          </div>
          <p class="text-slate-700 dark:text-slate-300 mb-2">พบกับคอร์สใหม่ล่าสุด เรียนรู้โครงสร้างข้อมูล Python...</p>
          <a href="#" class="text-sm" style="color: var(--primary);">อ่านเพิ่มเติม</a>
        </div>

        <!-- Announcement: Platform Update -->
        <div class="card mb-4">
          <div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
            <h3 class="font-bold text-slate-900 dark:text-white">ยินดีต้อนรับสู่ดีไซน์ใหม่!</h3>
            <span class="text-sm text-slate-600 dark:text-slate-400">15 ธ.ค. 2024</span>
          </div>
          <p class="text-slate-700 dark:text-slate-300 mb-2">เราปรับโฉมใหม่ไฉไลกว่าเดิม เพื่อการใช้งานที่ดียิ่งขึ้น...</p>
          <a href="#" class="text-sm" style="color: var(--primary);">อ่านเพิ่มเติม</a>
        </div>
      </div>

      <!-- ==========================================
           SIDEBAR (Right)
           Category Filters
      ========================================== -->
      <div class="col-span-4">
        <div class="card">
          <h3 class="font-bold mb-4 text-slate-900 dark:text-white">หมวดหมู่</h3>
          <ul class="flex flex-col gap-2">
            <!-- Filter Option: All -->
            <li class="flex justify-between items-center p-2 rounded cursor-pointer" style="background: var(--neutral-50);">
              <span>ทั้งหมด</span>
              <span class="text-muted">15</span>
            </li>
            <!-- Filter Option: System Updates -->
            <li class="flex justify-between items-center p-2 rounded cursor-pointer">
              <span>อัปเดตระบบ</span>
              <span class="text-muted">3</span>
            </li>
            <!-- Filter Option: Course News -->
            <li class="flex justify-between items-center p-2 rounded cursor-pointer">
              <span>ข่าวสารคอร์ส</span>
              <span class="text-muted">11</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>