Khafid Prayoga
73 lines
2.7 KiB
Vue
73 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import type { ServiceStatus } from './type'
|
|
import { Loader, Loader2 } from 'lucide-vue-next'
|
|
import { cn } from '~/lib/utils'
|
|
|
|
const props = defineProps<ServiceStatus>()
|
|
|
|
const tokenStatus = computed((): string => {
|
|
return props.sessionActive ? 'Valid' : 'Invalid'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Card v-if="props.isSkeleton" class="py-6">
|
|
<div class="flex gap-4 justify-between px-6">
|
|
<div class="flex gap-2 items-center">
|
|
<span class="bg-gray-100">
|
|
<Skeleton class="bg-gray-100 w-6 h-6 sm:w-8 sm:h-8" />
|
|
</span>
|
|
<div>
|
|
<Skeleton class="w-64 h-8 bg-gray-100 text-xs md:text-sm text-muted-foreground" />
|
|
</div>
|
|
</div>
|
|
<div class="text-right flex flex-col items-end">
|
|
<Skeleton class="w-32 h-2 bg-gray-100 text-xs md:text-md text-muted-foreground" />
|
|
<Skeleton class="w-32 h-3 bg-gray-100 text-xs md:text-md font-bold" />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
<Card v-else class="py-6">
|
|
<div class="flex gap-4 justify-between px-6">
|
|
<div class="flex gap-2 items-center">
|
|
<span
|
|
:class="cn(' rounded-md w-12 h-12 flex items-center justify-center',
|
|
{ 'bg-red-500': props.status === 'error' },
|
|
{ 'bg-blue-500': props.status !== 'error' },
|
|
)"
|
|
>
|
|
<Icon v-if="props.status === 'error'" name="i-lucide-cable" class="text-white w-6 h-6 sm:w-8 sm:h-8" />
|
|
<Icon v-else name="i-lucide-bring-to-front" class="text-white w-6 h-6 sm:w-8 sm:h-8" />
|
|
</span>
|
|
<div>
|
|
<p v-if="props.status === 'connected'" class="text-xs md:text-md font-bold">Koneksi {{ props.serviceName }}
|
|
Aktif</p>
|
|
<p v-if="props.status === 'connecting'" class="flex flex-row text-xs md:text-md font-bold">Menghubungkan ke
|
|
API {{
|
|
props.serviceName }}
|
|
<Loader2 class="ml-2 h-4 w-4 animate-spin" />
|
|
</p>
|
|
<p v-if="props.status === 'error'" class="text-xs md:text-md font-bold">Koneksi ke API {{ props.serviceName
|
|
}}
|
|
Gagal</p>
|
|
<p v-if="props.status === 'connected'" class="text-xs md:text-sm text-muted-foreground">Koneksi Terhubung ke
|
|
API {{ props.serviceDesc }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right flex flex-col items-end">
|
|
<p class="text-xs md:text-md text-muted-foreground">Session Token</p>
|
|
<p v-if="props.status === 'connecting'">
|
|
<Loader class="ml-2 h-4 w-4 animate-spin" />
|
|
</p>
|
|
<p
|
|
v-else :class="cn('text-xs md:text-md font-bold',
|
|
{ 'text-blue-500': props.sessionActive },
|
|
{ 'text-red-500': !props.sessionActive },
|
|
)"
|
|
>{{ tokenStatus }}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|