40 lines
923 B
Vue
40 lines
923 B
Vue
<template>
|
|
<v-row
|
|
wrap
|
|
>
|
|
<v-col xs="12" sm="6">
|
|
<v-icon class="me-1">
|
|
mdi-home
|
|
</v-icon>
|
|
<span><strong>{{ distance.origin }}</strong></span>
|
|
</v-col>
|
|
<v-col xs="12" sm="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>
|