woodpecker/web/src/components/repo/pipeline/PipelineStatusIcon.vue
Anbraten cab996608e
Use icons for step and workflow states (#1409)
Co-authored-by: 6543 <6543@obermui.de>
2022-11-14 12:25:58 +01:00

28 lines
764 B
Vue

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