Coordinate Display

1"use client";
2 
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface CoordinateDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
7  bearing?: string;
8  heading?: number;
9  label?: string;
10  latitude?: string;
11  longitude?: string;
12}
13 
14export function CoordinateDisplay({
15  heading = 0,
16  bearing = "NE",
17  latitude,
18  longitude,
19  label,
20  className,
21  ...props
22}: CoordinateDisplayProps) {
23  return (
24    <div
25      className={cn(
26        "inline-flex flex-col items-end font-mono text-sm",
27        className
28      )}
29      {...props}
30    >
31      {/* Heading */}
32      <div className="flex items-baseline gap-1">
33        <span className="font-bold text-lg text-primary">{heading}°</span>
34        <span className="text-foreground/80 text-xs">{`${String(Math.floor(Math.random() * 200)).padStart(3, "0")}`}</span>
35        <span className="font-bold text-primary">{bearing}</span>
36      </div>
37 
38      {/* Lat/Long */}
39      {latitude || longitude ? (
40        <div className="text-[10px] text-foreground/80 uppercase tracking-widest">
41          {latitude ? <span>LAT {latitude}</span> : null}
42          {latitude ? longitude && <span> · </span> : null}
43          {longitude ? <span>LNG {longitude}</span> : null}
44        </div>
45      ) : null}
46 
47      {/* Label */}
48      {label ? (
49        <div className="text-[10px] text-foreground/80 uppercase tracking-widest">
50          {label}
51        </div>
52      ) : null}
53    </div>
54  );
55}