45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
import { Flex } from "@mantine/core";
|
|
import { IconMinus, IconRectangle, IconX } from "@tabler/icons-react";
|
|
import classes from './WindowsFrameButtons.module.css'
|
|
import { useWindowActions } from "@/app/hooks/useWindowActions";
|
|
import { cx } from "@/app/utils/style";
|
|
import { useWindowState } from "@/app/hooks/useWindowState";
|
|
import { useWindowFocus } from "@/app/hooks/useWindowFocus";
|
|
|
|
export function WindowsFrameButtons() {
|
|
const {close, minimize, toggle} = useWindowActions();
|
|
const windowState = useWindowState();
|
|
const focus = useWindowFocus();
|
|
|
|
return (<>
|
|
<Flex gap={'sm'} style={{
|
|
cursor: 'pointer',
|
|
appRegion: 'no-drag'
|
|
}} pos={'absolute'} right={4} h={20} align="center" justify="center">
|
|
<Flex w={20} onClick={minimize} className={cx(
|
|
classes.minimize_btn,
|
|
!focus && classes.disabled,
|
|
//windowState.isMinimized && classes.disabled,
|
|
!windowState.isResizable && classes.disabled
|
|
)}>
|
|
<IconMinus stroke={4} size={12}></IconMinus>
|
|
</Flex>
|
|
<Flex w={20} onClick={toggle} className={cx(
|
|
classes.maximize_btn,
|
|
!focus && classes.disabled,
|
|
//windowState.isMaximized && classes.disabled,
|
|
(!windowState.isResizable && !windowState.isFullScreen) && classes.disabled
|
|
)}>
|
|
<IconRectangle stroke={3} size={12}></IconRectangle>
|
|
</Flex>
|
|
<Flex w={20} onClick={close} className={cx(
|
|
classes.close_btn,
|
|
!focus && classes.disabled,
|
|
!windowState.isClosable && classes.disabled
|
|
)}>
|
|
<IconX stroke={3} size={12}></IconX>
|
|
</Flex>
|
|
</Flex>
|
|
</>);
|
|
|
|
} |