Add recent to header

src/Components/MonitorTimeFrameHeader/index.jsx

@@ -20,6 +20,13 @@ const MonitorTimeFrameHeader = ({
 	if (hasDateRange) {
 		timeFramePicker = (
 			<ButtonGroup sx={{ height: 32 }}>
+				<Button
+					variant="group"
+					filled={(dateRange === "recent").toString()}
+					onClick={() => setDateRange("recent")}
+				>
+					Recent
+				</Button>
 				<Button
 					variant="group"
 					filled={(dateRange === "day").toString()}
@@ -55,7 +62,14 @@ const MonitorTimeFrameHeader = ({
 		>
 			<Typography variant="body2">
 				Showing statistics for past{" "}
-				{dateRange === "day" ? "24 hours" : dateRange === "week" ? "7 days" : "30 days"}.
+				{dateRange === "recent"
+					? "2 hours"
+					: dateRange === "day"
+						? "24 hours"
+						: dateRange === "week"
+							? "7 days"
+							: "30 days"}
+				.
 			</Typography>
 			{timeFramePicker}
 		</Stack>