70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import React, { ReactNode } from 'react'
|
|
import { useSetRecoilState } from 'recoil'
|
|
import { shortcutsState } from '../../store/Atoms'
|
|
import Modal from '../shared/Modal'
|
|
|
|
interface Shortcut {
|
|
children: ReactNode
|
|
content: string
|
|
}
|
|
|
|
function ShortCut(props: Shortcut) {
|
|
const { children, content } = props
|
|
|
|
return (
|
|
<div className="shortcut-option">
|
|
<div className="shortcut-description">{content}</div>
|
|
<div className="shortcut-key">{children}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function ShortcutsModal() {
|
|
const setShortcutState = useSetRecoilState(shortcutsState)
|
|
|
|
const shortcutStateHandler = () => {
|
|
setShortcutState(prevShortcutState => !prevShortcutState)
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
onClose={shortcutStateHandler}
|
|
title="Hotkeys"
|
|
className="modal-shortcuts"
|
|
>
|
|
<div className="shortcut-options">
|
|
<ShortCut content="Enable multi-stroke mask drawing">
|
|
<p>Hold Cmd/Ctrl</p>
|
|
</ShortCut>
|
|
<ShortCut content="Undo inpainting">
|
|
<p>Cmd/Ctrl + Z</p>
|
|
</ShortCut>
|
|
<ShortCut content="Pan">
|
|
<p>Space & Drag</p>
|
|
</ShortCut>
|
|
<ShortCut content="View original image">
|
|
<p>Hold Tab</p>
|
|
</ShortCut>
|
|
<ShortCut content="Reset zoom/pan">
|
|
<p>Esc</p>
|
|
</ShortCut>
|
|
<ShortCut content="Cancel mask drawing">
|
|
<p>Esc</p>
|
|
</ShortCut>
|
|
<ShortCut content="Decrease Brush Size">
|
|
<p>[</p>
|
|
</ShortCut>
|
|
<ShortCut content="Increase Brush Size">
|
|
<p>]</p>
|
|
</ShortCut>
|
|
<ShortCut content="Toggle Dark Mode">
|
|
<p>Shift + D</p>
|
|
</ShortCut>
|
|
<ShortCut content="Toggle Hotkeys Panel">
|
|
<p>H</p>
|
|
</ShortCut>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|