added sighting feed

src/components/SightingsWidget/SightingWidgetDetails.tsx

@@ -0,0 +1,93 @@
+import type { SightingWidgetType } from "../../types/types";
+
+type SightingWidgetDetailsProps = {
+  effectiveSelected: SightingWidgetType | null;
+};
+
+const SightingWidgetDetails = ({
+  effectiveSelected,
+}: SightingWidgetDetailsProps) => {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm">
+      <div>
+        Make:{" "}
+        <span className="opacity-90">{effectiveSelected?.make ?? "—"}</span>
+      </div>
+      <div>
+        Model:{" "}
+        <span className="opacity-90">{effectiveSelected?.model ?? "—"}</span>
+      </div>
+      <div>
+        Colour:{" "}
+        <span className="opacity-90">{effectiveSelected?.color ?? "—"}</span>
+      </div>
+      <div>
+        Category:{" "}
+        <span className="opacity-90">{effectiveSelected?.category ?? "—"}</span>
+      </div>
+      <div>
+        Char Ht:{" "}
+        <span className="opacity-90">
+          {effectiveSelected?.charHeight ?? "—"}
+        </span>
+      </div>
+      <div>
+        Plate Size:{" "}
+        <span className="opacity-90">
+          {effectiveSelected?.plateSize ?? "—"}
+        </span>
+      </div>
+      <div>
+        Overview Size:{" "}
+        <span className="opacity-90">
+          {effectiveSelected?.overviewSize ?? "—"}
+        </span>
+      </div>
+      <div>
+        Motion:{" "}
+        <span className="opacity-90">{effectiveSelected?.motion ?? "—"}</span>
+      </div>
+      <div>
+        Seen:{" "}
+        <span className="opacity-90">
+          {effectiveSelected?.seenCount ?? "—"}
+        </span>
+      </div>
+      <div>
+        Location:{" "}
+        <span className="opacity-90">
+          {effectiveSelected?.locationName ?? "—"}
+        </span>
+      </div>
+      <div>
+        Lane:{" "}
+        <span className="opacity-90">{effectiveSelected?.laneID ?? "—"}</span>
+      </div>
+      <div>
+        Radar:{" "}
+        <span className="opacity-90">
+          {effectiveSelected?.radarSpeed ?? "—"}
+        </span>
+      </div>
+      <div>
+        Track:{" "}
+        <span className="opacity-90">
+          {effectiveSelected?.trackSpeed ?? "—"}
+        </span>
+      </div>
+      {effectiveSelected?.detailsUrl ? (
+        <div className="col-span-full">
+          <a
+            href={effectiveSelected.detailsUrl}
+            target="_blank"
+            className="underline text-blue-300"
+          >
+            Sighting Details
+          </a>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default SightingWidgetDetails;