31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
|
|
import NavigationArrow from "../UI/NavigationArrow";
|
|
|
|
import Loading from "../UI/Loading";
|
|
import ErrorState from "../UI/ErrorState";
|
|
type SnapshotContainerProps = {
|
|
side: string;
|
|
settingsPage?: boolean;
|
|
zoomLevel?: number;
|
|
onZoomLevelChange?: (level: number) => void;
|
|
};
|
|
|
|
export const SnapshotContainer = ({ side, settingsPage }: SnapshotContainerProps) => {
|
|
const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
|
|
|
|
return (
|
|
<div className="flex flex-col md:flex-row">
|
|
<NavigationArrow side={side} settingsPage={settingsPage} />
|
|
<div className="w-full bg-[#253445] rounded-md overflow-hidden md:h-[500px] lg:h-[70vh]">
|
|
{isError && <ErrorState />}
|
|
{isPending && (
|
|
<div className="absolute inset-0 grid place-items-center">
|
|
<Loading message="Camera Preview" />
|
|
</div>
|
|
)}
|
|
<canvas ref={canvasRef} className="absolute w-full h-full z-20" />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|