import { Head, Link, router, usePage } from '@inertiajs/react'; import { Award, BookOpen, ChevronLeft, ChevronRight, Clock, Search, SlidersHorizontal, Star, Users, } from 'lucide-react'; import { useRef, useState } from 'react'; import GuestLayout from '@/layouts/guest-layout'; import AppLayout from '@/layouts/app-layout'; import type { Auth } from '@/types'; type Category = { id: number; name: string; slug: string }; type Course = { id: number; title: string; slug: string; description: string | null; thumbnail: string | null; level: string; price_type: 'free' | 'paid'; price: number; duration_minutes: number; enrollments_count: number; lessons_count: number; instructor: { id: number; name: string }; category: { id: number; name: string; slug: string } | null; }; type PaginatedCourses = { data: Course[]; current_page: number; last_page: number; total: number; links: { url: string | null; label: string; active: boolean }[]; }; type Props = { courses: PaginatedCourses; categories: Category[]; enrolledCourseIds: number[]; filters: { search?: string; category?: string; level?: string; price?: string }; }; const levelLabels: Record = { beginner: 'Pemula', intermediate: 'Menengah', advanced: 'Mahir', }; const levelColors: Record = { beginner: { bg: 'rgba(6,214,160,0.12)', color: '#05A57D' }, intermediate: { bg: 'rgba(255,183,3,0.12)', color: '#B8820A' }, advanced: { bg: 'rgba(230,57,70,0.12)', color: '#C0303B' }, }; function formatDuration(minutes: number): string { if (minutes < 60) return `${minutes} mnt`; const h = Math.floor(minutes / 60); const m = minutes % 60; return m > 0 ? `${h}j ${m}mnt` : `${h} jam`; } function formatPrice(price: number): string { return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0, }).format(price); } export default function CoursesIndex({ courses, categories, enrolledCourseIds, filters }: Props) { const [search, setSearch] = useState(filters.search ?? ''); const contentRef = useRef(null); function applyFilter(params: Record) { router.get('/courses', { ...filters, ...params }, { preserveScroll: true, preserveState: true, replace: true }); } function handleSearch(e: React.FormEvent) { e.preventDefault(); applyFilter({ search }); } const activeFiltersCount = [filters.category, filters.level, filters.price].filter(Boolean).length; return ( <> {/* ─── HERO ──────────────────────────────────────────────────── */}
{/* 4 parallelogram photo panels — same as landing page */}
{[ 'https://picsum.photos/seed/courses-h1/700/600', 'https://picsum.photos/seed/courses-h2/700/600', 'https://picsum.photos/seed/courses-h3/700/600', 'https://picsum.photos/seed/courses-h4/700/600', ].map((src, i) => (
))} {/* Gradient overlay — heavy on center for text legibility */}
{/* Breadcrumb */}
Beranda Kelas
{/* Title */}
{courses.total}+ kelas tersedia

Jelajahi Kelas yang
Tepat Untukmu

Ratusan kelas dari mentor berpengalaman — pilih sesuai level, kategori, dan waktu belajarmu.

{/* Search bar */}
setSearch(e.target.value)} placeholder="Cari kelas, topik, atau mentor..." className="flex-1 bg-transparent text-sm outline-none" style={{ color: '#1A1A1A' }} />
{/* Quick stats */}
{[ { icon: BookOpen, text: `${courses.total}+ Kelas` }, { icon: Users, text: '5.000+ Pelajar' }, { icon: Award, text: 'Sertifikat Resmi' }, ].map(({ icon: Icon, text }) => ( {text} ))}
{/* ─── CONTENT ───────────────────────────────────────────────── */}
{/* Filter bar */}
{/* Categories */}
Kategori: {categories.map((cat) => ( ))}
{/* Dropdowns */}
Filter: {activeFiltersCount > 0 && ( )}
{/* Course grid */} {courses.data.length === 0 ? (

Kelas tidak ditemukan

Coba ubah kata kunci atau hapus filter

) : (
{courses.data.map((course) => { const isEnrolled = enrolledCourseIds.includes(course.id); const level = levelColors[course.level] ?? { bg: '#F7F8FA', color: '#555555' }; return ( {/* Thumbnail */}
{course.thumbnail ? ( {course.title} ) : (
)} {/* Price badge top-right */}
{course.price_type === 'free' ? 'Gratis' : formatPrice(course.price)}
{/* Body */}
{/* Category */} {course.category && ( {course.category.name} )} {/* Title */}

{course.title}

{/* Instructor */}

{course.instructor.name}

{/* Stats */}
{course.lessons_count} lesson {formatDuration(course.duration_minutes)} {course.enrollments_count.toLocaleString('id-ID')}
{/* Footer */}
{levelLabels[course.level] ?? course.level} {isEnrolled ? ( e.stopPropagation()} > Mulai Belajar ) : ( Lihat Detail → )}
); })}
)} {/* Pagination */} {courses.last_page > 1 && (
{courses.links.map((link, i) => { const isArrow = link.label.includes('«') || link.label.includes('»'); const isPrev = link.label.includes('«'); return ( ); })}
)}
{/* Bottom padding */}
); } function CourseLayoutWrapper({ children }: { children: React.ReactNode }) { const { auth } = usePage<{ auth: Auth }>().props; if (auth?.user) { return {children}; } return {children}; } CoursesIndex.layout = (page: React.ReactNode) => {page};