46 lines
936 B
JavaScript
46 lines
936 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: 2 },
|
|
}}
|
|
>
|
|
{Object.keys(tempTop).map((d) => (
|
|
<BlueRect title={d} key={d + Math.random()} value={tempTop[d]} blue={blueTe.includes(d)} />
|
|
))}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export default TemperatureTop;
|