mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-10-11 15:23:17 +01:00
42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { CheckCircleIcon, ExclamationCircleIcon, ClockIcon } from '@heroicons/vue/20/solid';
|
|
import type { GoalStatus } from '@/packages/api/src';
|
|
import { goalStatusIsPositive, goalStatusLabel } from '@/utils/goals';
|
|
|
|
const props = defineProps<{
|
|
status: GoalStatus;
|
|
}>();
|
|
|
|
const icon = computed(() => {
|
|
if (props.status === 'exceeded') {
|
|
return ExclamationCircleIcon;
|
|
}
|
|
if (props.status === 'achieved') {
|
|
return CheckCircleIcon;
|
|
}
|
|
return ClockIcon;
|
|
});
|
|
|
|
const colorClass = computed(() => {
|
|
if (props.status === 'exceeded') {
|
|
return 'text-red-500';
|
|
}
|
|
if (goalStatusIsPositive(props.status)) {
|
|
return 'text-green-500';
|
|
}
|
|
return 'text-icon-default';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
class="inline-flex items-center space-x-1.5 text-sm text-text-primary"
|
|
:data-status="status">
|
|
<component :is="icon" class="w-4" :class="colorClass"></component>
|
|
<span>{{ goalStatusLabel(status) }}</span>
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped></style>
|