gpx.studio/website/src/lib/components/gpx-layer/TrackpointPopup.svelte

<script lang="ts">
	import type { TrackPoint } from 'gpx';
	import type { PopupItem } from '$lib/components/MapPopup';
	import * as Card from '$lib/components/ui/card';
	import WithUnits from '$lib/components/WithUnits.svelte';
	import { Compass, Mountain, Timer } from 'lucide-svelte';
	import { df } from '$lib/utils';

	export let trackpoint: PopupItem<TrackPoint>;
</script>

<Card.Root class="border-none shadow-md text-base p-2">
	<Card.Header class="p-0">
		<Card.Title class="text-md"></Card.Title>
	</Card.Header>
	<Card.Content class="flex flex-col p-0 text-xs gap-1">
		<div class="flex flex-row items-center gap-1">
			<Compass size="14" />
			{trackpoint.item.getLatitude().toFixed(6)}&deg; {trackpoint.item
				.getLongitude()
				.toFixed(6)}&deg;
		</div>
		{#if trackpoint.item.ele !== undefined}
			<div class="flex flex-row items-center gap-1">
				<Mountain size="14" />
				<WithUnits value={trackpoint.item.ele} type="elevation" />
			</div>
		{/if}
		{#if trackpoint.item.time}
			<div class="flex flex-row items-center gap-1">
				<Timer size="14" />
				{df.format(trackpoint.item.time)}
			</div>
		{/if}
	</Card.Content>
</Card.Root>