import { Head, Link } from '@inertiajs/react'; import { BookOpen, BookmarkX, PlayCircle, FileText, Bookmark, ChevronRight, GraduationCap } from 'lucide-react'; import AppLayout from '@/layouts/app-layout'; import type { BreadcrumbItem } from '@/types'; type LessonBookmark = { id: number; lesson: { id: number; title: string; type: string; chapter: { title: string; course: { id: number; title: string; slug: string }; }; }; }; type CourseBookmark = { id: number; course: { id: number; title: string; slug: string; thumbnail: string | null; level: string; price_type: 'free' | 'paid'; price: number | null; }; }; type Props = { lessonBookmarks: LessonBookmark[]; courseBookmarks: CourseBookmark[]; }; const breadcrumbs: BreadcrumbItem[] = [{ title: 'Bookmark', href: '/bookmarks' }]; const LESSON_TYPE_ICON: Record = { video: PlayCircle, article: BookOpen, pdf: FileText, file: FileText, }; const LEVEL_LABELS: Record = { beginner: 'Pemula', intermediate: 'Menengah', advanced: 'Lanjutan', }; export default function BookmarksIndex({ lessonBookmarks, courseBookmarks }: Props) { const isEmpty = lessonBookmarks.length === 0 && courseBookmarks.length === 0; return ( <>
{/* Premium Pastel Blue Header Card */}
{/* Glowing design elements */}

Bookmark Saya

Menyimpan {courseBookmarks.length} kelas dan {lessonBookmarks.length} materi pilihanmu

{isEmpty ? (

Belum ada bookmark

Klik ikon bookmark di halaman materi atau kelas untuk menyimpannya di sini agar mudah diakses kembali.

) : (
{/* ── COURSE BOOKMARKS ────────────────────────────────── */} {courseBookmarks.length > 0 && (

Kelas Tersimpan

{courseBookmarks.map((b) => (
{b.course.thumbnail ? ( {b.course.title} ) : (
)}

{b.course.title}

{LEVEL_LABELS[b.course.level] ?? b.course.level} • {b.course.price_type === 'free' ? '✦ Gratis' : (b.course.price ? `Rp ${b.course.price.toLocaleString('id-ID')}` : 'Berbayar')}
))}
)} {/* ── LESSON BOOKMARKS ────────────────────────────────── */} {lessonBookmarks.length > 0 && (

Materi Tersimpan

{lessonBookmarks.map((b) => { const Icon = LESSON_TYPE_ICON[b.lesson.type] ?? BookOpen; return (

{b.lesson.title}

{b.lesson.chapter.course.title} • {b.lesson.chapter.title}
); })}
)}
)}
); } BookmarksIndex.layout = (page: React.ReactNode) => {page};