33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
|
import type { SightingType, SightingWidgetType } from "../../types/types";
|
||
|
|
import { capitalize, formatAge } from "../../utils/utils";
|
||
|
|
|
||
|
|
type InfoBarprops = {
|
||
|
|
obj: SightingWidgetType | SightingType;
|
||
|
|
};
|
||
|
|
const InfoBar = ({ obj }: InfoBarprops) => {
|
||
|
|
const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
|
||
|
|
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">
|
||
|
|
{obj ? formatAge(obj.timeStampMillis) : "—"}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="min-w-14 opacity-80 ">
|
||
|
|
{isNPEDHit ? (
|
||
|
|
<span className="text-red-500 font-semibold">NPED HIT</span>
|
||
|
|
) : (
|
||
|
|
""
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default InfoBar;
|