70 lines
1.5 KiB
TypeScript
70 lines
1.5 KiB
TypeScript
|
import Stack from "@mui/material/Stack";
|
||
|
|
import Typography from "@mui/material/Typography";
|
||
|
|
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
|
||
|
|
import ToggleButton from "@mui/material/ToggleButton";
|
||
|
|
import { useTheme } from "@mui/material/styles";
|
||
|
|
|
||
|
|
interface MonitorTimeFrameHeaderProps {
|
||
|
|
isLoading?: boolean;
|
||
|
|
hasDateRange?: boolean;
|
||
|
|
dateRange: string;
|
||
|
|
setDateRange: (dateRange: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const HeaderTimeRange = ({
|
||
|
|
isLoading = false,
|
||
|
|
hasDateRange = true,
|
||
|
|
dateRange,
|
||
|
|
setDateRange,
|
||
|
|
}: MonitorTimeFrameHeaderProps) => {
|
||
|
|
const theme = useTheme();
|
||
|
|
|
||
|
|
const handleChange = (
|
||
|
|
_event: React.MouseEvent<HTMLElement>,
|
||
|
|
newValue: string | null
|
||
|
|
) => {
|
||
|
|
if (newValue !== null) {
|
||
|
|
setDateRange(newValue);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
let timeFramePicker = null;
|
||
|
|
|
||
|
|
if (hasDateRange) {
|
||
|
|
timeFramePicker = (
|
||
|
|
<ToggleButtonGroup
|
||
|
|
value={dateRange}
|
||
|
|
exclusive
|
||
|
|
onChange={handleChange}
|
||
|
|
size="small"
|
||
|
|
>
|
||
|
|
<ToggleButton value="recent">Recent</ToggleButton>
|
||
|
|
<ToggleButton value="day">Day</ToggleButton>
|
||
|
|
<ToggleButton value="week">Week</ToggleButton>
|
||
|
|
<ToggleButton value="month">Month</ToggleButton>
|
||
|
|
</ToggleButtonGroup>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Stack
|
||
|
|
direction="row"
|
||
|
|
justifyContent="flex-end"
|
||
|
|
alignItems="center"
|
||
|
|
gap={theme.spacing(4)}
|
||
|
|
>
|
||
|
|
<Typography variant="body2">
|
||
|
|
Showing statistics for past{" "}
|
||
|
|
{dateRange === "recent"
|
||
|
|
? "2 hours"
|
||
|
|
: dateRange === "day"
|
||
|
|
? "24 hours"
|
||
|
|
: dateRange === "week"
|
||
|
|
? "7 days"
|
||
|
|
: "30 days"}
|
||
|
|
.
|
||
|
|
</Typography>
|
||
|
|
{timeFramePicker}
|
||
|
|
</Stack>
|
||
|
|
);
|
||
|
|
};
|