34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import PlateRead from "./components/plateRead/PlateRead";
|
|
import SightingStack from "./components/sightingStack/SightingStack";
|
|
import VideoFeed from "./components/videoFeed/VideoFeed";
|
|
import { useSightingList } from "./hooks/useSightingList";
|
|
import { useCameraSettingsContext } from "../../app/context/CameraSettingsContext";
|
|
import SystemOverview from "./SystemOverview/SystemOverview";
|
|
|
|
const Dashboard = () => {
|
|
const { sightingList, isLoading, totalSightings } = useSightingList();
|
|
const { state: cameraSettings } = useCameraSettingsContext();
|
|
const size = cameraSettings.imageSize;
|
|
|
|
const mostRecent = sightingList[0];
|
|
|
|
return (
|
|
<div className="flex flex-col">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-5">
|
|
<VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} size={size} />
|
|
<SightingStack sightings={sightingList} />
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-5 items-center">
|
|
<div className="col-span-1">
|
|
<PlateRead sighting={mostRecent} />
|
|
</div>
|
|
<div className="col-span-2">
|
|
<SystemOverview totalSightings={totalSightings} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|