Implement video feed feature with components, hooks, and utility functions

src/features/dashboard/components/sightingStack/SightingItem.tsx

@@ -0,0 +1,23 @@
+import type { SightingType } from "../../../../utils/types";
+import NumberPlate from "../platePatch/NumberPlate";
+
+type SightingItemProps = {
+  sighting: SightingType;
+};
+
+const SightingItem = ({ sighting }: SightingItemProps) => {
+  console.log(sighting);
+  const motion = sighting.motion.toLowerCase() === "away" ? true : false;
+  return (
+    <div className="flex flex-row items-center border p-2 mb-2 rounded-lg border-gray-500 justify-between hover:bg-[#233241] hover:cursor-pointer">
+      <div>
+        <div>Ref: {sighting.ref}</div>
+        <div>vrm: {sighting.vrm}</div>
+      </div>
+
+      <NumberPlate vrm={sighting.vrm} motion={motion} size="md" />
+    </div>
+  );
+};
+
+export default SightingItem;

src/features/dashboard/components/sightingStack/SightingStack.tsx

@@ -0,0 +1,20 @@
+import CardHeader from "../../../../components/CardHeader";
+import Card from "../../../../components/ui/Card";
+import type { SightingType } from "../../../../utils/types";
+import SightingItem from "./SightingItem";
+
+type SightingStackProps = {
+  sightings: SightingType[];
+};
+const SightingStack = ({ sightings }: SightingStackProps) => {
+  return (
+    <Card className="p-4 w-full">
+      <CardHeader title="Sightings" />
+      {sightings.map((sighting) => (
+        <SightingItem key={sighting.ref} sighting={sighting} />
+      ))}
+    </Card>
+  );
+};
+
+export default SightingStack;