de95dbd059
All checks were successful
Build Docker Image / build (push) Successful in 4m36s
- Add RouteStepper component with transport icons (🚛 🚂 🚢) - Add OfferResultCard with price, distance, route stages - Update hub page to use OfferResultCard - Update CalcResultContent to use OfferResultCard
40 lines
932 B
Vue
40 lines
932 B
Vue
<template>
|
|
<div class="flex items-center gap-1 flex-wrap text-xs">
|
|
<template v-for="(stage, index) in stages" :key="index">
|
|
<div v-if="index > 0" class="w-3 h-px bg-base-300" />
|
|
<div class="flex items-center gap-0.5">
|
|
<span>{{ getTransportIcon(stage.transportType) }}</span>
|
|
<span class="text-base-content/70">{{ formatDistance(stage.distanceKm) }}км</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
export interface RouteStage {
|
|
transportType?: string | null
|
|
distanceKm?: number | null
|
|
}
|
|
|
|
defineProps<{
|
|
stages: RouteStage[]
|
|
}>()
|
|
|
|
const getTransportIcon = (type?: string | null) => {
|
|
switch (type) {
|
|
case 'rail':
|
|
return '🚂'
|
|
case 'sea':
|
|
return '🚢'
|
|
case 'road':
|
|
default:
|
|
return '🚛'
|
|
}
|
|
}
|
|
|
|
const formatDistance = (km?: number | null) => {
|
|
if (!km) return '0'
|
|
return Math.round(km).toLocaleString()
|
|
}
|
|
</script>
|