11import 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"
316import { AiFillWarning , AiOutlineDoubleRight , AiOutlineInfoCircle } from "react-icons/ai"
417import { BiRefresh } from "react-icons/bi"
518import { BsCodeSquare } from "react-icons/bs"
@@ -83,6 +96,38 @@ export const Spacer = (heightPx?: number, widthPx?: number) => {
8396 return < Box minHeight = { `${ heightPx } px` } minWidth = { `${ widthPx } px` } />
8497}
8598
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+
86131export const PositiveButton : React . FC < ButtonProps > = ( { children, onClick, ...props } ) => {
87132 return (
88133 < Button onClick = { onClick } { ...props } color = "success" >
@@ -166,7 +211,7 @@ export const RefreshButton = (onClick: () => void, props: IconButtonProps = {})
166211export const CustomTooltip = ( text : string ) => {
167212 return (
168213 < Tooltip title = { text } >
169- < IconButton
214+ < MuiIconButton
170215 size = "small"
171216 disableRipple
172217 sx = { {
@@ -195,7 +240,7 @@ export const CustomTooltip = (text: string) => {
195240 } }
196241 >
197242 < InfoIcon fontSize = "small" />
198- </ IconButton >
243+ </ MuiIconButton >
199244 </ Tooltip >
200245 )
201246}
@@ -208,3 +253,6 @@ export const LabelWithTooltip = (labelText: string, tooltipText: string) => {
208253 </ Stack >
209254 )
210255}
256+
257+ // Export the raw MUI components for cases where sound effects are not wanted
258+ export { MuiButton , MuiIconButton , MuiToggleButton , MuiToggleButtonGroup }
0 commit comments