add stress level indicator
This commit is contained in:
parent
ded2c2a13c
commit
48fc554596
22
src/components/StressLevelIndicator.tsx
Normal file
22
src/components/StressLevelIndicator.tsx
Normal file
@ -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;
|
@ -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 />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user