function Row({label,value}) {
  return <HStack width="fill" spacing={8}>
    <Text fontSize={12} color={$env.foreground}>{label}</Text><Spacer/>
    <Text fontSize={18} color={$env.accent}>{value}</Text>
  </HStack>;
}
function main() {
  const r=$data.current;
  const minutes=r.movingSeconds===null?null:Math.floor(r.movingSeconds/60);
  return <CardContent title="本次行程">
    <VStack spacing={14}>
      <Row label="距离" value={r.distanceMeters===null?'—':(r.distanceMeters/1000).toFixed(1)+' km'}/>
      <Row label="移动时间" value={minutes===null?'—':minutes+' min'}/>
      <Row label="当前速度" value={r.speed===null?'—':Math.round(r.speed)+' '+r.speedUnit}/>
    </VStack>
  </CardContent>;
}