aboutsummaryrefslogtreecommitdiffstats
path: root/apps/settings/src/components/AppList/AppDaemonBadge.vue
diff options
context:
space:
mode:
Diffstat (limited to 'apps/settings/src/components/AppList/AppDaemonBadge.vue')
-rw-r--r--apps/settings/src/components/AppList/AppDaemonBadge.vue37
1 files changed, 37 insertions, 0 deletions
diff --git a/apps/settings/src/components/AppList/AppDaemonBadge.vue b/apps/settings/src/components/AppList/AppDaemonBadge.vue
new file mode 100644
index 00000000000..ca81e7fab0b
--- /dev/null
+++ b/apps/settings/src/components/AppList/AppDaemonBadge.vue
@@ -0,0 +1,37 @@
+<!--
+ - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+ <span v-if="daemon"
+ class="app-daemon-badge"
+ :title="daemon.name">
+ <NcIconSvgWrapper :path="mdiFileChart" :size="20" inline />
+ {{ daemon.display_name }}
+ </span>
+</template>
+
+<script setup lang="ts">
+import type { IDeployDaemon } from '../../app-types.ts'
+import { mdiFileChart } from '@mdi/js'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+
+defineProps<{
+ daemon?: IDeployDaemon
+}>()
+</script>
+
+<style scoped lang="scss">
+.app-daemon-badge {
+ color: var(--color-text-maxcontrast);
+ background-color: transparent;
+ border: 1px solid var(--color-text-maxcontrast);
+ border-radius: var(--border-radius);
+
+ display: flex;
+ flex-direction: row;
+ gap: 6px;
+ padding: 3px 6px;
+ width: fit-content;
+}
+</style>