2022-10-18 01:24:12 +00:00
|
|
|
<template>
|
2022-11-14 11:25:58 +00:00
|
|
|
<div
|
|
|
|
class="flex items-center justify-center"
|
|
|
|
:title="$t('repo.pipeline.status.status', { status: $t(`repo.pipeline.status.${status}`) })"
|
|
|
|
>
|
2022-10-18 01:24:12 +00:00
|
|
|
<Icon
|
2022-11-14 11:25:58 +00:00
|
|
|
:name="`status-${status}`"
|
2022-10-18 01:24:12 +00:00
|
|
|
:class="{
|
2022-11-14 11:25:58 +00:00
|
|
|
'text-red-400': pipelineStatusColors[status] === 'red',
|
|
|
|
'text-gray-400': pipelineStatusColors[status] === 'gray',
|
|
|
|
'text-lime-400': pipelineStatusColors[status] === 'green',
|
|
|
|
'text-blue-400': pipelineStatusColors[status] === 'blue',
|
2022-10-18 01:24:12 +00:00
|
|
|
}"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2022-11-14 11:25:58 +00:00
|
|
|
<script lang="ts" setup>
|
2022-10-18 01:24:12 +00:00
|
|
|
import Icon from '~/components/atomic/Icon.vue';
|
2022-11-14 11:25:58 +00:00
|
|
|
import { PipelineStatus } from '~/lib/api/types';
|
2022-10-18 01:24:12 +00:00
|
|
|
|
2022-11-14 11:25:58 +00:00
|
|
|
import { pipelineStatusColors } from './pipeline-status';
|
2022-10-18 01:24:12 +00:00
|
|
|
|
2022-11-14 11:25:58 +00:00
|
|
|
defineProps<{
|
|
|
|
status: PipelineStatus;
|
|
|
|
}>();
|
2022-10-18 01:24:12 +00:00
|
|
|
</script>
|