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 { playCorrectSound } from '../../utils/sounds';
8
9const slideUp = keyframes`
10 from { transform: translateY(100%); opacity: 0; }
11 to { transform: translateY(0); opacity: 1; }
12`;
13
14const correctPhrases = [
15 'Tama!',
16 'Magaling!',
17 'Ayos!',
18 'Ang galing mo!',
19 'Oo, tama yan!',
20 'Napakagaling!',
21];
22
23interface CorrectBannerProps {
24 onContinue: () => void;
25}
26
27export function CorrectBanner({ onContinue }: CorrectBannerProps) {
28 const phrase = useMemo(
29 () => correctPhrases[Math.floor(Math.random() * correctPhrases.length)],
30 [],
31 );
32
33 useEffect(() => {
34 playCorrectSound();
35 }, []);
36
37 return (
38 <Box
39 sx={{
40 position: 'fixed',
41 bottom: 0,
42 left: 0,
43 right: 0,
44 bgcolor: '#4CAF50',
45 pt: 2,
46 pb: 'calc(16px + env(safe-area-inset-bottom, 0px))',
47 px: 3,
48 animation: `${slideUp} 0.3s ease-out`,
49 zIndex: 1300,
50 display: 'flex',
51 flexDirection: 'column',
52 alignItems: 'center',
53 gap: 1.5,
54 }}
55 >
56 <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
57 <Rambi mood="happy" size={48} />
58 <Box>
59 <Typography
60 variant="h5"
61 sx={{ color: '#FFFFFF', fontWeight: 700 }}
62 >
63 Correct!
64 </Typography>
65 <Typography
66 variant="body2"
67 sx={{ color: 'rgba(255,255,255,0.9)', fontWeight: 500 }}
68 >
69 {phrase}
70 </Typography>
71 </Box>
72 </Box>
73 <Button
74 fullWidth
75 variant="contained"
76 onClick={onContinue}
77 sx={{
78 py: 1.5,
79 bgcolor: 'rgba(255,255,255,0.25)',
80 color: '#FFFFFF',
81 fontWeight: 700,
82 '&:hover': { bgcolor: 'rgba(255,255,255,0.35)' },
83 maxWidth: 600,
84 }}
85 >
86 Continue
87 </Button>
88 </Box>
89 );
90}