diff --git a/src/zui/ZUIToggleButton/index.stories.tsx b/src/zui/ZUIToggleButton/index.stories.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/zui/ZUIToggleButton/index.tsx b/src/zui/ZUIToggleButton/index.tsx new file mode 100644 index 000000000..c57d77d48 --- /dev/null +++ b/src/zui/ZUIToggleButton/index.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { ToggleButton, ToggleButtonGroup } from '@mui/material'; + +interface Buttons { + value: string; + label: string; +} + +interface ZUIToggleButtonProps { + buttons: Buttons[]; + onChange: (event: React.MouseEvent, newValue: string) => void; + value: string; + orientation?: 'vertical' | 'horizontal'; + size?: 'small' | 'medium' | 'large'; +} + +const ZUIToggleButton: React.FC = ({ + /**** + *Example usecase: + + * { + // Check if the newTimeScale is valid before calling the function + if (newTimeScale) { + onChangeTimeScale(newTimeScale as TimeScale); // Type assertion to TimeScale + } + }} + orientation="horizontal" + size="medium" + value={timeScale} + /> + * + ***/ + buttons, + onChange, + value, + orientation = 'horizontal', + size = 'medium', +}) => { + return ( + + {buttons.map((buttons) => ( + { + onChange(event, buttons.value); + }} + value={buttons.value} + > + {buttons.label} + + ))} + + ); +}; + +export default ZUIToggleButton;