function Metric({label,value,unit}) {
  return <VStack spacing={6}>
    <Text fontSize={11} color={$env.accent}>{label}</Text>
    <Text fontSize={28} fontDesign="rounded" color={$env.foreground}
      contentAnimation={{type:'numericText'}}>{value===null?'—':value}</Text>
    <Text fontSize={10} color={$env.foreground}>{unit}</Text>
  </VStack>;
}
function main() {
  const r=$data.current;
  return <CardContent title="三项读数">
    <HStack spacing={22}>
      <Metric label="速度" value={r.speed===null?null:Math.round(r.speed)} unit={r.speedUnit}/>
      <Metric label="G 值" value={r.gForce===null?null:r.gForce.toFixed(2)} unit="G"/>
      <Metric label="方位" value={r.heading===null?null:Math.round(r.heading)} unit="°"/>
    </HStack>
  </CardContent>;
}