2021-09-05 01:09:30 +02:00
|
|
|
import React, { useState, useEffect } from "react";
|
2021-09-17 01:23:03 +02:00
|
|
|
import Grid from "@mui/material/Grid";
|
2021-06-13 17:05:40 +02:00
|
|
|
|
2021-10-01 19:08:37 +02:00
|
|
|
import Typography from "@mui/material/Typography";
|
2021-06-13 17:05:40 +02:00
|
|
|
interface IProps {
|
2021-09-05 01:09:30 +02:00
|
|
|
onFinish: () => void;
|
2021-06-13 17:05:40 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export function Countdown(props: IProps): React.ReactElement {
|
2021-09-05 01:09:30 +02:00
|
|
|
const [x, setX] = useState(3);
|
|
|
|
useEffect(() => {
|
|
|
|
if (x === 0) {
|
|
|
|
props.onFinish();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
setTimeout(() => setX(x - 1), 200);
|
|
|
|
});
|
2021-06-13 17:05:40 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Grid container spacing={3}>
|
|
|
|
<Grid item xs={12}>
|
2021-10-01 19:08:37 +02:00
|
|
|
<Typography variant="h4">Get Ready!</Typography>
|
|
|
|
<Typography variant="h4">{x}</Typography>
|
2021-06-13 17:05:40 +02:00
|
|
|
</Grid>
|
2021-09-05 01:09:30 +02:00
|
|
|
</Grid>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|