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

<template>
  <v-layout
    row
    wrap
  >
    <v-flex xs12 sm6>
      <v-icon>mdi-home</v-icon>
      <span><strong>{{ distance.origin }}</strong></span>
    </v-flex>
    <v-flex xs12 sm6>
      <v-icon>mdi-car</v-icon>
      <span>{{ numericDistance }} km</span>
      <v-icon>mdi-clock-outline</v-icon>
      <span>{{ distance.duration }}</span>
    </v-flex>
  </v-layout>
</template>

<script setup lang='ts'>
import { computed, PropType } from 'vue'
import { 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
  }))
</script>