56 lines
2.2 KiB
Vue
56 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { Card } from "@/components/ui/card";
|
|
import ServiceCategory from "@/enums/ServiceCategory";
|
|
import ServiceStatus from "@/enums/ServiceStatus";
|
|
import ServiceType from "@/enums/ServiceType";
|
|
import { DoorOpenIcon } from "lucide-vue-next";
|
|
|
|
withDefaults(defineProps<{
|
|
icon?: object | Function;
|
|
serviceType?: string;
|
|
serviceCategory?: string;
|
|
status?: string;
|
|
}>(), {
|
|
icon: () => DoorOpenIcon,
|
|
serviceType: ServiceType.GATEWAY,
|
|
serviceCategory: ServiceCategory.DATABASE,
|
|
status: ServiceStatus.UNKNOWN,
|
|
});
|
|
</script>
|
|
<template>
|
|
<Card
|
|
class="flex select-none items-center justify-between gap-4 bg-card/30 p-4 backdrop-blur-sm"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<component :is="icon" class="size-4 opacity-50" />
|
|
<div>
|
|
<div class="capitalize">{{ serviceCategory }}</div>
|
|
<div class="text-xs opacity-50">{{ serviceType }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<span
|
|
class="inline-block size-1 rounded-full dark:bg-zinc-500"
|
|
:class="{
|
|
'bg-zinc-500 dark:bg-zinc-400':
|
|
status === ServiceStatus.UNKNOWN || status === ServiceStatus.NOT_INSTALLED,
|
|
'bg-green-600 dark:bg-green-400': status === ServiceStatus.RUNNING,
|
|
'bg-red-600 dark:bg-red-400': status === ServiceStatus.STOPPED,
|
|
'bg-yellow-600 dark:bg-yellow-400': status === ServiceStatus.INSTALLING,
|
|
}"
|
|
></span>
|
|
<span
|
|
class="text-xs dark:text-zinc-400"
|
|
:class="{
|
|
'text-zinc-600 dark:text-zinc-400':
|
|
status === ServiceStatus.UNKNOWN || status === ServiceStatus.NOT_INSTALLED,
|
|
'text-green-700 dark:text-green-400': status === ServiceStatus.RUNNING,
|
|
'text-red-700 dark:text-red-400': status === ServiceStatus.STOPPED,
|
|
'text-yellow-700 dark:text-yellow-400': status === ServiceStatus.INSTALLING,
|
|
}"
|
|
>{{ status.replaceAll("-", " ") }}</span
|
|
>
|
|
</div>
|
|
</Card>
|
|
</template>
|