Move status indicator code into a shared component

dashboard/src/views/BackupsView.vue

@@ -4,6 +4,7 @@ import { ref, onMounted, useTemplateRef } from 'vue';
 import { marked } from 'marked';
 import { Button } from 'pankow';
 import Section from  '../components/Section.vue';
+import StateLED from  '../components/StateLED.vue';
 import BackupDialog from  '../components/BackupDialog.vue';
 import BackupSchedule from  '../components/BackupSchedule.vue';
 import BackupList from  '../components/BackupList.vue';
@@ -87,7 +88,7 @@ onMounted(async () => {
         <div class="info-value">
           <span v-show="config.provider === 'filesystem'">{{ config.backupFolder }}</span>
           <span v-show="mountlike(config.provider)">
-            <i class="fa fa-circle" :style="{ color: mountStatus.state === 'active' ? '#27CE65' : '#d9534f' }" v-show="mountStatus" v-tooltip="mountStatus.message"></i>
+            <StateLED v-if="mountStatus" :state="mountStatus.state === 'active' ? 'success' : 'danger'" v-tooltip="mountStatus.message"/>
             <span v-show="config.provider === 'disk' || config.provider === 'filesystem' || config.provider === 'ext4' || config.provider === 'xfs' || config.provider === 'mountpoint'">{{ mountOptions.diskPath || config.mountPoint }}{{ (config.prefix ? '/' : '') + config.prefix }}</span>
             <span v-show="config.provider === 'cifs' || config.provider === 'nfs' || config.provider === 'sshfs'">{{ mountOptions.host }}:{{ mountOptions.remoteDir }}{{ (config.prefix ? '/' : '') + config.prefix }}</span>
           </span>