import { Link, Head } from '@inertiajs/react'; import { Gamepad2, Calendar, ArrowRight, Play, Timer, Trophy } from 'lucide-react'; import StudentLayout from '@/layouts/StudentLayout'; import LearningContentFilters from '@/components/LearningContentFilters'; import type { PageProps } from '@/types'; interface Game { id: number; title: string; created_at: string; game_mode: string; subject: { id: number; name: string } | null; teacher: { id: number; name: string } | null; settings: { timer_seconds: number }; } interface Props extends PageProps { games: Game[]; subjects: Array<{ id: number; name: string }>; selectedSubject: number | null; } export default function GamesList({ games, subjects, selectedSubject }: Props) { return ( <>

Quiz Arena

Selesaikan quiz gamifikasi dan kalahkan rekor tertinggimu!

{games.length} quiz ditampilkan

{games.length > 0 ? (
{games.map((game) => (
{/* Icon & Subject */}
{game.subject?.name ?? 'Mata Pelajaran'}
{/* Title & Info */}

{game.title}

{game.game_mode === 'faction' && ( ⚔️ Faction War )} {game.game_mode === 'live' && ( 🔥 Live )} {game.game_mode === 'team_live' && ( Team Quest · 1 HP/Kelompok )}

{game.settings?.timer_seconds ?? 60} dtk/soal

{/* Bottom Info */}

{new Date(game.created_at).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' })}

Oleh: {game.teacher?.name ?? '-'}

Main
))}
) : (

{selectedSubject ? 'Tidak Ada Quiz yang Sesuai' : 'Belum Ada Quiz'}

{selectedSubject ? 'Tidak ada quiz untuk mata pelajaran ini. Pilih mapel lain atau Semua Mata Pelajaran.' : 'Belum ada quiz yang diterbitkan untuk kelas Anda saat ini.'}

)}
); } GamesList.layout = (page: any) => {page};