51 lines
No EOL
1.3 KiB
Vue
51 lines
No EOL
1.3 KiB
Vue
<template>
|
|
<article class="TimelineCard">
|
|
<Icon class="icon" :name="icon" mode="svg" />
|
|
<div class="text">
|
|
<strong>{{ title }}</strong>
|
|
<p>{{ description }}</p>
|
|
<div class="state" :style="{
|
|
'--color': stateColor,
|
|
}">
|
|
<Icon :name="stateIcon" mode="svg" />
|
|
<span>{{ stateMessage }}</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { TimelineCard, TimelineState } from '../../../shared/TimelineCard'
|
|
|
|
|
|
const { state } = defineProps<TimelineCard>()
|
|
|
|
const icons : Record<TimelineState, string> = {
|
|
planned: 'uil:clock',
|
|
inProgress: 'uil:cog',
|
|
done: 'uil:check-circle'
|
|
}
|
|
|
|
const colors : Record<TimelineState, string> = {
|
|
planned: 'var(--color-darkest)',
|
|
inProgress: 'var(--color-main-dark)',
|
|
done: 'var(--color-accent-darkest)',
|
|
}
|
|
|
|
const stateColor = computed(() => colors[state.value])
|
|
const stateIcon = computed(() => icons[state.value])
|
|
const stateMessage = computed(() => {
|
|
switch (state.value) {
|
|
case 'planned':
|
|
let planned = 'Geplant'
|
|
if (state.message) planned += ` für ${state.message}`
|
|
return planned
|
|
case 'inProgress':
|
|
return 'In Bearbeitung'
|
|
case 'done':
|
|
let done = 'Abgeschlossen'
|
|
if (state.message) done += ` am ${state.message}`
|
|
return done
|
|
}
|
|
})
|
|
</script> |