import React , { ReactNode , useCallback , useRef , useState } from 'react' ; import * as Styled from './DesktopButton.styles' ; import Paragraph from '../Typography/Paragraph/Paragraph' ; import Image from 'next/image' ; import { useActions } from '../../hooks/useActions' ; import { useTypedSelector } from '../../hooks/useTypedSelector' ; import AppContextMenu from '../AppContextMenu/AppContextMenu' ; import { useCloseModalIfClickedOutside } from '../../hooks/useCloseIfClickedOutside' ; export interface Props extends React . ComponentPropsWithoutRef < 'button' > { variant : 'desktop' | 'systemTray' | 'pinnedApp' | 'recommendedApp' ; willOpenWindowWith : ReactNode | null ; iconSrc : string ; iconSize : { height : number ; width : number ; } ; text : string ; action : null | ( ( ) => void ) ; details ? : string ; } IMPORTANT function param { enum } variant param { string } iconSrc param { object } iconSize param { string } text param { string } details param { rest } rest param { ReactNode | null } willOpenWindowWith param { null | function } action returns { JSX . Element } const DesktopButton = ( { variant , willOpenWindowWith , text , iconSize , iconSrc , details , action , ... rest } ) : JSX . Element => { const buttonRef = useRef ( null ) ; const { openWindow } = useActions ( ) ; const { iconsSize } = useTypedSelector ( ( state ) => state . ui ) ; const [ isContextMenuOpen , setIsContextMenuOpen ] = useState ( false ) ; const handleOpenWindow = useCallback ( ( ) => { openWindow ( { windowName : text , isOpen : true , windowIcon : iconSrc , size : { width : 0.75 * window . innerWidth , height : 0.7 * window . innerHeight , } , windowContent : willOpenWindowWith , } ) ; } , [ openWindow , iconSrc , text , willOpenWindowWith ] ) ; const handleOpenContextMenu = ( e ) => { setIsContextMenuOpen ( ( p ) => ! p ) ; e . stopPropagation ( ) ; e . preventDefault ( ) ; } ; useCloseModalIfClickedOutside ( { isModalOpen : isContextMenuOpen , closeModalFunction : ( ) => setIsContextMenuOpen ( false ) , modalRef : buttonRef , } ) ; return ( < Styled . Wrapper > < Styled . ButtonContainer ref = { buttonRef } onClick = { action !== null ? action : handleOpenWindow } onContextMenu = { handleOpenContextMenu } iconSize = { iconsSize } variant = { variant } { ... rest } > < Styled . Figure > < div > < Image src = { iconSrc } alt = { text } height = { iconSize . height } width = { iconSize . width } objectFit = { 'contain' } quality = { 100 } / > < /div> { [ 'pinnedApp' , 'desktop' ] . includes ( variant ) && ( < Styled . Figcaption > < Paragraph margin = { '0rem' } > { text } < /Paragraph> < /Styled.Figcaption>)} { variant === 'recommendedApp' && ( < Styled . RecommendedAppDescription > < Styled . FileName > { text } < /Styled.FileName> < Paragraph margin = { '0rem' } > { details } < /Paragraph> < /Styled.RecommendedAppDescription>)} < /Styled.Figure> < /Styled.ButtonContainer> { variant === 'desktop' && isContextMenuOpen && ( < AppContextMenu appName = { text } iconSrc = { iconSrc } willOpenWindowWith = { willOpenWindowWith } / > ) } < /Styled.Wrapper>); } ; export default DesktopButton ;