- Added TimeStampBadge component and integrate camera and plate patch setup features

- Implemented TimeStampBadge component to display time ago from a timestamp.
- Created CameraControls component with Formik for form handling.
- Developed CameraSetup component with tab navigation for camera settings.
- Added PlateItem component to display individual sighting details.
- Enhanced PlatePatchSetup component to list sightings with timestamp and plate information.

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

@@ -1,5 +1,6 @@
+import TimeStampBadge from "../../../../components/ui/TimeStampBadge";
 import type { SightingType } from "../../../../utils/types";
-import { timeAgo } from "../../../../utils/utils";
+
 import NumberPlate from "../platePatch/NumberPlate";
 
 type SightingItemProps = {
@@ -9,7 +10,6 @@ type SightingItemProps = {
 
 const SightingItem = ({ sighting, onOpenModal }: SightingItemProps) => {
   const motion = sighting.motion.toLowerCase() === "away" ? true : false;
-  const timeStamp = timeAgo(sighting.timeStampMillis);
 
   return (
     <>
@@ -19,7 +19,7 @@ const SightingItem = ({ sighting, onOpenModal }: SightingItemProps) => {
       >
         <div>
           <div>
-            <span className="font-light border bg-blue-400 text-blue-800 px-2 rounded">{timeStamp}</span>
+            <TimeStampBadge timeStamp={sighting.timeStampMillis} />
           </div>
           <div className="text-xl">
             <span className="font-semibold text-gray-200">{sighting.vrm}</span>

src/features/dashboard/components/videoFeed/VideoFeed.tsx

@@ -13,7 +13,6 @@ type VideoFeedProps = {
 };
 
 const VideoFeed = ({ mostRecentSighting, isLoading, size, modeSetting, isModal = false }: VideoFeedProps) => {
-  console.log(size);
   const { state: cameraSettings, dispatch } = useCameraSettingsContext();
   const contextMode = cameraSettings.mode;
   const [localMode, setLocalMode] = useState(0);