add bar indicator

Author: andresdlt03

control-station/src/components/BarIndicator/BarIndicator.module.scss

@@ -0,0 +1,50 @@
+.background {
+    position: relative;
+    height: 3rem;
+    width: 100%;
+    background-color: #000;
+    overflow: hidden;
+}
+
+.infoContainer {
+    position: absolute;
+    padding: 0rem 2rem;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.bar {
+    position: absolute;
+    top: -25%;
+    left: -2%;
+    filter: blur(10px);
+    background-color: red;
+    width: 40%;
+    height: 150%;
+    transition: width 0.1s ease-in-out;
+}
+
+.icon {
+    
+}
+
+.title {
+    opacity: .8;
+    font-size: 24px;
+    font-style: italic;
+    font-weight: 300;
+}
+
+.title 
+
+.value {
+    opacity: .8;
+    font-size: 32px;
+}
+
+.unit {
+
+}

control-station/src/components/BarIndicator/BarIndicator.tsx

@@ -0,0 +1,39 @@
+import { NumericMeasurement, useMeasurementsStore } from "common";
+import styles from "./BarIndicator.module.scss";
+import { getPercentFromRange, getState, stateToColor, stateToColorBackground } from "state";
+
+interface Props {
+    icon?: string;
+    title: string;
+    measurement: NumericMeasurement;
+}
+
+export const BarIndicator = ({icon, title, measurement}: Props) => {
+
+    measurement.value.last = 30;
+    const state = getState(measurement);
+    const percentage = getPercentFromRange(measurement.value.last, measurement.safeRange[0]!!, measurement.safeRange[1]!!)
+    
+    return (
+        <div 
+            className={styles.background}
+            style={{backgroundColor: stateToColorBackground[state]}}
+        >
+            <div 
+                className={styles.bar}
+                style={{width: percentage + "%", backgroundColor: stateToColor[state]}}
+            ></div>
+
+            <div className={styles.infoContainer}>
+                <div>
+                    <div className={styles.icon}>{icon}</div>
+                    <div className={styles.title}>{title}</div>
+                </div>
+                <div>
+                    <div className={styles.value}>{measurement.value.last}</div>
+                    <div className={styles.unit}>{measurement.units}</div>
+                </div>
+            </div>
+        </div>
+    )
+}