pierrelf.com
this repo has no description
1import { useEffect, useMemo } from 'react';
2import { keyframes } from '@emotion/react';
3import Box from '@mui/material/Box';
4import Button from '@mui/material/Button';
5import Typography from '@mui/material/Typography';
6import { Rambi } from '../mascot/Rambi';
7import { playIncorrectSound } from '../../utils/sounds';
8
9const slideUp = keyframes`
10 from { transform: translateY(100%); opacity: 0; }
11 to { transform: translateY(0); opacity: 1; }
12`;
13
14const encouragePhrases = [
15 'Kaya mo yan!',
16 'Subukan ulit!',
17 'Okay lang!',
18 'Halos tama!',
19 'Matuto tayo!',
20 'Hindi bale!',
21];
22
23interface IncorrectBannerProps {
24 correctAnswer: string;
25 onContinue: () => void;
26}
27
28export function IncorrectBanner({ correctAnswer, onContinue }: IncorrectBannerProps) {
29 const phrase = useMemo(
30 () => encouragePhrases[Math.floor(Math.random() * encouragePhrases.length)],
31 [],
32 );
33
34 useEffect(() => {
35 playIncorrectSound();
36 }, []);
37
38 return (
39 <Box
40 sx={{
41 position: 'fixed',
42 bottom: 0,
43 left: 0,
44 right: 0,
45 bgcolor: '#FF4B4B',
46 pt: 2,
47 pb: 'calc(16px + env(safe-area-inset-bottom, 0px))',
48 px: 3,
49 animation: `${slideUp} 0.3s ease-out`,
50 zIndex: 1300,
51 display: 'flex',
52 flexDirection: 'column',
53 alignItems: 'center',
54 gap: 1.5,
55 }}
56 >
57 <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
58 <Rambi mood="encourage" size={48} />
59 <Box>
60 <Typography
61 variant="h6"
62 sx={{ color: '#FFFFFF', fontWeight: 700 }}
63 >
64 {phrase}
65 </Typography>
66 <Typography
67 variant="body2"
68 sx={{
69 color: 'rgba(255,255,255,0.9)',
70 fontWeight: 500,
71 }}
72 >
73 Correct answer: {correctAnswer}
74 </Typography>
75 </Box>
76 </Box>
77 <Button
78 fullWidth
79 variant="contained"
80 onClick={onContinue}
81 sx={{
82 py: 1.5,
83 bgcolor: 'rgba(255,255,255,0.25)',
84 color: '#FFFFFF',
85 fontWeight: 700,
86 '&:hover': { bgcolor: 'rgba(255,255,255,0.35)' },
87 maxWidth: 600,
88 }}
89 >
90 Continue
91 </Button>
92 </Box>
93 );
94}