elearning/Frontend-Learner/error.vue

<script setup lang="ts">
const props = defineProps({
  error: {
    type: Object,
    default: null
  }
})

useHead({
  title: `${props.error?.statusCode || 'Error'} - e-Learning`
})

const handleError = () => {
  clearError({ redirect: '/home' })
}
</script>

<template>
  <div class="error-wrapper">
    <!-- 404 Not Found -->
    <div v-if="error?.statusCode === 404" class="error-content fade-in">
      <div class="illustration-box">
        <span class="emoji-large">🔭</span>
        <div class="glow-effect primary"/>
      </div>
      
      <h1 class="error-code text-primary">404</h1>
      <h2 class="error-title">ไม่พบหน้าที่คุณต้องการ</h2>
      <p class="error-desc">
        ขออภัย เราไม่พบหน้าที่คุณค้นหาในระบบ <br>
        อาจเป็นเพราะลิงก์ผิดพลาด ลบไปแล้ว หรือคุณไม่มีสิทธิ์เข้าถึง
      </p>
      
      <div class="actions">
        <button class="btn btn-primary" @click="handleError">
          กลับสู่หน้าหลัก
        </button>
      </div>
    </div>

    <!-- 403 Forbidden / Other Errors -->
    <div v-else class="error-content fade-in">
      <div class="illustration-box">
        <span class="emoji-large">🔐</span>
        <div class="glow-effect error"/>
      </div>

      <h1 class="error-code text-error">{{ error?.statusCode || 'Oops' }}</h1>
      <h2 class="error-title">
        {{ error?.statusCode === 403 ? 'ไม่มีสิทธิ์เข้าถึง' : 'เกิดข้อผิดพลาดบางอย่าง' }}
      </h2>
      <p class="error-desc">
        {{ error?.message || 'ขออภัย ระบบขัดข้องชั่วคราว กรุณาลองใหม่อีกครั้ง' }}
      </p>
      
      <div class="actions">
        <NuxtLink to="/auth/login" class="btn btn-primary">
          เข้าสู่ระบบ
        </NuxtLink>
        <button class="btn btn-outline" style="border-radius: 99px;" @click="handleError">
          กลับสู่หน้าหลัก
        </button>
      </div>
    </div>
  </div>
</template>

<style>
/* Nuxt Error Page styles should not be scoped usually to affect the whole page */
:root {
  --primary: #3b82f6;
  --error: #ef4444;
  --bg-body: #0f172a;
  --text-main: #f1f5f9;
  --text-secondary: #cbd5e1;
  --neutral-100: #1e293b;
  --border-color: #334155;
}

.error-wrapper {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-body);
  color: var(--text-main);
  padding: 24px;
  font-family: 'Inter', 'Prompt', 'Sarabun', sans-serif;
}

.error-content {
  max-width: 600px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.illustration-box {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.emoji-large {
  font-size: 80px;
  position: relative;
  z-index: 10;
}

.glow-effect {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.2;
}
.glow-effect.primary {
  background-color: var(--primary);
}
.glow-effect.error {
  background-color: var(--error);
}

.error-code {
  font-size: 80px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -2px;
}
.text-primary { color: var(--primary); }
.text-error { color: var(--error); }

.error-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.error-desc {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 480px;
}

.actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.btn {
  height: 48px;
  padding: 0 32px;
  font-size: 16px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: none;
  font-weight: 600;
  transition: opacity 0.2s;
}
.btn:hover { opacity: 0.9; }

.btn-primary {
  background-color: var(--primary);
  color: white;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.fade-in {
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); scale: 0.95; }
  to { opacity: 1; transform: translateY(0); scale: 1; }
}
</style>