2025-04-04 16:24:46 -04:00
|
|
|
import React, { useState } from 'react';
|
2024-09-25 14:53:17 -04:00
|
|
|
import { Box, Button, Chip } from '@mui/material';
|
2024-09-25 13:20:09 -04:00
|
|
|
import { StudentType } from '../../Types/StudentType';
|
|
|
|
|
import { PlayArrow } from '@mui/icons-material';
|
|
|
|
|
import LaunchQuizDialog from '../LaunchQuizDialog/LaunchQuizDialog';
|
2025-04-04 16:24:46 -04:00
|
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
2024-09-25 13:20:09 -04:00
|
|
|
|
|
|
|
|
interface Props {
|
2024-09-25 14:53:17 -04:00
|
|
|
students: StudentType[];
|
2024-09-25 13:20:09 -04:00
|
|
|
launchQuiz: () => void;
|
2025-02-21 14:48:21 -05:00
|
|
|
setQuizMode: (_mode: 'student' | 'teacher') => void;
|
2024-09-25 13:20:09 -04:00
|
|
|
}
|
|
|
|
|
|
2025-02-23 22:40:46 -05:00
|
|
|
const StudentWaitPage: React.FC<Props> = ({ students, launchQuiz, setQuizMode }) => {
|
2024-09-25 13:20:09 -04:00
|
|
|
const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
|
|
|
|
|
|
2025-02-21 20:15:32 -05:00
|
|
|
const handleLaunchClick = () => {
|
|
|
|
|
setIsDialogOpen(true);
|
|
|
|
|
};
|
|
|
|
|
|
2024-09-25 13:20:09 -04:00
|
|
|
return (
|
2025-04-04 16:24:46 -04:00
|
|
|
<div className="d-flex flex-column w-100">
|
|
|
|
|
<div className="p-3 d-flex justify-content-center align-items-center">
|
2024-09-25 13:20:09 -04:00
|
|
|
<Button
|
|
|
|
|
variant="contained"
|
2025-02-21 20:15:32 -05:00
|
|
|
onClick={handleLaunchClick}
|
2024-09-25 13:20:09 -04:00
|
|
|
startIcon={<PlayArrow />}
|
|
|
|
|
fullWidth
|
2025-04-04 16:24:46 -04:00
|
|
|
sx={{
|
|
|
|
|
fontWeight: 600,
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
maxWidth: '500px' // Optional: limit button width
|
|
|
|
|
}}
|
2024-09-25 13:20:09 -04:00
|
|
|
>
|
2025-04-04 16:24:46 -04:00
|
|
|
Lancer
|
|
|
|
|
</Button>
|
2024-09-25 13:20:09 -04:00
|
|
|
</div>
|
|
|
|
|
|
2025-04-04 16:24:46 -04:00
|
|
|
<div className="p-3 w-100 overflow-auto">
|
2024-09-25 14:53:17 -04:00
|
|
|
<Box display="flex" flexWrap="wrap" gap={3}>
|
|
|
|
|
{students.map((student, index) => (
|
2025-04-04 16:24:46 -04:00
|
|
|
<Box key={student.name + index}>
|
2024-09-25 14:53:17 -04:00
|
|
|
<Chip label={student.name} sx={{ width: '100%' }} />
|
|
|
|
|
</Box>
|
2024-09-25 13:20:09 -04:00
|
|
|
))}
|
2024-09-25 14:53:17 -04:00
|
|
|
</Box>
|
2024-09-25 13:20:09 -04:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<LaunchQuizDialog
|
|
|
|
|
open={isDialogOpen}
|
|
|
|
|
handleOnClose={() => setIsDialogOpen(false)}
|
|
|
|
|
launchQuiz={launchQuiz}
|
|
|
|
|
setQuizMode={setQuizMode}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
2025-04-04 16:24:46 -04:00
|
|
|
export default StudentWaitPage;
|