36 lines
867 B
Vue
36 lines
867 B
Vue
<script setup>
|
|
const props = defineProps({
|
|
name: String,
|
|
details: String,
|
|
level: Number,
|
|
type: String,
|
|
});
|
|
|
|
const color = computed(() => {
|
|
if (props.level === 1) return "yellow";
|
|
if (props.level === 2) return "orange";
|
|
if (props.level === 3) return "red";
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="['card m-0', `has-background-${color}-95`]"
|
|
:style="{
|
|
borderColor: `var(--bulma-${color}-70)`,
|
|
}"
|
|
>
|
|
<div class="card-content p-4 is-flex is-align-items-center is-gap-2">
|
|
<Icon
|
|
:name="type === 'time' ? 'material-symbols:clock-loader-40' : 'material-symbols:box-outline-rounded'"
|
|
:size="20"
|
|
:class="`has-text-${color}-45`"
|
|
/>
|
|
<div>
|
|
<p :class="`has-text-${color}-40`">{{ name }}</p>
|
|
<p class="fs-13 has-text-grey">{{ details }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|