diff --git a/src/components/StressLevelIndicator.tsx b/src/components/StressLevelIndicator.tsx new file mode 100644 index 0000000..e44b2ac --- /dev/null +++ b/src/components/StressLevelIndicator.tsx @@ -0,0 +1,22 @@ +import { useAppSelector } from 'src/redux/hooks'; +import { getStressLevel } from 'src/redux/slices/minimapSlice'; + +const StressLevelIndicator = () => { + const stressLevel = useAppSelector(getStressLevel); + + const colors = [ + 'bg-green-400', + stressLevel < 1 ? 'bg-gray-600' : 'bg-yellow-300', + stressLevel < 2 ? 'bg-gray-600' : 'bg-red-400', + ]; + + return ( +
+
+
+
+
+ ); +}; + +export default StressLevelIndicator; diff --git a/src/pages/Minimap.tsx b/src/pages/Minimap.tsx index 9c0b427..359ed72 100644 --- a/src/pages/Minimap.tsx +++ b/src/pages/Minimap.tsx @@ -7,6 +7,7 @@ import { getElementsInGaze } from 'src/redux/slices/gazeSlice'; import { useEffect } from 'react'; import background from 'src/assets/minimap-bg.jpg'; import ACAHeader from 'src/components/Element/ACAHeader'; +import StressLevelIndicator from 'src/components/StressLevelIndicator'; const Minimap = () => { const widgets = useAppSelector((state) => @@ -33,6 +34,7 @@ const Minimap = () => { ))} + ); };