Adding emergency stop button component

package-lock.json

@@ -11,7 +11,6 @@
         "@tauri-apps/api": "^1.4.0",
         "vue": "^3.2.45",
         "vue-router": "^4.3.0"
-
       },
       "devDependencies": {
         "@tauri-apps/cli": "^1.4.0",

src/App.vue

@@ -4,12 +4,15 @@
 import Greet from "./components/Greet.vue";
 import Navbar from "./components/Navbar.vue";
 import Camera from "./components/Camera.vue";
+import Battery from "./components/Battery.vue";
 import { RouterView } from "vue-router";
+import EmergencyStop from "./components/EmergencyStop.vue";
 </script>
 
 <template>
   <div>
     <Navbar/>
+    <EmergencyStop/>
   </div>
   <RouterView/>
   <!-- <div class="container">

src/components/EmergencyStop.vue

@@ -0,0 +1,44 @@
+<template>
+    <button class="emergency-stop-button" @click="onStopClicked">
+      <img :src="buttonImage" alt="Emergency Stop All" />
+    </button>
+  </template>
+  
+  <script>
+  import buttonImage from '../assets/Emergency_Stop_All_Red.png';
+  
+  export default {
+    name: 'EmergencyStopButton',
+    props: {
+      buttonImage: {
+        type: String,
+        default: buttonImage
+      }
+    },
+    methods: {
+      onStopClicked() {
+        this.$emit('stop');
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .emergency-stop-button {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+}
+  
+  .emergency-stop-button img {
+    display: block; 
+    width: 100%;
+    height: 50px; 
+  }
+  </style>
+  
+  
+  
+  
+