File size: 2,837 Bytes
ddf672c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";
import { useEffect, useState } from "react";
import AutoStoriesIcon from "@mui/icons-material/AutoStories";
import BrushIcon from "@mui/icons-material/Brush";
import TuneIcon from "@mui/icons-material/Tune";
const icons = {
"teaching robots to tell bedtime stories...": AutoStoriesIcon,
"bribing pixels to make pretty pictures...": BrushIcon,
"calibrating the multiverse...": TuneIcon,
};
export function RotatingMessage({
messages,
interval = 3000,
isVisible = true,
}) {
const [currentIndex, setCurrentIndex] = useState(0);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
useEffect(() => {
if (isVisible) {
const timer = setInterval(() => {
setCurrentIndex((prev) => (prev + 1) % messages.length);
}, interval);
return () => clearInterval(timer);
}
}, [isVisible, messages.length, interval]);
if (!isVisible) return null;
const currentMessage = messages[currentIndex];
const Icon = icons[currentMessage] || AutoStoriesIcon;
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 2,
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: isMobile ? "90%" : "auto",
textAlign: "center",
px: 2,
}}
>
<Icon
sx={{
fontSize: isMobile ? "2.5rem" : "3rem",
color: "primary.text",
animation: "pulse 2s infinite",
"@keyframes pulse": {
"0%": {
opacity: 0.1,
transform: "scale(0.95)",
},
"50%": {
opacity: 0.3,
transform: "scale(1.05)",
},
"100%": {
opacity: 0.1,
transform: "scale(0.95)",
},
},
}}
/>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
minHeight: isMobile ? "3rem" : "4rem",
}}
>
<Typography
variant="h6"
sx={{
color: "text.primary",
opacity: 0.8,
fontSize: isMobile ? "1rem" : "1.25rem",
animation: "fadeIn 0.5s ease-in",
"@keyframes fadeIn": {
from: { opacity: 0 },
to: { opacity: 0.8 },
},
textAlign: "center",
maxWidth: "100%",
wordBreak: "break-word",
hyphens: "auto",
lineHeight: 1.4,
}}
>
{currentMessage}
</Typography>
</Box>
</Box>
);
}
|