got to a good point with sighting modal, want to do cleanup

src/components/SightingsWidget/InfoBar.tsx

@@ -0,0 +1,32 @@
+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;