import React , { CSSProperties , PropsWithChildren } from "react" ; import { useTheme , makeStyles } from "@material-ui/styles" ; import { Colors } from "@root/theme" ; import { Theme } from "@web-desktop-environment/interfaces/lib/shared/settings" ; const useStyle = ( textColor , backgroundColor , backgroundColorHover , border ) => makeStyles ( ( theme ) => ( { root : { borderRadius : 4 , minHeight : 35 , minWidth : 80 , padding : 4 , display : "flex" , justifyContent : "center" , color : textColor , background : backgroundColor , border , alignItems : "center" , cursor : "pointer" , "&:hover" : { border , backgroundBlendMode : "multiply" , backgroundColor : backgroundColorHover , } , } , shadow : { boxShadow : `-3px 4px 6px -1px ${ theme . shadowColor }` , } , } ) ) ; type Variants = "main" | "dark" | "light" ; interface ButtonProps { onClick ? : ( e : React . MouseEvent < HTMLDivElement , MouseEvent > ) => void ; className ? : string ; color ? : Colors ; variant ? : Variants ; border ? : boolean ; transparent ? : boolean ; shadow ? : boolean ; style ? : CSSProperties ; } const Button = ( { children , className , color , variant , border , transparent , onClick , style , shadow , } ) => { const theme = useTheme ( ) ; const selectedColor = theme [ color || "background" ] ; const textColor = selectedColor . text ; const borderValue = border ? `1px solid ${ textColor }` : "none" ; const backgroundColorMap = { dark : selectedColor . transparentDark || selectedColor . dark , main : selectedColor . transparent || selectedColor . main , light : selectedColor . transparentLight || selectedColor . light , } ; const backgroundColor = transparent !== true ? backgroundColorMap [ variant || "main" ] || selectedColor . transparent || selectedColor . main : "transparent" ; const backgroundColorHover = selectedColor [ variant || "main" ] || selectedColor . main ; const classes = useStyle ( textColor , backgroundColor , backgroundColorHover , borderValue ) ( ) ; return ( < div onClick = { onClick } style = { style } className = { `${ classes . root } ${ shadow ? classes . shadow : "" } ${ className || "" }` } > { children } < /div>); } ; export default Button ;