34 lines
903 B
TypeScript
34 lines
903 B
TypeScript
import React from "react";
|
|
import { Box } from "@mui/material";
|
|
import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
|
|
import { useSseConnected } from "../context/useResource";
|
|
|
|
interface SseConnectionStatusProps {
|
|
resourceName: string;
|
|
}
|
|
|
|
export function SseConnectionStatus({ resourceName }: SseConnectionStatusProps) {
|
|
const connected = useSseConnected(resourceName);
|
|
|
|
return (
|
|
<Box
|
|
component="span"
|
|
sx={{
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
gap: 0.5,
|
|
px: 1,
|
|
py: 0.25,
|
|
borderRadius: 1,
|
|
border: 1,
|
|
borderColor: connected ? "#4caf50" : "#f44336",
|
|
color: connected ? "#4caf50" : "#f44336",
|
|
fontSize: "0.75rem",
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
<FiberManualRecordIcon sx={{ fontSize: 10 }} />
|
|
{connected ? "Connected" : "Disconnected"}
|
|
</Box>
|
|
);
|
|
} |