Files
xuchang-new/src/components/Common/TemperatureTop/index.jsx
2024-07-12 14:12:10 +08:00

51 lines
987 B
JavaScript

import BlueRect from "../BlueRect";
import { useSelector } from "react-redux";
import { motion, AnimatePresence } from "framer-motion";
const blueTe = [
"TE271",
"TE272",
"TE273",
"TE274",
"TE275",
"TE276",
"TE277",
"TE278",
"TE279",
"TE280",
];
function TemperatureTop(props) {
const tempTop = useSelector((state) => state.temperature.top);
return (
<motion.div
className="temperature-top"
style={{
position: "absolute",
top: "0",
left: "0",
width: "100%",
height: "80vh",
zIndex: "-1",
...props.style,
}}
animate={{
opacity: [0, 0, 0, 0.6, 1],
transition: { duration: 0.3, delay: 1.5 },
}}
>
{Object.keys(tempTop).map((d) => (
<BlueRect
title={d}
key={d + Math.random()}
value={tempTop[d]}
blue={blueTe.includes(d)}
/>
))}
</motion.div>
);
}
export default TemperatureTop;