10 lines
779 B
Vue
10 lines
779 B
Vue
<template>
|
|
<div role="status" aria-live="polite" class="flex min-w-0 flex-wrap items-center gap-3">
|
|
<span class="inline-flex shrink-0 items-center gap-2 rounded-full border px-4 py-2 text-base font-semibold" :class="status.tone==='ready'?'border-emerald-400/50 bg-emerald-400/15 text-emerald-200':status.tone==='busy'?'border-amber-300/50 bg-amber-300/15 text-amber-200':'border-zinc-600 bg-zinc-800 text-zinc-200'"><span class="h-2.5 w-2.5 rounded-full bg-current" :class="{'animate-pulse':status.tone==='busy'}" />GPU · {{ status.label }}</span>
|
|
<span class="max-w-2xl truncate text-sm text-zinc-300" :title="status.detail">{{ status.detail }}</span>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
defineProps<{status:{label:string;tone:string;detail:string}}>()
|
|
</script>
|