explorer-app/components/Project/ProjectRatingInfo.vue
2024-09-27 12:14:49 +02:00

55 lines
1.1 KiB
Vue

<script lang="ts" setup>
import type { ProjectRatingItem } from '~/types'
withDefaults(defineProps<{ items: ProjectRatingItem[], compact?: boolean }>(), {
compact: true,
})
</script>
<template>
<div
flex
flex-col
gap-8px
:class="{ 'mt-16px': !compact }"
>
<div
v-for="item in items"
:key="item.label"
flex
justify-between
items-center
text-12px
font-700
leading-20px
w-full
:class="[item.isValid ? 'text-app-white': 'text-app-text-rating-negative']"
>
<div
flex
items-center
gap-6px
>
<div
:class="[item.isValid ? 'i-ic-sharp-thumb-up' : 'i-ic-sharp-thumb-down']"
text-16px
mt--4px
/>
{{ item.label }}
</div>
<NuxtLink
v-if="item.isValid && item.positive === 'Link'"
:to="item.value"
target="_blank"
external
underline
@click.stop
>
{{ item.positive }}
</NuxtLink>
<div v-else>
{{ item.isValid ? item.positive : item.negative }}
</div>
</div>
</div>
</template>