import { Head, Link } from '@inertiajs/react'; import { Calendar, Clock, Plus, Radio } from 'lucide-react'; import { Button } from '@/components/ui/button'; import AppLayout from '@/layouts/app-layout'; import type { BreadcrumbItem } from '@/types'; type LiveClass = { id: number; title: string; scheduled_at: string; duration_minutes: number; is_published: boolean; course: { id: number; title: string; slug: string } | null; }; type Props = { liveClasses: LiveClass[] }; const breadcrumbs: BreadcrumbItem[] = [{ title: 'Live Class Saya', href: '/instructor/live-classes' }]; function formatSchedule(dateStr: string) { const d = new Date(dateStr); return d.toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' }) + ' ยท ' + d.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }); } export default function InstructorLiveClassesIndex({ liveClasses }: Props) { return ( <>

Live Class Saya

Jadwalkan dan kelola sesi live

{liveClasses.length === 0 ? (

Belum ada live class. Buat sesi pertamamu!

) : (
{liveClasses.map((lc) => { const isPast = new Date(lc.scheduled_at) < new Date(); return (

{lc.title}

{!lc.is_published && ( Draft )} {isPast && ( Selesai )}
{formatSchedule(lc.scheduled_at)} {lc.duration_minutes} menit
{lc.course && (

{lc.course.title}

)}
); })}
)}
); } InstructorLiveClassesIndex.layout = (page: React.ReactNode) => ( {page} );