toggle-button-group

client/src/Components/v2/common/controls/HeaderTimeRange.tsx

@@ -1,7 +1,6 @@
 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 { ToggleButtonGroup, ToggleButton } from "@/Components/v2/inputs";
 import { useTheme } from "@mui/material/styles";
 
 interface MonitorTimeFrameHeaderProps {

client/src/Components/v2/inputs/ToggleButton.tsx

@@ -0,0 +1,52 @@
+import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import type { ToggleButtonProps } from "@mui/material/ToggleButton";
+import type { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup";
+import { useTheme } from "@mui/material/styles";
+
+export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
+	return (
+		<ToggleButton
+			{...props}
+			sx={{
+				px: 8,
+				textTransform: "none",
+				height: 34,
+				fontWeight: 400,
+				whiteSpace: "nowrap",
+				textOverflow: "ellipsis",
+				overflow: "hidden",
+				boxShadow: "none",
+				"&:hover": {
+					boxShadow: "none",
+				},
+				...sx,
+			}}
+		/>
+	);
+};
+
+export const ToggleButtonGroupInput = ({ sx, ...props }: ToggleButtonGroupProps) => {
+	const theme = useTheme();
+	return (
+		<ToggleButtonGroup
+			{...props}
+			sx={{
+				"& .MuiToggleButtonGroup-grouped": {
+					borderColor: theme.palette.divider,
+
+					borderRadius: 0,
+					"&:first-of-type": {
+						borderTopLeftRadius: 2,
+						borderBottomLeftRadius: 2,
+					},
+					"&:last-of-type": {
+						borderTopRightRadius: 2,
+						borderBottomRightRadius: 2,
+					},
+				},
+				...sx,
+			}}
+		/>
+	);
+};

client/src/Components/v2/inputs/index.tsx

@@ -4,3 +4,4 @@ export { SelectInput as Select } from "./Select";
 export { CheckboxInput as Checkbox } from "./Checkbox";
 export { AutoCompleteInput as Autocomplete } from "./AutoComplete";
 export { TextInput as TextField } from "./TextInput";
+export { ToggleButtonInput as ToggleButton, ToggleButtonGroupInput as ToggleButtonGroup } from "./ToggleButton";