feat: Add course discovery page with search, category filters, and detailed course view, along with a new useCategory composable.

Frontend-Learner/composables/useCategory.ts

@@ -0,0 +1,64 @@
+
+export interface Category {
+  id: number
+  name: {
+    th: string
+    en: string
+    [key: string]: string
+  }
+  slug: string
+  description: {
+    th: string
+    en: string
+    [key: string]: string
+  }
+  icon: string
+  sort_order: number
+  is_active: boolean
+  created_at: string
+  updated_at: string
+}
+
+export interface CategoryData {
+  total: number
+  categories: Category[]
+}
+
+export interface CategoryResponse {
+  code: number
+  message: string
+  data: CategoryData
+}
+
+export const useCategory = () => {
+  const config = useRuntimeConfig()
+  const API_BASE_URL = config.public.apiBase as string
+  const { token } = useAuth()
+
+  const fetchCategories = async () => {
+    try {
+      const response = await $fetch<CategoryResponse>(`${API_BASE_URL}/categories`, {
+        method: 'GET',
+        headers: token.value ? {
+          Authorization: `Bearer ${token.value}`
+        } : {}
+      })
+
+      return {
+        success: true,
+        data: response.data?.categories || [],
+        total: response.data?.total || 0
+      }
+    } catch (err: any) {
+      console.error('Fetch categories failed:', err)
+      return {
+        success: false,
+        error: err.data?.message || err.message || 'Error fetching categories'
+      }
+    }
+  }
+
+  return {
+    fetchCategories
+  }
+}