import { Head, Link } from '@inertiajs/react'; import { Calendar, Clock, Radio, Users } from 'lucide-react'; import AppLayout from '@/layouts/app-layout'; import type { BreadcrumbItem } from '@/types'; type LiveClass = { id: number; title: string; description: string | null; scheduled_at: string; duration_minutes: number; is_published: boolean; instructor: { id: number; name: string } | null; course: { id: number; title: string; slug: string } | null; }; type Props = { liveClasses: LiveClass[] }; const breadcrumbs: BreadcrumbItem[] = [{ title: 'Live Class', href: '/live-classes' }]; function formatSchedule(dateStr: string) { const d = new Date(dateStr); return { date: d.toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }), time: d.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }), }; } function isUpcoming(dateStr: string) { return new Date(dateStr) > new Date(); } export default function LiveClassesIndex({ liveClasses }: Props) { const upcoming = liveClasses.filter((lc) => isUpcoming(lc.scheduled_at)); const past = liveClasses.filter((lc) => !isUpcoming(lc.scheduled_at)); return ( <>

Live Class

Sesi langsung bersama instruktur

{liveClasses.length === 0 ? (

Belum ada jadwal live class.

) : (
{upcoming.length > 0 && (

Akan Datang

{upcoming.map((lc) => ( ))}
)} {past.length > 0 && (

Telah Berlalu

{past.map((lc) => ( ))}
)}
)}
); } function LiveClassCard({ liveClass, past = false }: { liveClass: LiveClass; past?: boolean }) { const { date, time } = formatSchedule(liveClass.scheduled_at); return (
{!past && ( Upcoming )}

{liveClass.title}

{liveClass.course && (

{liveClass.course.title}

)}
{date}
{time} ยท {liveClass.duration_minutes} menit
{liveClass.instructor?.name ?? '-'}
); } LiveClassesIndex.layout = (page: React.ReactNode) => {page};