Mav-Mobile-UI/src/components/RearCameraOverview/RearCameraOverviewCard.tsx

import clsx from "clsx";
import Card from "../UI/Card";
import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
import { useSwipeable } from "react-swipeable";
import { useNavigate } from "react-router";
import CardHeader from "../UI/CardHeader";
import { faCamera } from "@fortawesome/free-regular-svg-icons";

const RearCameraOverviewCard = () => {
  const navigate = useNavigate();
  const handlers = useSwipeable({
    onSwipedLeft: () => navigate("/rear-camera-settings"),
    trackMouse: true,
  });

  return (
    <Card className={clsx("min-h-[40vh] md:min-h-[60vh] h-auto")}>
      <div className="flex flex-col space-y-3 h-full" {...handlers}>
        <CardHeader title="Rear Overiew" icon={faCamera} />
        <SnapshotContainer side="TargetDetectionRear" />
      </div>
    </Card>
  );
};

export default RearCameraOverviewCard;