33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
import type { SightingType } from "../../types/types";
|
|
import { capitalize, formatAge } from "../../utils/utils";
|
|
|
|
type InfoBarprops = {
|
|
obj: SightingType;
|
|
};
|
|
const InfoBar = ({ obj }: InfoBarprops) => {
|
|
const isNPEDHitD = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "D";
|
|
|
|
return (
|
|
<div className="flex items-center gap-3 text-xs bg-neutral-900 px-2 py-1 rounded justify-between">
|
|
<div className="flex items-center gap-3 text-xs">
|
|
<div className="min-w-14">CH: {obj ? obj.charHeight : "—"}</div>
|
|
<div className="min-w-14">Seen: {obj ? obj.seenCount : "—"}</div>
|
|
<div className="min-w-20">{obj ? capitalize(obj.motion) : "—"}</div>
|
|
<div className="min-w-14 opacity-80 text-md">
|
|
{obj ? formatAge(obj.timeStampMillis) : "—"}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="min-w-14 opacity-80 ">
|
|
{isNPEDHitD ? (
|
|
<span className="text-amber-500 font-semibold">NPED HIT CAT D</span>
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InfoBar;
|