62 lines
No EOL
1.8 KiB
Vue
62 lines
No EOL
1.8 KiB
Vue
<template>
|
|
<div class="hidden" data-ui="runway_card_v1" />
|
|
<UCard class="min-h-[140px] shadow-sm rounded-xl" :class="borderColor">
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full" :class="statusDotColor" />
|
|
<h3 class="font-semibold">Runway</h3>
|
|
</div>
|
|
<UBadge
|
|
:color="operatingMode === 'target' ? 'blue' : 'gray'"
|
|
size="xs"
|
|
>
|
|
{{ operatingMode === 'target' ? 'Target Mode' : 'Min Mode' }}
|
|
</UBadge>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="text-center space-y-6">
|
|
<div class="text-2xl font-semibold" :class="statusColor">
|
|
{{ displayRunway }}
|
|
</div>
|
|
<div class="text-sm text-gray-600">
|
|
at current spending
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { runwayMonths, operatingMode } = useCoopBuilder()
|
|
|
|
const runway = computed(() => runwayMonths())
|
|
|
|
const displayRunway = computed(() => {
|
|
const months = runway.value
|
|
if (!isFinite(months)) return '∞'
|
|
if (months < 1) return '<1 month'
|
|
return `${Math.round(months)} months`
|
|
})
|
|
|
|
const statusColor = computed(() => {
|
|
const months = runway.value
|
|
if (!isFinite(months) || months >= 6) return 'text-green-600'
|
|
if (months >= 3) return 'text-amber-600'
|
|
return 'text-red-600'
|
|
})
|
|
|
|
const statusDotColor = computed(() => {
|
|
const months = runway.value
|
|
if (!isFinite(months) || months >= 6) return 'bg-green-500'
|
|
if (months >= 3) return 'bg-amber-500'
|
|
return 'bg-red-500'
|
|
})
|
|
|
|
const borderColor = computed(() => {
|
|
const months = runway.value
|
|
if (!isFinite(months) || months >= 6) return 'ring-1 ring-green-200'
|
|
if (months >= 3) return 'ring-1 ring-amber-200'
|
|
return 'ring-1 ring-red-200'
|
|
})
|
|
</script> |