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">
        mdi-home
      </v-icon>
      <span><strong>{{ distance.origin }}</strong></span>
    </v-col>
    <v-col cols="12" sm="12" md="6">
      <v-icon class="me-1">
        mdi-car
      </v-icon>
      <span>{{ numericDistance }} km</span>
      <v-icon class="ms-2 me-1">
        mdi-clock-outline
      </v-icon>
      <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,
  }))
</script>