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 = () => {
))}
+
>
);
};