EvalueTonSavoir/client/src/components/StudentWaitPage/StudentWaitPage.tsx

59 lines
2 KiB
TypeScript
Raw Normal View History

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;
setQuizMode: (_mode: 'student' | 'teacher') => void;
2024-09-25 13:20:09 -04: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;