many update again

src/components/Status.vue

@@ -0,0 +1,39 @@
+<template>
+    <span class="badge rounded-pill" :class=" 'bg-' + color ">{{ text }}</span>
+</template>
+
+<script>
+export default {
+    props: {
+        status: Number
+    },
+
+    computed: {
+        color() {
+            if (this.status === 0) {
+                return "danger"
+            } else if (this.status === 1) {
+                return "primary"
+            } else {
+                return "secondary"
+            }
+        },
+
+        text() {
+            if (this.status === 0) {
+                return "Down"
+            } else if (this.status === 1) {
+                return "Up"
+            } else {
+                return "Unknown"
+            }
+        },
+    }
+}
+</script>
+
+<style scoped>
+    span {
+        width: 45px;
+    }
+</style>