replace TimeFramePicker with reusabe component

Client/src/Pages/Uptime/Details/Components/TimeFramePicker/index.jsx

@@ -1,58 +0,0 @@
-import { Stack, Typography, Button, ButtonGroup } from "@mui/material";
-import { useTheme } from "@emotion/react";
-import SkeletonLayout from "./skeleton";
-import PropTypes from "prop-types";
-
-const TimeFramePicker = ({ shouldRender = true, dateRange, setDateRange }) => {
-	const theme = useTheme();
-
-	if (!shouldRender) {
-		return <SkeletonLayout />;
-	}
-
-	return (
-		<Stack
-			direction="row"
-			justifyContent="space-between"
-			alignItems="flex-end"
-			gap={theme.spacing(4)}
-			mb={theme.spacing(8)}
-		>
-			<Typography variant="body2">
-				Showing statistics for past{" "}
-				{dateRange === "day" ? "24 hours" : dateRange === "week" ? "7 days" : "30 days"}.
-			</Typography>
-			<ButtonGroup sx={{ height: 32 }}>
-				<Button
-					variant="group"
-					filled={(dateRange === "day").toString()}
-					onClick={() => setDateRange("day")}
-				>
-					Day
-				</Button>
-				<Button
-					variant="group"
-					filled={(dateRange === "week").toString()}
-					onClick={() => setDateRange("week")}
-				>
-					Week
-				</Button>
-				<Button
-					variant="group"
-					filled={(dateRange === "month").toString()}
-					onClick={() => setDateRange("month")}
-				>
-					Month
-				</Button>
-			</ButtonGroup>
-		</Stack>
-	);
-};
-
-TimeFramePicker.propTypes = {
-	shouldRender: PropTypes.bool,
-	dateRange: PropTypes.string,
-	setDateRange: PropTypes.func,
-};
-
-export default TimeFramePicker;

Client/src/Pages/Uptime/Details/Components/TimeFramePicker/skeleton.jsx

@@ -1,23 +0,0 @@
-import { Stack, Skeleton } from "@mui/material";
-
-const SkeletonLayout = () => {
-	return (
-		<Stack
-			direction="row"
-			justifyContent="space-between"
-		>
-			<Skeleton
-				variant="rounded"
-				width="20%"
-				height={34}
-			/>
-			<Skeleton
-				variant="rounded"
-				width="20%"
-				height={34}
-			/>
-		</Stack>
-	);
-};
-
-export default SkeletonLayout;