dancefinder-app/components/pages/events/event-distance.vue

<template>
  <v-row dense>
    <v-col cols="12" sm="12" md="6">
      <v-icon class="me-1" icon='mdi-home' />
      <span><strong>{{ distance.origin }}</strong></span>
    </v-col>
    <v-col cols="12" sm="12" md="6">
      <v-icon class="me-1" icon='mdi-car' />
      <span>{{ numericDistance }}</span>
      <v-icon class="ms-2 me-1" icon='mdi-clock-outline' />
      <span>{{ distance.duration }}</span>
    </v-col>
  </v-row>
</template>

<script setup lang='ts'>
import { computed, type PropType } from 'vue'

import type { DanceHallDistance } from '~/graphql/generated/operations'

const props = defineProps({
  distance: {
    type: Object as PropType<DanceHallDistance>,
    required: true,
  },
})
const numericDistance = computed(() =>
  `${Number(props.distance.distance / 1000).toLocaleString('sv-SE', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  })} km`)
</script>