39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import { useState } from "react";
|
|
import type { SystemHealthStatus } from "../../../types/types";
|
|
import { capitalize } from "../../../utils/utils";
|
|
import SystemHealthModal from "./systemHealthModal/SystemHealthModal";
|
|
|
|
type CameraStatusGridItemProps = {
|
|
title: string;
|
|
statusCategory: SystemHealthStatus[];
|
|
};
|
|
|
|
const CameraStatusGridItem = ({ title, statusCategory }: CameraStatusGridItemProps) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const isAllGood = statusCategory?.every((status) => status.tags.includes("RUNNING"));
|
|
|
|
const handleClick = () => {
|
|
setIsOpen(false);
|
|
};
|
|
return (
|
|
<>
|
|
<div
|
|
className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241] hover:cursor-pointer m-2 h-70"
|
|
onClick={() => setIsOpen(true)}
|
|
>
|
|
<h3 className="text-lg flex flex-row items-center">{capitalize(title)}</h3>
|
|
<p className="text-sm text-slate-300">{isAllGood ? "Click to view module status" : "Some systems down"}</p>
|
|
</div>
|
|
<SystemHealthModal
|
|
isSystemHealthModalOpen={isOpen}
|
|
handleClose={handleClick}
|
|
statusCategory={statusCategory}
|
|
title={title}
|
|
isAllGood={isAllGood}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CameraStatusGridItem;
|