bitcoin page

src/components/BitcoinNetworkStat.vue

@@ -28,7 +28,7 @@
         <span
           class="change-text ml-1"
           :class="{'text-success': change.value > 0, 'text-danger': change.value < 0, 'text-muted': change.value === 0}"
-        >{{ change.value > 0 ? '+' : ''}}{{ change.value }}{{ change.suffix }}</span>
+        >{{ change.value >= 0 ? '+' : ''}}{{ change.value }}{{ change.suffix }}</span>
       </div>
     </div>
   </div>

src/components/ToggleSwitch.vue

@@ -16,15 +16,24 @@ export default {
   data() {
     return {
       state: {
-        isOn: true
+        isOn: false
       }
     };
   },
   computed: {},
+  // created() {
+  //   this.state.isOn = this.props.on;
+  // },
   methods: {
     toggle() {
       this.state.isOn = !this.state.isOn;
     }
+  },
+  props: {
+    // on: {
+    //   type: Boolean,
+    //   default: false
+    // }
   }
 };
 </script>

src/views/Bitcoin.vue

@@ -1,8 +1,57 @@
 <template>
   <div class="p-2">
     <div class="my-3 pb-2">
-      <h1>bitcoin</h1>
-      <p class="text-muted">🛠 Under heavy development</p>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex justify-content-start align-items-center">
+          <img
+            style="height: auto; width: 12vw; max-width: 100px"
+            class="mr-2"
+            src="@/assets/icon-app-bitcoin.svg"
+          />
+          <div>
+            <svg
+              width="8"
+              height="8"
+              viewBox="0 0 8 8"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle cx="4" cy="4" r="4" fill="#00CD98" />
+            </svg>
+            <small class="ml-1 text-success">Running</small>
+            <h3 class="d-block font-weight-bold mb-1">Bitcoin Core</h3>
+            <span class="d-block text-muted">v0.19.1</span>
+          </div>
+        </div>
+        <div>
+          <svg
+            width="18"
+            height="4"
+            viewBox="0 0 18 4"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 0 2 0C0.89543 0 0 0.89543 0 2C0 3.10457 0.89543 4 2 4Z"
+              fill="#C3C6D1"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M9 4C10.1046 4 11 3.10457 11 2C11 0.89543 10.1046 0 9 0C7.89543 0 7 0.89543 7 2C7 3.10457 7.89543 4 9 4Z"
+              fill="#C3C6D1"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M16 4C17.1046 4 18 3.10457 18 2C18 0.89543 17.1046 0 16 0C14.8954 0 14 0.89543 14 2C14 3.10457 14.8954 4 16 4Z"
+              fill="#C3C6D1"
+            />
+          </svg>
+        </div>
+      </div>
     </div>
     <b-row class="row-eq-height">
       <b-col col cols="12" md="6" xl="4">