add stress level indicator

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 (
+    <div className="fixed bottom-0 w-32 bg-gray-800 left-[calc(50vw-4rem)] h-7 flex p-2.5 rounded-t-xl gap-0.5">
+      <div className={`${colors[0]} h-full grow rounded-l-full`}></div>
+      <div className={`${colors[1]} h-full grow`}></div>
+      <div className={`${colors[2]} h-full grow rounded-r-full`}></div>
+    </div>
+  );
+};
+
+export default StressLevelIndicator;

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 = () => {
           <Widget key={widgetId} widget={widgets[widgetId]} />
         ))}
       </div>
+      <StressLevelIndicator />
     </>
   );
 };