DataItem.vue

<script setup>
import { numberOrText } from '@/helpers'

defineProps(['asText', 'data', 'label', 'data', 'unit'])
</script>

<template>
  <div class="data-item">
    <span class="data-item__label">{{ label }}</span>
    <span class="data-item__value">{{ !data ? '-' : unit ? `${numberOrText(data, asText)} ${unit}` :
        numberOrText(data, asText)
    }}</span>
  </div>
</template>

<style scoped>
.data-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid hsl(var(--clr-background));
}

.data-item__label {
  font-size: var(--text-s);
}

.data-item__value {
  font-size: var(--text-s);
}
</style>