function main() {
  const heading = $data.current.heading;
  return <CardContent title="方位">
    <VStack spacing={12}>
      <Transform rotation={heading ?? 0} opacity={heading === null ? 0.25 : 1}
        animations={[{property: 'rotation', duration: 0.25, curve: 'easeOut'}]}>
        <Symbol name="location.north.fill" width={34} height={44} color={$env.accent}/>
      </Transform>
      <Text fontSize={26} color={$env.foreground}>
        {heading === null ? '—' : Math.round(heading) + '°'}
      </Text>
    </VStack>
  </CardContent>;
}