40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
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";
|
|
import SightingOverview from "../SightingOverview/SightingOverview";
|
|
import { useSightingFeedContext } from "../../context/SightingFeedContext";
|
|
|
|
type CardProps = React.HTMLAttributes<HTMLDivElement>;
|
|
|
|
const RearCameraOverviewCard = ({ className }: CardProps) => {
|
|
const navigate = useNavigate();
|
|
const handlers = useSwipeable({
|
|
onSwipedLeft: () => navigate("/rear-camera-settings"),
|
|
trackMouse: true,
|
|
});
|
|
const { mostRecent } = useSightingFeedContext();
|
|
return (
|
|
<Card
|
|
className={clsx(
|
|
"relative min-h-[40vh] md:min-h-[60vh] h-auto",
|
|
className
|
|
)}
|
|
>
|
|
<div className="flex flex-col space-y-3 h-full" {...handlers}>
|
|
<CardHeader
|
|
title="Rear Overview"
|
|
icon={faCamera}
|
|
sighting={mostRecent}
|
|
/>
|
|
<SightingOverview />
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default RearCameraOverviewCard;
|