76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import { polishPlurals } from 'polish-plurals';
|
|
import { useCountdown } from 'libs/hooks';
|
|
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
import { Container, Grid, Typography } from '@material-ui/core';
|
|
import Section, { BgColor } from 'common/Section/Section';
|
|
|
|
export interface TimerProps {
|
|
dateOfTheExam: Date | string;
|
|
}
|
|
|
|
const Timer = ({ dateOfTheExam }: TimerProps) => {
|
|
const classes = useStyles();
|
|
const { days, minutes, hours, seconds } = useCountdown(
|
|
new Date(dateOfTheExam)
|
|
);
|
|
|
|
return (
|
|
<Section bgColor={BgColor.Primary} className={classes.textAlignCenter}>
|
|
<Container>
|
|
<Typography variant="h2" gutterBottom>
|
|
Do najbliższej sesji egzaminacyjnej pozostało
|
|
</Typography>
|
|
<Grid container spacing={2}>
|
|
{[
|
|
{
|
|
number: days,
|
|
text: polishPlurals('dzień', 'dni', 'dni', days),
|
|
},
|
|
{
|
|
number: hours,
|
|
text: polishPlurals('godzina', 'godziny', 'godzin', hours),
|
|
},
|
|
{
|
|
number: minutes,
|
|
text: polishPlurals('minuta', 'minuty', 'minut', minutes),
|
|
},
|
|
{
|
|
number: seconds,
|
|
text: polishPlurals('sekunda', 'sekundy', 'sekund', seconds),
|
|
},
|
|
].map(({ number, text }) => (
|
|
<Grid key={text} item xs={6} sm={3}>
|
|
<Typography
|
|
variant="h3"
|
|
component="p"
|
|
className={classes.number}
|
|
gutterBottom
|
|
>
|
|
{number}
|
|
</Typography>
|
|
<Typography variant="h4" component="h3">
|
|
{text}
|
|
</Typography>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
};
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
textAlignCenter: {
|
|
textAlign: 'center',
|
|
},
|
|
number: {
|
|
padding: theme.spacing(2),
|
|
border: `1px solid #fff`,
|
|
borderRadius: 10,
|
|
display: 'inline-block',
|
|
},
|
|
}));
|
|
|
|
export default Timer;
|