1
1
import InfoIcon from "@mui/icons-material/Info"
2
- import { Box , Button , type ButtonProps , IconButton , type IconButtonProps , Stack , Tooltip } from "@mui/material"
2
+ import {
3
+ Box ,
4
+ Button as MuiButton ,
5
+ type ButtonProps ,
6
+ IconButton as MuiIconButton ,
7
+ type IconButtonProps ,
8
+ Stack ,
9
+ Tooltip ,
10
+ ToggleButton as MuiToggleButton ,
11
+ type ToggleButtonProps ,
12
+ ToggleButtonGroup as MuiToggleButtonGroup ,
13
+ type ToggleButtonGroupProps ,
14
+ } from "@mui/material"
15
+ import { SoundPlayer } from "@/systems/sound/SoundPlayer"
3
16
import { AiFillWarning , AiOutlineDoubleRight , AiOutlineInfoCircle } from "react-icons/ai"
4
17
import { BiRefresh } from "react-icons/bi"
5
18
import { BsCodeSquare } from "react-icons/bs"
@@ -83,6 +96,38 @@ export const Spacer = (heightPx?: number, widthPx?: number) => {
83
96
return < Box minHeight = { `${ heightPx } px` } minWidth = { `${ widthPx } px` } />
84
97
}
85
98
99
+ export const Button : React . FC < ButtonProps > = ( { children, onClick, onMouseDown, onMouseUp, ...props } ) => {
100
+ return (
101
+ < MuiButton onClick = { onClick } { ...SoundPlayer . buttonSoundEffects ( ) } { ...props } >
102
+ { children }
103
+ </ MuiButton >
104
+ )
105
+ }
106
+
107
+ export const IconButton : React . FC < IconButtonProps > = ( { children, onClick, onMouseDown, onMouseUp, ...props } ) => {
108
+ return (
109
+ < MuiIconButton onClick = { onClick } { ...SoundPlayer . buttonSoundEffects ( ) } { ...props } >
110
+ { children }
111
+ </ MuiIconButton >
112
+ )
113
+ }
114
+
115
+ export const ToggleButton : React . FC < ToggleButtonProps > = ( { children, onClick, onMouseDown, onMouseUp, ...props } ) => {
116
+ return (
117
+ < MuiToggleButton onClick = { onClick } { ...SoundPlayer . buttonSoundEffects ( ) } { ...props } >
118
+ { children }
119
+ </ MuiToggleButton >
120
+ )
121
+ }
122
+
123
+ export const ToggleButtonGroup : React . FC < ToggleButtonGroupProps > = ( { children, onMouseDown, onMouseUp, ...props } ) => {
124
+ return (
125
+ < MuiToggleButtonGroup { ...SoundPlayer . buttonSoundEffects ( ) } { ...props } >
126
+ { children }
127
+ </ MuiToggleButtonGroup >
128
+ )
129
+ }
130
+
86
131
export const PositiveButton : React . FC < ButtonProps > = ( { children, onClick, ...props } ) => {
87
132
return (
88
133
< Button onClick = { onClick } { ...props } color = "success" >
@@ -166,7 +211,7 @@ export const RefreshButton = (onClick: () => void, props: IconButtonProps = {})
166
211
export const CustomTooltip = ( text : string ) => {
167
212
return (
168
213
< Tooltip title = { text } >
169
- < IconButton
214
+ < MuiIconButton
170
215
size = "small"
171
216
disableRipple
172
217
sx = { {
@@ -195,7 +240,7 @@ export const CustomTooltip = (text: string) => {
195
240
} }
196
241
>
197
242
< InfoIcon fontSize = "small" />
198
- </ IconButton >
243
+ </ MuiIconButton >
199
244
</ Tooltip >
200
245
)
201
246
}
@@ -208,3 +253,6 @@ export const LabelWithTooltip = (labelText: string, tooltipText: string) => {
208
253
</ Stack >
209
254
)
210
255
}
256
+
257
+ // Export the raw MUI components for cases where sound effects are not wanted
258
+ export { MuiButton , MuiIconButton , MuiToggleButton , MuiToggleButtonGroup }
0 commit comments