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
53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<template>
|
|
<Card padding="md" interactive @click="$emit('select')">
|
|
<!-- Header: Source + Price -->
|
|
<div class="flex items-start justify-between mb-2">
|
|
<div>
|
|
<Text weight="semibold">{{ sourceName }}</Text>
|
|
<Text v-if="productName" tone="muted" size="sm">{{ productName }}</Text>
|
|
</div>
|
|
<div class="text-right">
|
|
<Text v-if="priceDisplay" weight="semibold" class="text-primary text-lg">
|
|
{{ priceDisplay }}
|
|
</Text>
|
|
<Text tone="muted" size="sm">{{ formatDistance(totalDistance) }} км</Text>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Route stepper -->
|
|
<RouteStepper v-if="stages.length > 0" :stages="stages" />
|
|
</Card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { RouteStage } from './RouteStepper.vue'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
sourceName: string
|
|
productName?: string
|
|
pricePerUnit?: number | null
|
|
currency?: string | null
|
|
unit?: string | null
|
|
totalDistance: number
|
|
stages?: RouteStage[]
|
|
}>(), {
|
|
stages: () => []
|
|
})
|
|
|
|
defineEmits<{
|
|
select: []
|
|
}>()
|
|
|
|
const priceDisplay = computed(() => {
|
|
if (!props.pricePerUnit) return null
|
|
const curr = props.currency || 'USD'
|
|
const u = props.unit || 'т'
|
|
return `${props.pricePerUnit} ${curr}/${u}`
|
|
})
|
|
|
|
const formatDistance = (km?: number | null) => {
|
|
if (!km) return '0'
|
|
return Math.round(km).toLocaleString()
|
|
}
|
|
</script>
|