feat: version 1.0.0 (#21)

client/components/Connection.vue

@@ -1,33 +1,53 @@
 <script lang="ts" setup>
-defineProps({
-  connection: {
+import { computed } from 'vue'
+
+const props = defineProps({
+  code: {
     type: Number,
     default: 0,
   },
 })
+
+const connections = [
+  {
+    color: 'text-red-5',
+    border: 'border-red-5',
+    status: 'Not Connected',
+    description: 'Please Check Your Connection!',
+  },
+  {
+    color: 'text-green-5',
+    border: 'border-green-5',
+    status: 'Connected',
+    description: 'Everything is Working Perfectly!',
+  },
+  {
+    color: 'text-yellow-5',
+    border: 'border-yellow-5',
+    status: 'Connecting',
+    description: 'Just a Moment, We"re Getting There!',
+  },
+  {
+    color: 'text-orange-5',
+    border: 'border-orange-5',
+    status: 'Disconnecting',
+    description: 'Preparing to Safely Disconnect!',
+  },
+]
+
+const connection = computed(() => connections[props.code])
 </script>
 
 <template>
   <NPanelGrids>
-    <div flex="~ gap-2" animate-pulse items-center text-yellow>
-      <NIcon icon="carbon-flow-connection" />
-      Please check your mongodb connection
-    </div>
-    <div flex="~ gap-2" items-center text-light>
-      Your current connection is: {{ connection }}
+    <div flex="~ gap-2" animate-pulse items-center text-lg font-bold :class="connection.color">
+      ({{ code }}):
+      {{ connection.status }},
+      {{ connection.description }}
     </div>
     <div absolute bottom-10 left-10 right-10 flex justify-around>
-      <NCard p2 text-red-5>
-        0: Not connected
-      </NCard>
-      <NCard p2 text-green-5>
-        1: Connected
-      </NCard>
-      <NCard p2 text-yellow-5>
-        2: Connecting
-      </NCard>
-      <NCard p2 text-orange-5>
-        3: Disconnecting
+      <NCard v-for="item, index of connections" :key="index" p2 :class="[item.color, item.status === connection.status ? item.border : '']">
+        ({{ index }}): {{ item.status }}
       </NCard>
     </div>
   </NPanelGrids>